[자바스크립트] ==과 ===의 차이점

true? false?

1 == '1'

위와 같은 코드를 콘솔에 입력했을 때, 어떤 결과 값을 예상하시나요?

저는 처음 자바스크립트를 배울 때 따옴표 안에 들어있는 값은 문자가 된다고 배웠으니 저 두 값은 '같지 않다', 즉 false 라는 결과가 나와야 맞다고 생각했습니다.

그런데!

띠용?

왜 이런 결과가 나오는 걸까요?

 

동등 연산자와 일치 연산자

동등 연산자인 ==은 비교 전에 두 피연산자를 동일한 자료형으로 변환하고 비교합니다.

따라서 값과 값만을 비교하게 되기 때문에 true값을 반환하는 것입니다.

 

그에 비교해서 일치 연산자인 ===은 보다 엄격한 비교를 합니다.

두 피연산자가 같은 자료형인지, 값이 같은지까지 검사해서 완벽하게 일치해야만 true값을 반환합니다.

 

여러가지 케이스 알아보기

▪ NaN == NaN

NaN == NaN과 NaN === NaN은 false를 반환합니다.

NaN은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다!

▪ null과 undefined

null == undefined // return true
null === undefined
// null은 object type, undefined는 undefined type이므로 return false

null과 undefined는 자기 자신과 일치하며, 서로 동등하지만 일치하지는 않습니다.

 

==과 !=은 잊어라!

따라서 자바스크립트에서는 정확한 비교를 위해 ==과 !=를 사용하는 대신, ===과 !==를 사용하는 것이 좋습니다! 더 자세한 내용은 아래 MDN 링크를 참고하세요.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators