비교 연산자
비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 변환한다. 비교 연산자는 if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.
동등/일치 비교 연산자
동등 비교(loose equality) 연산자와 일치 비교(strict) 연산자는
좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 하지만 비교하는 엄격도가 다르다. 동등 비교 연산자는 느슨한 비교를 하지만,
일치 비교 연산자는 엄격한 비교를 한다.
| 비교 연산자 | 의미 | 사례 | 설명 | 부수 효과 |
|---|---|---|---|---|
| == | 동등 비교 | x == y | x와 y의 값이 같음 | X |
| === | 일치 비교 | x === y | x와 y의 값과 타입이 같음 | X |
| != | 부동등 비교 | x != y | x와 y의 값이 다름 | X |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 | X |
🥬 동등 비교 연산자 (==)
7.1.3절 "문자열 연결 연산자"에서 언급했듯, 개발자의 의도와는 상관없이 자바스크리트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환이라고 한다.
동등 비교(==) 연산자는 좌항과 우항의 연산자를 비교할 때, 먼저 암묵적 타입변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 따라서 동등 비교 연산자는 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후에 같은 값일 수 있다면 true를 반환한다.
// 🖥️ 동등 비교
5 == 5; // true
5 == '5'; // true동등 비교 연산자는 편리한 경우도 있지만, 결과를 예측하기 어렵고 실수하기 쉽다. 다음 예제는 안티 패턴이므로 이해하지 않아도 된다.
🖥️ 동등 비교. 결과 예측이 어렵다.
'0' == ''; // false
0 == ''; // true
0 == '0'; // true
false == 'false'; // false
false == '0'; // true
false == null; // false
false == undefined; // false
위에 안티 패턴 예제 치다가 어이 없어서 오늘 처음으로 크게 웃음ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
동등 비교 연산자는 사용하지 않는 편이 좋다.
🍟 일치 비교 연산자 (===)
일치 비교 (===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다. 다시 말해, 암묵적 타입 변환을 하지 않고 값을 비교한다. 따라서 결과 예측이 쉽다.
일치 비교 연산자에서 주의할 것은 NaN이다.
// 🖥️ Nan은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; false❓작년에 그렇게 NaN을 본 것 같은데 기억이 하나도 안 나네
NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.
🖥️ Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); true숫자 0도 주의하자. 자바스크립트에는 양의 0과 음의 0이 있는데,
이들을 비교하면 true를 반환한다.
오늘 두번째 큰 웃음
🖥️ 0 === -0; // true
0 == -0; // true- Object.is 메서드
앞에서 살펴본 바와 같이 동등 비교 연산자와 일치 비교 연산자는 +0과 -0을 동일하다고 평가한다. 또한 동일한 값인 NaN과 NaN을 비교하면 다른 값이라고 평가한다.
ES6에서 도입된 Object.is 메서드는 다음과 같이 예측 가능한 정확한 비교 결과를 반환한다. 그 외에는 일치 비교 연산자와 동일하게 동작한다.
🖥️ -0 === +0; // true
Object.is(-0, +0); // false
NaN === NaN; // false
Object.is(NaN, NaN) // true
❓ 그럼 양의 0과 음의 0은 다른 것이고, NaN은 자기 자신과 같다는 건가?
부등동 비교 연산자(!=)와 불일치 비교 연산자(==)는 각각 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념이다.
🖥️ // 부동등 비교
5 !== 8; // true
5 !== 5; // false
5 !== '5'; // false
🖥️ // 불일치 비교
5 !== 8; // true
5 !== 5; // false
5 !== '5'; // true( 출처 : 모던 자바스크립트 Deep Dive, 이웅모, 위키북스 )
