[JavaScript] ==와 ===의 차이

● == 연산자
두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환한 후 값을 비교합니다.

ex)

10 10 // true
10 '10' // true
true 1 // true
true '1' // true
true 'true' // false
null undefined // true

 

10 '10'
→ 두 피연산에서 하나가 숫자형이고 다른 하나가 문자열이면, 문자열을 숫자로 변환 후 값을 비교합니다.

 

true 1
→ 두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교합니다.

 

true '1'
→ 불리언 값을 1로 변환하면, 1=='1' 이 되는데, 문자열 '1'을 숫자로 변환 후 값을 비교합니다.

즉, 1==1 로 비교되며, true를 반환합니다.

 

true 'true'
→ 불리언 값을 1로 변환하면, 1'true'가 되는데, 문자열 'true' 는 숫자로 변환 불가능 합니다.
즉, 1=='true' 로 비교되며, false를 반환합니다.
(JavaScript에서 true는 1과, false는 0)

 

null undefined
→ null 과 undefined는 엄연히 다르지만, 연산자는 true를 반환합니다.

---

● === 연산자
연산자는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 비교하였습니다.
하지만, =연산자는 타입을 변환하지 않으므로 연산자에 비해 비교하는 방식이 엄격합니다.
즉, =연산자는 타입이 다르면, false를 반환합니다.

 

10 === 10 // true
10 === '10' // false
true === 1 // false
true === 'true' // false
null === undefined // false
NaN === NaN // false

 

→ NaN 값은 자기 자신을 포함하여 어떠한 값과도 일치하지 않습니다.
즉, ===연산자에 NaN값이 존재하는 경우 항상 false입니다.

→ 정확한 문자열을 비교하기 위해서는 localeCompare 메서드를 사용하는 것이 좋습니다.
문자열은 눈으로 보았을 때, 동일하더라도 인코딩 방식이 다르게 되어있을 수 있기 때문입니다.