자바스크립트에서 동등 비교(==)와 일치 비교(===) 차이점

동등 비교(==)와 일치 비교(===), 뭐가 다른 걸까?

자바스크립트를 처음 배우거나, 실무에서 코드를 보다 보면 == 와 === 를 두고 항상 한 번쯤은 고민하게 됩니다.

 

결론부터 말하면, 두 연산자는 동작 방식이 전혀 다릅니다.
이 차이를 제대로 이해하지 못하면, 의도하지 않은 버그를 만들기 쉽습니다.

 

---

 

1. 동등 비교(==)란?

동등 비교 연산자 == 는

값이 같으면 true로 판단합니다.

 

여기서 중요한 포인트는,

비교 전에 자동으로 타입 변환(Type Coercion) 이 일어난다는 점입니다.

 

예제

1 == "1"        // true
true == 1       // true
false == 0      // true
null == undefined // true

 

자바스크립트 엔진이 내부적으로 이렇게 판단합니다.

• "1" → 숫자 1로 변환
• true → 숫자 1로 변환
• false → 숫자 0으로 변환

 

즉, 타입이 다르더라도 어떻게든 맞춰서 비교합니다.

---

 

2. 일치 비교(===)란?

일치 비교 연산자 === 는 값과 타입이 모두 같아야 true가 됩니다.

타입 변환은 절대 일어나지 않습니다.

 

예제

1 === "1"        // false
true === 1       // false
false === 0      // false
null === undefined // false

 

숫자 1과 문자열 "1"은 값이 같아 보이지만, 타입이 다르기 때문에 false입니다.

 

---

 

3. == 와 === 의 가장 큰 차이

한 문장으로 정리하면 이렇습니다.

• == : 타입을 변환해서 비교
• === : 타입 변환 없이 비교

 

조금 더 실무 관점에서 보면,

• == 는 "의도하지 않은 true"를 만들 가능성이 높고
• === 는 "명확한 비교"만 허용합니다

---

 

4. 헷갈리기 쉬운 대표 사례들

 

숫자와 문자열

0 == "0"   // true
0 === "0"  // false

 

불리언 비교

true == 1    // true
true === 1  // false

 

null과 undefined

null == undefined   // true
null === undefined // false

 

이 부분이 특히 위험합니다.

"값이 없는 상태"를 체크하려다 예상치 못한 조건 통과가 발생할 수 있습니다.

---

 

5. 무엇을 써야 할까?

대부분의 경우 === 사용이 정답입니다.
그 이유는 명확합니다.

1. 타입 변환으로 인한 버그를 예방할 수 있고
2. 코드의 의도가 분명해지며
3. 팀 단위 협업에서도 오해가 줄어듭니다

 

실제로 ESLint 같은 코드 검사 도구에서도 == 사용을 경고로 처리하는 경우가 많습니다.

 

---

 

6. 그럼 == 는 언제 쓰나?

아주 예외적인 경우에만 사용합니다.

대표적으로는 이런 상황입니다.

if (value == null) {
  // null 또는 undefined 모두 처리
}

이 코드는 다음 두 경우를 모두 잡아냅니다.

• value === null
• value === undefined

 

이런 의도가 명확한 경우라면, == 를 제한적으로 사용하는 것도 가능합니다.

 

---

 

7.  ==, === 차이점 정리

구분	== (동등 비교)	=== (일치 비교)
타입 비교	하지 않음	함
타입 변환	자동으로 발생	발생하지 않음
안전성	낮음	높음
실무 권장	비권장	권장

 

== 와 === 는 겉보기엔 비슷해 보이지만,동작 방식과 안정성 면에서는 큰 차이가 있습니다.

• 특별한 이유가 없다면 === 를 사용하고
• == 는 “null 또는 undefined 둘 다 체크” 같은 명확한 의도가 있을 때만 사용

 

이 기준만 지켜도, 자바스크립트 비교 연산에서 발생하는 대부분의 실수를 피할 수 있습니다.