도대체 "==" 는 "===" 이랑 뭐가 다른거야? (JavaScript, Type Coercion, NaN)

 

자바스크립트에서 

"==" 와 "==="는

어떤 차이가 있을까?

 

코드부터 살펴보자

 

 

 

22번 줄은 true,

23번 줄은 false가 산출된다

 

 

이유가 뭘까?

 

console.log 로

typeof 를 출력해 보면

0 은 number 타입,

"0" 은 string 타입

 

그렇다면 

"==" 와 "===" 는

명백히 다르다는 것은

알겠는데, 도대체 뭐가 다른 걸까?

 

 

코드를 하나만 더 살펴보자

 

 

 

11번 줄은 true,

13번 줄은 false...

 

 

마찬가지로 console.log 로

typeof 를 찍어보면

0 은 number 타입,

"false" 는 boolean 타입이라고 나온다

 

위 코드들을 바탕으로

유추해 보자면

 

"==" 는 단순히

두 변수의 값을 비교하고,

 

"===" 는

두 변수의 값뿐만 아니라

자료형을 비교하는 느낌이다

 

정답이다.

 

"==" 는 변수 값을

기반으로 비교하고,

 

"===" 는 변수 유형과

변수의 값을 기반으로 비교하며

"엄격한 기준"으로 비교한다고 통칭한다

 

 

여기까지는 알겠는데,

0 이랑 boolean 이 같은 이유는??

 

이건 javascript 특성인데,

javascript 에서는 특정 값들을

"거짓 같은 값" 으로 간주한다

 

0 , null , undefined , NaN, false , ""(빈 문자열)

들은 boolean의 false와 같은 값을 지닌다

 

근데, 애초에 boolean 이 아니라

number 타입인데

왜 false와 비교했을 때 true 가 나올까?

 

그 이유는

느슨한 부등호 , 엄격한 부등호의

존재인데, 그건 아래 코드를

보면서 자세히 얘기해 보자

 

 

 

 

38번 줄이 false가 나오는 이유는

방금 언급했던

느슨한 부등호의 존재 때문이다

 

 

느슨한 부등호란?

"==" 와 "!=" 가 포함되는데,

javascript 에서 타입 강제 변환을 수행한다

(Type Coercion)

즉, 두 값 중 하나 또는 둘 다

다른 타입으로 변환하여 비교하는 것인데

 

string "0" 이 number 0 으로 변환되고,

number 0 과 number 0 을

비교하게 되기 때문에

false가 나오는 것이다

 

그렇다면 그 반대인

엄격한 부등호란?

"===" 와 "!=="가 포함되는데,

느슨한 부등호와는 다르게

타입 강제 변환을 수행하지 않는다

 

따라서 0 과 "0" 을

"!=" 로 비교할 시, false가 나오는 것이고

"!==" 로 비교할 시 true 가 나오는 것이다

 

 

마지막으로

NaN(Not a Number)을 살펴보자

 

 

 

 

NaN 은 기본적으로

그 어떠한 타입과도

같지 않은 녀석이다

 

심지어 자기 자신과도

절대 같지 않으니

이 특성 하나만 기억하면 될 것이다