[자바스크립트] 동등 비교 연산자 "==" 와 일치 비교 연산자 "==="

비교 연산자 사용하기

비교 연산자 설명

 

비교 연산자는 연산자를 기준으로 좌항과 우항의 피연산자를 비교하여 그 결과를 불린 값으로 반환한다.

 

주로 if문, for문과 같은 제어문의 조건식에서 사용한다.

자바스크립트에서 비교 연산자는 다음의 4가지가 있다.

 

비교 연산자	의미	예시	설명
==	동등 비교	x==y	x와 y의 값이 같다
!=	부동등 비교	x!=y	x와 y의 값이 같다
===	일치 비교	x===y	x와 y의 값, 타입이 같다
!==	불일치 비교	x!==y	x와 y의 값, 타입이 다르다

 

동등 비교 연산자와 일치 비교 연산자가 모두 비교 연산자의 역할을 하지만, 비교하는 엄격성에서 차이가 있다.
동등 비교 연산자는 느슨한 비교를 하고, 일치 비교 연산자는 엄격한 비교를 수행한다.

 

동등 비교 연산자 "=="

loose equality 연산자

 

이 연산자는 비교를 할 때, 암묵적 타입 변환을 통해 타입을 일치시키고, 같은 값인지를 비교한다.

 

암묵적 타입 변환이란, 개발자의 의도와 상관 없이 자바스크립트 엔진에 의해 자동으로 타입이 변환되는 현상

다음의 예시들이 있다.

1 + true        // 2
+undefined        // NaN
1 + "2"            // "12"

 

동등 비교 연산자는 좌항과 우항의 피연산자가 타입이 다르더라도
암묵적 타입 변환 후 같은 값이라면, true를 리턴한다.

5 == "5"            // true
false == "false"    // true
0 == ""                // true
undefined == false    // false

 

이와 같이 == 를 사용해서 비교 연산을 수행하면 개발자가 의도하지 않은 불린 값을 마주칠 수 있다.
따라서 가급적 동등 비교 연산자는 사용하지 않는 편이 더 좋다.

 

 

일치 비교 연산자 "==="

strict equality 연산자

 

이 연산자는 비교를 할 때, 좌항과 우항의 피연산자가 타입이 같아야 하고, 값도 같아야 true를 반환해준다.

따라서 암묵적 타입 변환 없이 값을 비교하기 때문에, 개발자가 연산 결과를 예측하기 쉽다.

1 === 1            // true
1 === "1"        // false

 

그래서 모든 것을 === 로 비교하면 해결될까?

 

꼭 그런것 만은 아니다.
아래의 예시를 보자.

 

 

NaN

NaN이란, Not a Number라는 의미로 여러 경우에서 발생하지만 MDN에 따르면 크게 아래 다섯가지 경우로 인해 발생한다.

1. 숫자로서 읽을 수 없음 (parseInt("안녕"), Number(undefined))
2. 결과가 허수인 수학 계산식 (Math.sqrt(-1))
3. 피연산자가 NaN (1 + NaN)
4. 정의할 수 없는 계산식 (0 * Infinity)
5. 문자열을 포함하면서 덧셈이 아닌 계산식 ("A" / 3)

NaN은 자신과 일치하지 않는 유일한 값으로, NaN === NaN 으로 두 값의 일치를 알 수 없다.

 

 

 

NaN의 비교를 위한 함수로는 isNaN 함수가 있다.

isNaN(NaN)            // true
isNaN(1)            // false
isNaN(+undefined)    // true

isNaN("abcde")        // true (?)

이 함수로 값이 NaN인지 아닌지를 알 수 있다.

 

하지만 문자열도 true를 반환하기 때문에

엄격하게 NaN 값을 검출해야 하는 상황에서는, Object.is 메서드가 사용된다.

 

 

Object.is 메서드

Object.is(NaN, NaN)                // true
Object.is(+undefined, NaN)        // true
Object.is(NaN, "hamburger")        // false

Object.is

두 값이 같은지를 결정하는 메소드이다.

연산 수행 결과는 위와 같다.

 

 

 

!=, !==

다음의 연산자는 각각 동등 비교, 일치 비교 연산자와 반대로 생각하면 된다.

1 != 2            // true
2 != 2            // false
1 != "1"        // false

1 !== 2            // true
1 !== 1            // false
5 !== "5"        // true

 

결론

보통 비교 연산은 if, else문이나 for문의 조건에 사용한다.

그러므로 동등 비교 연산자 "=="를 사용하다 보면 암묵적 형변환(implicit coercion)에 의해

개발자가 의도한 동작이 수행되지 않을 수 있다.

 

그러므로 일치 비교 연산자 "==="를 사용하자.