자바스크립트에는 눈으로 보기엔 비슷하지만 매우 다른 동등 비교 연산자 == 와 === 이 있다. 지금 부터 두 동등 비교 연산자의 차이를 살펴보자.
=== 동등 비교연산자
엄격한 동등성 비교. 즉 타입과 값이 둘다 같아야 한다는 뜻이다.
5 === 5
// true위의 예제에서 보면 숫자 5는 number타입이며 5라는 값을 가지고 있다.
두개의 예를 더 살펴 보자.
'hello world' === 'hello world'
// 둘다 string타입 이고 같은 hello world 값을 가진다.
true === true
// 둘다 boolean타입 이고 같은 true 값을 가진다.이제는 false 를 반환하는 예를 살펴보자.
88 === '88'
// false (number vs string)
'cat' === 'dog'
// false (string:cat vs string:dog 타입은 같지만 값이 다르다.)===
타입과 값이 모두 같아야만
true를 반환한다.
== 동등 비교연산자
느슨한 동등 비교. 강제 형변환을 수행한다.
강제 형변환?
동등 연산자로 비교하기 전에 피연산자들을 공통 타입으로 만드는 행위이다.
77 === '77'
// false(Number vs String)
77 == "77"
// true=== 와 ==를 똑같은 예제로 비교 했을때 == 비교 연산자는 true를 반환해준다. 이러한 현상이 일어난 이유는 강제 형변환 때문인데. 자바스크립트가 동등한 타입으로 변환한 후에 값을 비교 하기 때문이다. 문자열 값 77은 숫자 77로 변화될 수있다. 77 와 77 은 같기 때문이다.
false === 0
// false (다른 타입, 같은값)
false == 0
// trueFalsy 값
왜 자바스크립트는 false == 0 이 성립할까? 자바스크립트에서 0이란 값이 falsy 값이기 때문이다.
자바스크립트는 숫자 0을 강제로 false로 변환시킨다. 그리고 false로 변환된 0 은 결국 false와 같다.
falsy한 값
- false
- 0
- ""
- null
- undefined
- NaN
Falsy 값의 비교
false, 0, "" 을 기억해라 !
아래의 3가지 falsy값을 느슨한 동등 연산자로 비교할 때, falsy 값은 항상 동일하다는 결과를 나타냈다. 그 이유는 falsy값은 false 형태로 강제 형변환이 됐기 때문이다.
1. false == 0
// true
2. 0 == ""
// true
3. "" == flase
// truenull , undefined
null, undefined 를 비교할 때, 서로 같으면 자기 자신과도 같다.
null == null
// ture
undefined == undefined
// true
null == undefined
//true
만일 null을 다른 값과 비교 한다면, false 나올 확률이 높다.
NaN
어떤 값과도 동일하지 않다. 자기자신과도 동일하지 않다.
NaN == null
// false
NaN == undefined
// false
NaN == NaN
// false요약
===연산자는 타입과 값이 모두 같아야 하기 때문에 정확한 동등함을 비교하려 할때 사용하면 좋다.
참고
- original source of this posting from https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a
- 해당 포스팅은 개인적으로 공부하고 정리하기위해 자바스크립트 개발자라면 알아야할 33개념을 번역한 https://velog.io/@jakeseo_me 님의 자료를 참고 한것입니다.
