[코어 자바스크립트] 2.9 비교 연산자

출처 : 모던 JavaScript 튜토리얼

• 자바스크립트에서 기본 수학 연산은 아래와 같은 문법을 사용해 표현할 수 있다.
  • 보다 큼·작음: a > b, a < b
  • 보다 크거나·작거나 같음: 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

문자열 비교 알고리즘

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

사전순 X 유니코드순 O

• 자바스크립트의 문자열 비교 알고리즘은 사전이나 전화번호부에서 사용되는 정렬 알고리즘과 유사하지만, 완전 같지는 않다.
• 차이점 중 하나는, 자바스크립트는대·소문자를 따진다는 것이다. 대문자 "A"와 소문자 "a"를 비교했을 때 소문자 "a"가 더 크다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에서는 소문자가 대문자보다 더 큰 인덱스를 갖는다.

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

• ==는 피연산자를 숫자형으로 바꾸지만, Boolean을 사용한 명시적 변환에는 다른 규칙이 사용된다.

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

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

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

4. 일치 연산자

동등 연산자 ==

• 동등 연산자(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, 피연산자의 형 다르다.

• 일치 연산자 ===가 동등 연산자 ==의 엄격한 형태인 것처럼 불일치 연산자 !==는 부등 연산자 !=의 엄격한 형태이다.
• 일치 연산자는 동등 연산자보다 한 글자 더 길긴 하지만 비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여준다.

5. null이나 undefined와 비교하기

• 일치 연산자 === 사용하면, 두 값의 자료형이 다르기 때문에 일치 비교 시 false가 반환된다.

alert( null === undefined ); // false

• 동등 연산자 ==를 사용해 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

• (2)에서 null은 0보다 크거나 같다고 했는데, (1)과 (2)에서 모두 거짓을 반환하고 있다. 이는 동등 연산자 ==와 기타 비교 연산자 > < >= <=의 동작 방식이 다르기 때문이다.
• (1)에서 null > 0이 거짓을, (3)에서 null >= 0이 참을 반환하는 이유는 null이 숫자형으로 변환돼 0이 되기 때문이다.
• 동등 연산자 ==은 피연산자가 undefined나 null일 때 형 변환을 하지 않는다. undefined와 null을 비교하는 경우에만 true를 반환하고, 그 이외의 경우에는 무조건 false를 반환한다. 따라서 (2)도 false를 반환하는 것이다.

비교가 불가능한 undefined

• undefined를 다른 값과 비교해서는 안된다.

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

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

함정 피하기

• 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 해야 한다.
• undefined나 null이 될 가능성이 있는 변수가 >= > < <=의 피연산자가 되지 않도록 해야 한다. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하는 것이 좋다.

6. 요약

• 비교 연산자는 불린값을 반환한다.
• 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 사전순(유니코드순)이다.
• 서로 다른 타입의 값을 비교할 때는 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행된다. (일치 연산자는 제외)
• null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않다.
• null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의해야 한다. null/undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이는 것이 좋다.

7. 과제

비교

아래 표현식들의 결과를 예측해보세요.

5 > 4
"apple" > "pineapple"
"2" > "12"
undefined == null
undefined === null
null == "\n0\n"
null === +"\n0\n"

• 풀이

5 > 4 // true
"apple" > "pineapple" // false
"2" > "12" // true
undefined == null // true (null은 오직 undefined와 같다)
undefined === null // false (일치 연산자는 형도 체크한다)
null == "\n0\n" // false
null === +"\n0\n" // false