자바스크립트 비교 연산자 '=='와 '==='는 무엇이 다를까?

면접 대비 자바스크립트 관련 공부하던 도중 갑자기 궁금한 것이 생겼다.

다른 언어에 비해 자바스크립트만이 가지고 있는 특성 여러가지가 있는데, 그 중 하나가 바로 비교연산자에 사용하는 ===이다. 하지만 ==도 사용이 가능하다. 그렇다면 둘은 무엇이 다를까?

설명에 앞서 한줄 요약으로 정리하면

==는 "동등 비교 연산자"로서 느슨한 비교를, ===는 "일치 비교 연산자"로 엄격한 비교를 한다.

동등 비교 연산자 "=="

자바스크립트는 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환된다. 타입을 신경쓰지 않고 자동변환해준다는 것이 가끔씩은 편하기도 하지만, 때로는 개발자의 의도와 상관없는 타입 변환이 이뤄질 수 있기 때문에 위험하다. 이러한 특성때문에 개발자들 사이에선 자바스크립트 관련하여 아래와 같은 밈이 돌기도 한다.

아무튼, 동등 비교 연산자 ==는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 서로 다른 타입이더라도 암묵적 타입 변환 후 같은 값이 될 수 있다면 true를 반환하는 것이다.

5 == 5; // true
5 == '5'; // true

이런 간단한 경우라면 개발자도 금방 예측이 가능하다. 하지만 아래 경우라면 어떨까?

'0' == ''; // false
0 == ''; // true

false == 'false'; // false
false == '0'; // true

false == null; // false
false == undefined; // false

정말 혼란스럽다...

일치 비교 연산자 "==="

그에 비해 일치 비교 연산자는 다음 조건을 모두 만족해야 true를 반환한다.

1. 타입이 일치한다.
2. 값도 일치한다.

암묵적 타입변환이 이뤄지지 않기 때문에 개발자가 값을 예측하기 쉽다는 장점이 있다.

5 === 5; // true
5 === '5'; // false

NaN === NaN; // false => 주의!