비교 연산자

hee·2023년 5월 6일

자바스크립트에서 기본 수학 연산은 아래와 같은 문법을 사용한다.

~보다 큼 or 작음 : a < b, a > b
~보다 크거나 or 작거나 같음 : a <= b, a >= b
같음(동등) : a == b
같지 않음(부등) : a != b

1) 불린형 반환

다른 연산자와 마찬가지로 비교 연산자 역시 값을 출력하는데 출력 값이 불린형이다.

true출력 : ‘긍정’, ‘참’, '사실’
false출력 : ‘부정’, ‘거짓’, '사실이 아님’

alert( 2 > 1 );  // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true

반환된 불린값은 변수에 할당 할 수 있다.

let result = 5 > 4; // 비교 결과를 변수에 할당
alert( result ); // true

2) 문자열 비교

자바스크립트는 사전 순으로 문자열을 비교한다. '사전편집(lexicographical)'순이라고 불리기도 하며 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단한다.

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

문자열 비교는 다음과 같다.

두 문자열의 첫 글자를 비교
첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면 첫 번째 문자열이 두 번째 문자열보다 크다고 판단
두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교
글자 간 비교가 끝날 때까지 이 과정을 반복
비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 판단

3) 다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 값들을 숫자형으로 변환한다.

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교

불린값은 true는 1, false는 0으로 변환된 후 비교된다.

alert( true == 1 ); // true
alert( false == 0 ); // true

4) 일치 연산자

동등 연산자(equality operator) ==은 0과 false를 구분하지 못한다.

alert( 0 == false ); // true

피연산자가 빈 문자열일 때도 마찬가지이다.

alert( '' == false ); // true

이는 동등 연산자==가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문이다. (빈 문자열, false는 숫자형으로 변환하면 0)

일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값 비교가 가능하다.

일치 연산자는 엄격한(strict) 동등 연산자이다. 자료형의 동등 여부까지 검사하기 때문에 피연산자 a와 b의 형이 다를 경우 a === b는 즉시 false를 반환한다.

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문이다.

일치 연산자 ===가 동등 연산자 ==의 엄격한 형태인 것처럼 ‘불일치’ 연산자 !==는 부등 연산자 !=의 엄격한 형태이다.

일치 연산자는 비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여준다는 특징이 있다.

5) 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)를 만들어내는지 확인해본다.

1) 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)는 거짓을 출력한다.

2) 비교 불가능한 undefined

undefined를 다른 값과 비교할 수 없다.

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

예시를 보면 undefined는 항상 false를 출력하고 있다.

이유는,

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