7 min to read

Modern Js 7(비교 연산자)

자바스크립트의 비교 연산자에 대한 정리

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

2.9 비교 연산자

불린형 반환

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

반환된 불린값은 다른 여타 값처럼 변수에 할당 할 수 있습니다.

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

문자열 비교

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

문자열 비교 시 적용되는 알고리즘은 다음과 같습니다.

  1. 두 문자열의 첫 글자를 비교합니다.
  2. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료합니다.
  3. 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교합니다.
  4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
  5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.

예시의 'Z' > 'A'는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 "Glow"와 "Glee"는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.

  1. G는 G와 같습니다.
  2. l은 l과 같습니다.
  3. o는 e보다 크기 때문에 여기서 비교가 종료되고, o가 있는 첫 번째 문자열 "Glow"가 더 크다는 결론이 도출됩니다.

ℹ️정확히는 사전순이 아니라 유니코드 순입니다.

자바스크립트의 문자열 비교 알고리즘은 사전이나 전화번호부에서 사용되는 정렬 알고리즘과 아주 유사하지만, 완전히 같진 않습니다.

차이점 중 하나는 자바스크립트는 대·소문자를 따진다는 것입니다. 대문자 "A"와 소문자 "a"를 비교했을 때 소문자 "a"가 더 큽니다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이죠. 이와 관련한 자세한 내용은 문자열 챕터에서 다루도록 하겠습니다.

다른 형을 가진 값 간의 비교

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

불린값의 경우 true는 1, false는 0으로 변환된 후 비교가 이뤄집니다.

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

ℹ️흥미로운 상황

같이 일어나지 않을 법한 두 상황이 동시에 일어나는 경우도 있습니다.

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

두 값을 비교했을 때 참이 반환되는데, 값을 논리 평가한 후 비교하면 하나는 거짓이 반환된다는 점에 고개를 갸우뚱할 수도 있습니다. 자바스크립트의 관점에선 이런 결과가 아주 자연스럽습니다. 동등 비교 연산자 ==는 (예시에서 문자열 "0"을 숫자 0으로 변환시킨 것처럼) 피연산자를 숫자형으로 바꾸지만, ‘Boolean’을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문입니다.

일치 연산자

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

alert( 0 == false ); // true

피연산자가 빈 문자열일 때도 같은 문제가 발생하죠.

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

이런 문제는 동등 연산자 ==가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생합니다. 빈 문자열과 false는 숫자형으로 변환하면 0이 되죠.

그렇다면 0과 false는 어떻게 구별할 수 있을까요?

일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있습니다.

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

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

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으로 변합니다.

null vs 0

null과 0을 비교해 봅시다.

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

동등 연산자 ==는 피연산자가 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)

요약