[JavaScript] The Modern JavaScript Tutorial - (2-9) Comparisons

개요

a > b, a < b

a >= b, a <= b

a == b (동등) / a = b (할당)

a != b

 

불린형 반환

다른 연산자와 마찬가지로 비교 연산자도 값을 반환한다. 반환 값은 boolean형이다.

• true - '긍정', '참', '사실'
• false - '부정', '거짓', '사실이 아님'

// comparison operators return 'boolean'
alert(2 > 1);   // true
alert(2 == 1);  // false
alert(2 != 1);  // true

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

 

문자열 비교

자바스크립트는 사전순으로 문자열을 비교한다.

실제 단어를 사전에 실을 때 단어를 구성하는 문자 하나하나를 비교해서 등재하는 것과 같이, 자바스크립트에서도 문자열을 구성하는 문자 하나하나를 비교한다.

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

 

문자열 비교 알고리즘

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

예시의 'Z' > 'A'는 (1)번째 단계에서 비교 결과가 도출된다.

반면, 문자열 'Glow'와 'Glee'의 비교는 다음과 같이 진행된다.

1. G는 G와 같다.
2. l은 l과 같다.
3. o는 e보다 크기 때문에 비교가 종료된다. o가 있는 첫 번째 문자열 'Glow'가 더 크다는 결론이 도출된다.

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

대문자 A와 소문자 a를 비교했을 때, 소문자 a가 더 크다. 이는 유니코드순으로 비교하기 때문이다. 자세한 건 문자열 챕터에서 다룬다.

 

다른 형을 가진 값 간의 비교

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

// comparison of different types
alert('2' > 1);     // true, string '2'  -> number 2
alert('01' == 1);   // true, string '01' -> number 1

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!

 

일치 연산자

동등 연산자(equality operator) ==는 0과 false를 구별하지 못한다. 다음 예제와 같이 피연산자가 빈 문자열일 때도 마찬가지이다.

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

동등 연산자 ==가 형이 다른 피연산자를 비교할 때, 피연산자를 숫자형으로 바꾸기 때문에 발생하는 문제이다.

이러한 현상을 해결하기 위해 일치 연산자를 사용한다.

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

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

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

불일치 연산자 !==는 부등 연산자 !=의 엄격한 형태이다.

비교 결과가 명확하기 때문에, 형 변환에 의한 에러가 발생할 확률을 줄여 준다.

 

null이나 undefined와 비교하기

null이나 undefined를 다른 값과 비교할 때 예상치 않은 일들이 발생한다.

 

규칙

• 일치 연산자 ===를 사용하여 null과 undefined를 비교

두 값의 자료형이 다르기 때문에 일치 비교 시 거짓이 반환된다.

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

• 동등 연산자 ==를 사용하여 null과 undefined를 비교

동등 연산자 사용 시 특별한 규칙이 적용되어 true가 반환된다. 두 값끼리는 호환이 되나, 다른 값들과는 그렇지 않다.

alert(null == undefined);   // true

• 산술 연산자나 기타 비교 연산자 < > <= >=를 사용하여 null과 undefined를 비교

이 경우에는 null은 0, undefined는 NaN의 숫자형으로 변환된다.

이제 해당 규칙을 가지고 엣지 케이스(Edge case)를 확인해 보자. 그리고 어떻게 하면 엣지 케이스가 만들어 내는 함정에 빠지지 않을 수 있는지 알아보도록 하자.

엣지 케이스: 매개변수의 값이 극단적인 경우에 발생하는 문제 또는 상황.

 

null vs 0

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

위의 비교 결과는 논리에 맞지 않다. (3)에서 null은 0보다 크거나 같다고 했기 때문에 (1)이나 (2) 중 하나는 true여야 하는데, 둘 다 false를 반환하고 있다.

이는 동등 연산자 ==와 기타 비교 연산자 > < >= <=의 동작 방식이 다르기 때문이다.

(1)에서 null > 0이 false를, (3)에서 null >= 0이 true를 반환하는 이유는 기타 비교 연산자가 동작할 때 null이 숫자형으로 변환되어 0이 되기 때문이다.

동등 연산자는 피연산자가 undefined나 null일 때 형 변환을 하지 않는다. **undefined와 null을 비교하는 경우에만 true를 반환**하고, 그 이외의 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환한다.

 

비교가 불가능한 undefined

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

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

(1)과 (2)에선 undefined가 NaN이라는 숫자형으로 변환되는데, 비교 연산자는 NaN이 피연산자인 경우 항상 false를 반환한다.

undefined는 null이나 undefined와 같고, 그 외 값과는 같지 않기 떄문에 (3)은 false를 반환한다.

 

함정 피하기

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

 

과제

비교

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

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial