비교 연산자

우리는 수학 시간에 아래와 같은 다양한 비교 연산자에 대해 학습한 바 있습니다.

자바스크립트에서 기본 수학 연산은 아래와 같은 문법을 사용해 표현할 수 있습니다.

• 보다 큼·작음: a > b, a < b
• 보다 크거나·작거나 같음: a >= b, a <= b
• 같음(동등): a == b. 등호 =ê°€ 두 ê°œ 연달아 오는 것에 유의하세요. a ​​= b와 같이 등호가 하나일 때는 할당을 의미합니다.
• 같지 않음(부등): 같지 않음을 나타내는 수학 기호 ≠는 자바스크립트에선 a != bë¡œ 나타냅니다. 할당연산자 = 앞에 느낌표 !를 붙여서 표시합니다.

이번 글에선 비교 시 일어나는 기이한 현상을 포함하여 다양한 자료형을 대상으로 자바스크립트가 어떻게 비교를 하는지에 대해 다룰 예정입니다.

글 말미에는 자바스크립트에서만 일어나는 ‘기이한’ 현상을 어떻게 예방할 수 있는지에 대해서 언급해두었습니다.

불린형 반환

다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환합니다. 반환 값은 불린형입니다.

• trueê°€ 반환되면, ‘긍정’, ‘참’, '사실’을 의미합니다.
• falseê°€ 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미합니다.

예시:

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

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

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

문자열 비교

자바스크립트는 ‘사전’ 순으로 문자열을 비교합니다. '사전편집(lexicographical)'순이라고 불리기도 하는 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단됩니다.

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

예시:

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'ê°€ 더 크다는 결론이 도출됩니다.

다른 형을 가진 값 간의 비교

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

예시:

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!

일치 연산자

동등 연산자(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를 다른 ê°’ê³¼ 비교할 땐 예상치 않은 일들이 발생합니다. 일단 몇 가지 규칙을 먼저 살펴본 후, ì–´ë–¤ 예상치 않은 일들이 일어나는지 구체적인 예시를 통해 살펴보도록 하겠습니다.

일치 연산자 ===를 사용하여 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이 될 가능성이 있다고 판단되면, 이를 ë”°ë¡œ 처리하는 코드를 추가하시기 바랍니다.

요약

• 비교 연산자는 불린값을 반환합니다.
• 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’ 순입니다.
• 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 ë‚œ 후 비교가 진행됩니다(일치 연산자는 제외).
• nullê³¼ undefined는 동등 비교(==) ì‹œ 서로 같지만 다른 값과는 같지 않습니다.
• null이나 undefinedê°€ 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의를 기울이시기 바랍니다. null, undefined 여부를 확인하는 코드를 ë”°ë¡œ 추가하는 습관을 들이길 권유합니다.