(JS basic) 2. ==, === 그리고 Object.is()

자바스크립트에서 제공하는 비교연산은 세가지다. ==, === 그리고 ECMA Script2015에서 추가된 Object.is() 이다. 어려운 내용이 아니니 하나 하나 어떻게 동작하는지 명세를 살펴보자.

== (Abstract Equality Comparison)

x == y; // return true or false;

느슨한 비교다. 일단 어떻게 동작하는건 중요하지 않다. 안티패턴이다. 안그래도 느슨한 언어에 느슨한 비교는 옳지 않다. 아무튼 과정을 차례대로 보자.

1. 한 값이 null, 다른 한 값이 undefined 라면, true
2. 한 값의 타입이 Number, 다른 한 값의 타입이 String이면 String을 ToNumber하여 비교한다. 비교한 값을 return
3. 한 값의 타입이 Boolean이라면 그 값을 ToNumber하여 다른 값과 비교한다. 비교한 값을 return
4. 한 값의 타입이 String, Number, Symbol 이고 다른 값의 타입이 Object라면Object 타입을 갖는 값을 ToPrimitive하여 비교한다. 비교한 값을 return
5. 여기까지도 아니면 false

위에서 언급한 ToNumber, ToPrimitive의 규칙이 궁금하면 들어가보자.

=== (Strict Equality Comparison)

x === y; // return true or false;

Abstract Equality Comparison와 동일한 순서를 갖는다. 대신 다음 과정이 앞에 추가된다.

1. 두 값의 Type을 비교한다. 다르면 false
2. x의 Type이 Number라면?
3. x나 y중 NaN이 존재하면 false
4. x와 y가 같은 값이면 true, 아닐경우 false
5. +0, -0은 같다고 판단한다.

Object.is()

Object.is(x, y); // return true or false;

Object.is()는 다음과 같은 과정을 거친다.

1. x와 y의 타입 비교. 다르면 false
2. 타입이 숫자라면(이어서)
3. 둘다 NaN인가? true
4. +0 과 -0 의 비교인가? false
5. 그 외의 같은 값인가? true
6. 그것도 아니라면? false

Object.is()와 ===의 가장 큰 차이는 NaN 비교와 +0, -0 비교가 가능해졌다는 점일 것이다.

0 === -0 // true
-0 === -0 // true
NaN === 0/0 // false
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true

같이보면 재밌는 사이트

loose comparison 이 어떻게 이뤄지는지 예시와 함께 볼 수 있는 사이트(https://felix-kling.de/js-loose-comparison)이다.

참고

• https://www.ecma-international.org/ecma-262/9.0/#sec-abstract-equality-comparison
• https://www.ecma-international.org/ecma-262/9.0/#sec-strict-equality-comparison