동등 비교 연산자를 지양해야 하는 이유

JavaScript에서 연산자 중 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 비교 연산자는 if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다.
비교 연산자에는 동등 비교 연산자와 일치 비교 연산자가 있는데, 이는 엄격성의 정도에 따라 구분이 된다.

동등 비교 연산자

그 중 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

이 비교 연산자가 편리한 경우도 있지만, 암묵적 타입 변환으로 인해 결과를 예측하기도 어렵고 실수하기도 쉽다. 이 연산자를 남발하게 된다면 안티 패턴이라는 가독성, 성능, 유지보수 등에 부정적인 영향을 줄 수 있어 지양하는 패턴이 되게 된다.

그래서 이를 사용하지 말고 일치 비교 연산자를 사용하는 것이 좋다.

일치 비교 연산자

일치 비교(===) 연산자란 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

// 일치 비교
1 === 5 // true

// 암묵적 타입 변환을 하지 않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
1 === '1' // false

이 연산자에서 주의해야 할 점은 NaN과 0이다.

먼저 NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN 을 사용한다.

// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // -> true
Number.isNaN(10); // -> false
Number.isNaN(1 + undefined); // -> true

그리고 숫자 0은 양의 0과 음의 0이 있는데, 이를 일치 비교 연산자를 사용하여 비교하면 true가 나온다. 만약 이를 구분해서 비교하고 싶다면, Object.is() 메서드를 사용하면 된다.

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

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