[Javascript] 자바스크립트 비교연산자

동등 연산자 (==)

자바스크립트에서는 두 개의 값이 같은지 비교할 때 동등 연산자 (==)를 사용합니다. 이 연산자는 값의 타입을 무시하고 값 자체를 비교합니다. 예를 들어, 다음과 같은 코드를 실행하면 true를 반환합니다.

var a = 10;
var b = "10";
console.log(a == b); // true

a와 b는 값은 같지만 타입이 다릅니다. 하지만 동등 연산자는 값을 비교하기 때문에 true를 반환합니다.

일치 연산자 (===)

동등 연산자와 달리 일치 연산자 (===)는 값과 타입을 모두 비교합니다. 예를 들어, 다음과 같은 코드를 실행하면 false를 반환합니다.

var a = 10;
var b = "10";
console.log(a === b); // false

a와 b는 값은 같지만 타입이 다릅니다. 이 경우 일치 연산자는 값과 타입을 모두 비교하기 때문에 false를 반환합니다.

부등 연산자 (!=)

부등 연산자 (!=)는 값이 같지 않은 경우에 true를 반환합니다. 예를 들어, 다음과 같은 코드를 실행하면 true를 반환합니다.

var a = 10;
var b = "20";
console.log(a != b); // true

a와 b는 값이 다르기 때문에 true를 반환합니다.

불일치 연산자 (!==)

불일치 연산자 (!==)는 값과 타입이 다른 경우에 true를 반환합니다. 예를 들어, 다음과 같은 코드를 실행하면 true를 반환합니다.

var a = 10;
var b = "20";
console.log(a !== b); // true

a와 b는 값이 다르고 타입도 다르기 때문에 true를 반환합니다.

크다, 작다 연산자 (> <)

크다, 작다 연산자 (>, <)는 값을 비교하여 큰지 또는 작은지를 비교합니다. 예를 들어, 다음과 같은 코드를 실행하면 true를 반환합니다.

var a = 10;
var b = 5;
console.log(a > b); // true

a가 b보다 크기 때문에 true를 반환합니다.

크거나 같다, 작거나 같다 연산자 (>= <=)

크거나 같다, 작거나 같다 연산자 (>=, <=)는 값을 비교하여 크거나 같은지 또는 작거나 같은지를 비교합니다. 예를 들어, 다음과 같은 코드를 실행하면 true를 반환합니다.

var a = 10;
var b = 5;
console.log(a >= b); // true

a가 b보다 크거나 같기 때문에 true를 반환합니다.

null이나 undefined와 비교하기

null이나 undefined를 다른 값과 비교할 땐 예상치 않은 일들이 발생합니다. 일단 몇 가지 규칙을 먼저 살펴본 후, 어떤 예상치 않은 일들이 일어나는지 구체적인 예시를 통해 살펴보도록 하겠습니다.

일치 연산자 ===를 사용하여 null과 undefined를 비교두 값의 자료형이 다르기 때문에 일치 비교 시 거짓이 반환됩니다.

alert( null === undefined ); // false동등 연산자 ==를 사용하여 null과 undefined를 비교동등 연산자를 사용해 null과 undefined를 비교하면 특별한 규칙이 적용돼 true가 반환됩니다. 동등 연산자는 null과 undefined를 '각별한 커플’처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못합니다.

alert( null == undefined ); // true산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 null과 undefined를 비교null과 undefined는 숫자형으로 변환됩니다. null은 0, undefined는 NaN으로 변합니다.

이제 위에서 살펴본 세 가지 규칙들이 어떤 흥미로운 에지 케이스(edge case)를 만들어내는지 알아봅시다. 이후, 어떻게 하면 에지 케이스가 만들어내는 함정에 빠지지 않을 수 있을지에 대해 알아보겠습니다.

null vs 0

null과 0을 비교해 봅시다.

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) *true*

위 비교 결과는 논리에 맞지 않아 보입니다. (3)에서 null은 0보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 거짓을 반환하고 있네요.

이런 결과가 나타나는 이유는 동등 연산자 ==와 기타 비교 연산자 <, >, <=, >=의 동작 방식이 다르기 때문입니다. (1)에서 null > 0이 거짓을, (3)에서 null >= 0이 참을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) null이 숫자형으로 변환돼 0이 되기 때문입니다.

그런데 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지 않습니다. undefined와 null을 비교하는 경우에만 true를 반환하고, 그 이외의 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환합니다. 이런 이유 때문에 (2)는 거짓을 반환합니다.

비교가 불가능한 undefined

undefined를 다른 값과 비교해서는 안 됩니다.

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

위 예시를 보면 undefined는 0을 매우 싫어하는 것처럼 보입니다. 항상 false를 반환하고 있네요.

이런 결과는 아래와 같은 이유 때문에 발생합니다.

• (1)과(2)에선 undefined가 NaN으로 변환되는데(숫자형으로의 변환), NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환합니다.
• undefined는 null이나 undefined와 같고, 그 이외의 값과는 같지 않기 때문에 (3)은 false를 반환합니다.

함정 피하기

위와 같은 에지 케이스를 왜 살펴보았을까요? 이런 예외적인 경우를 꼭 기억해 놓고 있어야만 할까요? 그렇지는 않습니다. 개발을 하다 보면 자연스레 이런 경우를 만나고 점차 익숙해지기 때문에 지금 당장 암기해야 할 필요는 없습니다. 하지만 아래와 같은 방법을 사용해 이런 예외 상황을 미리 예방할 수 있다는 점은 알아두시길 바랍니다.

• 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의하시기 바랍니다.
• 또한, undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.