자바스크립트에서 제공하는 비교연산은 세가지다. ==, === 그리고 ECMA Script2015에서 추가된 Object.is() 이다. 어려운 내용이 아니니 하나 하나 어떻게 동작하는지 명세를 살펴보자.
== (Abstract Equality Comparison)
x == y; // return true or false;
느슨한 비교다. 일단 어떻게 동작하는건 중요하지 않다. 안티패턴이다. 안그래도 느슨한 언어에 느슨한 비교는 옳지 않다. 아무튼 과정을 차례대로 보자.
- 한 값이 null, 다른 한 값이 undefined 라면, true
- 한 값의 타입이 Number, 다른 한 값의 타입이 String이면 String을 ToNumber하여 비교한다. 비교한 값을 return
- 한 값의 타입이 Boolean이라면 그 값을 ToNumber하여 다른 값과 비교한다. 비교한 값을 return
- 한 값의 타입이 String, Number, Symbol 이고 다른 값의 타입이 Object라면Object 타입을 갖는 값을 ToPrimitive하여 비교한다. 비교한 값을 return
- 여기까지도 아니면 false
위에서 언급한 ToNumber, ToPrimitive의 규칙이 궁금하면 들어가보자.
=== (Strict Equality Comparison)
x === y; // return true or false;
Abstract Equality Comparison와 동일한 순서를 갖는다. 대신 다음 과정이 앞에 추가된다.
- 두 값의 Type을 비교한다. 다르면 false
- x의 Type이 Number라면?
- x나 y중 NaN이 존재하면 false
- x와 y가 같은 값이면 true, 아닐경우 false
- +0, -0은 같다고 판단한다.
Object.is()
Object.is(x, y); // return true or false;
Object.is()는 다음과 같은 과정을 거친다.
- x와 y의 타입 비교. 다르면 false
- 타입이 숫자라면(이어서)
- 둘다 NaN인가? true
- +0 과 -0 의 비교인가? false
- 그 외의 같은 값인가? true
- 그것도 아니라면? false
Object.is()와 ===의 가장 큰 차이는 NaN 비교와 +0, -0 비교가 가능해졌다는 점일 것이다.
0 === -0 // true
-0 === -0 // true
NaN === 0/0 // falseObject.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
같이보면 재밌는 사이트
loose comparison 이 어떻게 이뤄지는지 예시와 함께 볼 수 있는 사이트(https://felix-kling.de/js-loose-comparison)이다.