==와 ===의 차이점은 무엇인가요?

==와 ===는 모두 비교 연산을 수행하는 연산자이다.

 

JavaScript에서 비교 연산의 대상은 값과 데이터 타입, 두 가지임을 이해하고 아래 내용을 알아보자.

 

==

 

==는 느슨한 비교를 수행하는 동등 연산자로,

 

비교하고자 하는 두 대상의 데이터 타입이 다를 경우 동일한 데이터 타입으로 암묵적으로 변환한 뒤 비교를 수행한다.

 

즉 실질적인 비교 대상은 값으로, 데이터 타입이 달라도 값이 같으면 true를 반환할 수 있다.

 

그러나 이러한 암묵적인 형변환 과정이 때로는 예측하지 못한 결과를 초래할 수 있다는 점에서 조심히 사용해야 한다.

 

===

 

===는 엄격한 비교를 수행하는 일치 연산자로,

 

비교하고자 하는 두 대상의 값과 데이터 타입을 비교한다.

 

즉 실질적인 비교 대상은 값과 데이터 타입으로, 값과 데이터 타입이 모두 같아야 true를 반환한다.

 

===는 언제나 안전하고 예측 가능한 결과를 얻을 수 있다는 특징이 있다.

 

타입 변환 규칙

 

==의 암묵적인 형변환은 ECMAScript의 타입 변환 규칙에 따라 이루어진다.

 

Boolean 비교

> 1 == true
true
> 0 == false
true
> 1 === true
false
> 0 === false
false

 

ECMAScript에 따르면 ==로 Boolean을 비교하고자 할 때 Boolean이 숫자로 변환된다.

 

true는 1로, false는 0으로 변환된다.

 

문자열 비교

> 1 == '1'
true
> 1 === '1'
false

 

ECMAScript에 따르면 ==로 문자열을 비교하고자 할 때 문자열이 숫자로 변환된다.

 

null과 undefined 비교

> null == undefined
true
> null === undefined
false

> null == 0
false
> undefined == 0
false

 

ECMAScript에 따르면 ==로 null과 undefined를 비교하고자 할 때 null과 undefined는 서로만 동등하며

 

숫자, 문자열, Boolean과 비교할 때는 변환되지 않는다.

 

* Number(null)은 0, Number(undefined)는 NaN이다. Number(null)이 0임에도 null == 0은 false이다.

 

객체 비교

> [1, 2] == '1,2'
true
> [1, 2] === '1,2'
false

 

ECMAScript에 따르면 ==로 객체를 비교하고자 할 때 객체는 원시 값으로 변환된다.

 

NaN 비교

> NaN == NaN
false
> NaN === NaN
false

 

ECMAScript에 따르면 ==로 NaN을 비교하고자 할 때 NaN은 어떤 값과도 같지 않으며 자기 자신과도 같지 않다.

 

아래는 타입 변환 규칙을 적용한 다양한 예시이다.

> [] == false // [] -> '' -> 0, false -> 0
true
> '' == false // '' -> 0, false -> 0
true

 

위의 예시들을 통해 ==와 ===가 동일하게 작동하는 유일한 경우는 비교하고자 하는 두 대상의 값과 데이터 타입이 모두 동일한 경우이며 데이터 타입이 다르거나 형변환이 발생할 수 있는 경우라면 항상 차이를 보임을 알 수 있다.