== VS === (느슨한 동등 비교 VS 엄격한 동등 비교)

1. ==와 ===의 차이점

느슨한 동등 비교 연산자(==)와 엄격한 동등 비교 연산지(===)는 동일한 비교 연산을 하지만,

엄격한 동등 비교 연산자의 경우에는 타입변환(Type Conversion)을 허용하지 않아 타입이 일치해야한다.

 

엄격한 동등 비교는 타입변환이 없기 때문에 값과 타입이 모두 같아야 동등하다는 결과가 나오기 때문에 예외가 없지만, 느슨한 동등 비교 연산의 경우 주의해야할 예시가 몇몇 있다.

 

2. == 의 동작

타입이 다른 두 값을 ==로 비교 시,

한쪽 또는 양쪽 피연산자에서 타입을 일치시켜 간단히 값만 보고 비교한다. 

2-1 NaN 비교

NaN은 그 자신과도 동등하지 않기에 어떤 동등비교를 해도 동등한 결과가 나오지 않는다.

 

2-2 +0과 -0 비교

+, - 와 같은 부호는 다른 정보를 갖고 있어 비교할 경우 정보가 다르기 때문에 동등하지 않는다.

 

2-3 문자열 ➡ 숫자

let a = 33;
let b = '33';

console.log(a == b); // true

비교 알고리즘에 의해 한쪽 또는 양쪽 피연산자 값이 알아서 암시적으로 강제변환된다.

비교 알고리즘
x의 타입이 number 고, y의 타입이 string이면 x == ToNumber(y) 비교 결과를 반환한다.
x의 타입이 string 고, y의 타입이 number 이면 ToNumber(x) == y 비교 결과를 반환한다.

 

2-3 * ➡ 불리언

let a = '33';
let b = true;

console.log(a == b); // false

어째서 '33'은 truthy 값인데 false가 나오는걸까?

이유는 true가 Number 타입으로 변환되면 1이기 때문이다.

이후 1과 '33'을 느슨한 동등 비교를 하게되면 1 == 33 이 되며 false가 반환되는 것이다.

false도 마찬가지로 0으로 변환되어 비교된다.

비교 알고리즘
x의 타입이 불리언 이면 ToNumber(x) == y 비교 결과를 반환한다.
y의 타입이 불리언 이면 x == ToNumber(y) 비교 결과를 반환한다.

되도록이면 === 엄격한 동등 비교를 이용하는 것이 정신 건강에 좋다.

 

2-3 null ➡ undefined

let a = null;
let b;

console.log(a == b); // true

console.log(a == null); // true
console.log(b == null); // true

console.log(a == false); // false
console.log(b == false); // false

console.log(a == ''); // false
console.log(b == ''); // false

console.log(a == 0); // false
console.log(b == 0); // false

null과 undefined 간의 강제 변환은 안전하고 예측 가능하며,

다른 값도 비교 결과 긍정 오류를 할 가능성은 없다.

비교 알고리즘
x가 null 이고 y 가 undefined 이면 true를 반환한다.
x가 undefined 이고  y가 null 이면 true를 반환한다.

 

2-3 객체 ➡ 비객체

let a = '33';
let b = [ 33 ];

console.log(a == b); // true

let c = 'abc';
let d = Object(c); // 'new String(c)와 같다'

console.log(c == d); // true
console.log(c === d); // false

이러한 결과는 [33]이 ToPrimitive 추상 연산 결과 '33'이 되고, 그리고 '33' == 33이 33 == 33이 되기 때문이다.

 

또한 원시 값을 감싼 객체 래퍼를 한 꺼풀 벗겨 원시값을 반환하는 과정인 언박싱은 == 알고리즘에서 ToPrimitive 강제 변환으로 단순 스칼라 원시 값으로강제 변환된다.

 

하지만 예외의 경우도 있으니 주의하자

let a = null;
let b = Object(a); // Object()와 같다
a == b; // false

let c = undefined;
let d = Object(c); // Object()와 같다
c == d; // false

let e = NaN;
let f = Object(e); // new Number(e)와 같다
e == f; // false

null과 undefined는 객체 래퍼가 따로 없으니 박싱할 수 없다.

 

2-4 falsy한 값 비교

falsy한 값(0, '', [])는 falsy한 값끼리 혹은 false와 비교할 경우는 true를 반환한다.

"0" == false; // true
false == 0; // true
false == ''; // true
false == []; // true
'' == 0; // true
'' == []; // true
0 == []; // true