1. 비교 연산자
- 보다 큼/작음 : a > b , a < b
- 보다 크거나 / 작거나 같음 : a >= b , a <= b
- 같음 ( 동등 ) : a == b
등호 =가 두 개 연달아 오는 것에 유의.
a = b와 * 같이 등호가 하나일 때는 할당을 의미한다. - 같지 않음 ( 부등 ) : 같지 않음을 나타내는 수학 기호 ≠는
자바스크립트에선 a != b로 나타낸다.
2. 불린형 반환
다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환하며, 반환 값은 불린형이다.
- true가 반환되면, “긍정”, “참”, "사실" 을 의미한다.
- false가 반환되면, “부정”, “거짓”, "사실이 아님" 을 의미힌다.
alert( 2 > 1 ); // true alert( 2 == 1 ); // false alert( 2 != 1 ); // true
let result = 5 > 4; // 비교 결과를 변수에 할당 alert( result ); // true
반환된 불린값은 다른 여타 값처럼 변수에 할당 할 수 있다.
3. 문자열 비교
자바스크립트는 "사전" 순으로 문자열을 비교한다.
" 사전편집 ( lexicographical ) " 순 이라고 불리기도 하는
이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단된다.
실제 단어를 사전에 실을 때 단어를 구성하는 문자 하나하나를 비교하여
등재 순서를 정하는 것과 같이 자바스크립트도 문자열을
구성하는 문자 하나하나를 비교해가며 문자열을 비교한다.
alert( 'Z' > 'A' ); // true alert( 'Glow' > 'Glee' ); // true alert( 'Bee' > 'Be' ); // true
문자열 비교 시 적용되는 알고리즘
-
두 문자열의 첫 글자를 비교한다.
-
첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면 ( 작으면 ) ,
첫 번째 문자열이 두 번째 문자열보다 크다고 ( 작다고 ) 결론 내고 비교를 종료한다. -
두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교한.
-
글자 간 비교가 끝날 때까지 이 과정을 반복한다.
-
비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 낸다.
비교가 종료되었지만 두 문자열의 길이가 다르면
길이가 긴 문자열이 더 크다고 결론 낸다.
정확히는 사전순이 아닌 유니코드 순이다.
자바스크립트의 문자열 비교 알고리즘은 사전이나 전화번호부에서 사용되는
정렬 알고리즘과 아주 유사하지만, 완전히 같진 않다.차이점 중 하나는 자바스크립트는 대·소문자를 따진다는 것이다.
대문자 "A" 와 소문자 "a" 를 비교했을 때 소문자 "a" 가 더 크다.
자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이다.
4. 다른 형을 가진 값 간의 비교
비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다.
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!
두 값을 비교했을 때 참이 반환되는데 ,
값을 논리 평가한 후 비교하면 하나는 거짓이 반환된다.
동등 비교 연산자 [ == ] 는 피연산자를 숫자형으로 바꾸지만 ,
'Boolean’을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문이다.
5. 일치 연산자
동등 연산자 ( 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, 피연산자의 형이 다르기 때문이다.
일치 연산자 [ === ] 가 동등 연산자 [ == ] 의 엄격한 형태인 것처럼
불일치 연산자 [ !== ] 는 부등 연산자 [ != ] 의 엄격한 형태이다.
일치 연산자는 동등 연산자보다 한 글자 더 길긴 하지만
비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여준다.
6. 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과 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)
위 결과를 보면 항상 false를 반환하고 있다.
(1)과 (2)에선 undefined가 NaN으로 변환되는데 (숫자형으로의 변환),
NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환한다.
undefined는 null이나 undefined와 같고 ,
그 이외의 값과는 같지 않기 때문에 (3)은 false를 반환한다.
주의
-
일치 연산자 [ === ] 를 제외한 비교 연산자의 피연산자에
undefined나 null이 오지 않도록 특별히 주의하기. -
undefined 나 null 이 될 가능성이 있는 변수가 >= > < <= 의
피연산자가 되지 않도록 주의하기. -
만약 변수가 undefined 나 null 이 될 가능성이 있다고 판단되면,
이를 따로 처리하는 코드를 추가하는 것이 좋다.
7. 과제
[비교] 아래 표현식들의 결과를 예측해보세요.
5 > 4 "apple" > "pineapple" "2" > "12" undefined == null undefined === null null == "\n0\n" null === +"\n0\n"
5 > 4 → true
"apple" > "pineapple" → false
문자열의 비교는 사전순서가 기준으로 false 이다.
"a"는 "p"보다 작다.
"2" > "12" → true
두 피연산자는 문자열으로, 사전순으로 비교가 이뤄진다.
왼쪽 피연산자의 첫 번째 글자 "2" 가 오른쪽 피연산자의 첫 번째 글자 "1" 보다 크다.
undefined == null → true
null 과 undefined 는 같다.
undefined === null → false
형이 다르기 때문에 일치 연산자 에서는 false가 반환된다.
null == "\n0\n" → false
null은 오직 undefined와 같기 때문에 false 이다 .
null === +"\n0\n" → false
형이 다르므로 false가 반환된다.
