7 min to read
Modern Js 7(비교 연산자)
자바스크립트의 비교 연산자에 대한 정리

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.
2.9 비교 연산자
- 보다 큼·작음:
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
문자열 비교
alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true
문자열 비교 시 적용되는 알고리즘은 다음과 같습니다.
- 두 문자열의 첫 글자를 비교합니다.
- 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료합니다.
- 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교합니다.
- 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
- 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.
예시의 'Z' > 'A'
는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 "Glow"
와 "Glee"
는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.
G
는G
와 같습니다.l
은l
과 같습니다.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
ℹ️흥미로운 상황
같이 일어나지 않을 법한 두 상황이 동시에 일어나는 경우도 있습니다.
- 동등 비교(
==
) 시 true를 반환함 - 논리 평가 시 값 하나는
true
, 다른 값 하나는false
를 반환함
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)
- 일치 연산자
===
를 제외한 비교 연산자의 피연산자에undefined
나null
이 오지 않도록 특별히 주의하시기 바랍니다. - 또한,
undefined
나null
이 될 가능성이 있는 변수가>= > < <=
의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가undefined
나null
이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
요약
- 비교 연산자는 불린값을 반환합니다.
- 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’순입니다.
- 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
null
과undefined
는 동등 비교(==
) 시 서로 같지만 다른 값과는 같지 않습니다.null
이나undefined
가 될 확률이 있는 변수가>
또는<
의 피연산자로 올 때는 주의를 기울이시기 바랍니다.null/undefined
여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.
Comments