3일차 파트 1 - 자바스크립트 기본 - 9) 비교연산자

9) 비교 연산자 : https://ko.javascript.info/comparison

비교 연산자는 수학에서 쓰이는 것과 같이 >, <, >=, <= 가 있고 같다는 의미로 ==, ===, 같지 않다는 의미로 !=, !== 가 있다.

비교 연산자의 반환 값은 Boolean 형이다.
두 비교 결과가 참일 경우 true를, 거짓일 경우 false 를 반환한다.

이 반환 되는 Boolean 값은 다른 값들 처럼 변수에 할당 할 수 있다.

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

문자열 비교

자바스크립트는 '사전'순으로 문자열을 비교한다. 이는 '사전편집(lexicographical)'순 이라고 불리기도 한다.
문자열 한 글자, 한 글자를 비교하는데 사실은 사전순이라기 보다는 유니코드 인덱스 순으로 판단한다.

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

위의 예시를 들면 Z가 A 보다 뒤에 나오기 때문에 큰 값이고
Glow 와 Glee는 앞글자가 같기 때문에 두번째 글자인 l 과 l 을 비교,
또 같은 글자이기 때문에 그 다음 글자인 o 와 e 를 비교한다.
o 가 더 나중에 나오는 글자이기 때문에 Glow 가 더 큰 값이라고 판단된다. (비교중 하나라도 더 큰 값이 나오면 그 뒤의 문자는 비교하지 않는다!)

문자간의 비교가 끝났다면 길이가 더 긴 것을 큰 값이라고 판단한다. 위의 예시 중 'Bee' > 'Be' 가 true인 이유가 이것이다.

위에서 사전순이라기 보다는 유니코드 인덱스 순이라는 언급이 있었는데 이는 문자열 챕터(https://ko.javascript.info/string) 에서 보기로 한다.

간략하게 문자열 챕터를 훑어본 바로는 유니코드에서 소문자의 인덱스가 대문자의 인덱스보다 크기 때문에 (대문자보다 뒤에 등장해서!) 소문자는 무조건 대문자보다 큰 값을 가진다.

다른 형을 가진 값 간의 비교

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

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

alert( true == 1 ); // true, true는 숫자로 변환 하면 1이다.
alert( false == 0 ); // true, false는 숫자로 변환 하면 0이다.

아래 예시는 조금 특이해 보일 수 있지만 당연한 결과다.

let a = 0;
alert( Boolean(a) ); // false, 숫자 0은 false니까.

let b = "0";
alert( Boolean(b) ); // true, 값이 있는 문자열은 true니까.

alert(a == b); // true!, 동등 연산자 ==는 다른 비교연산자들 처럼 비교 값이 서로 다른 형태일 경우
//숫자로 형 변환 후 비교하니까!

일치 연산자

동등 연산자(equality operator) ==은 0과 false를 구별하지 못한다.
빈 문자열도 마찬가지.
왜냐하면 이 동등 연산자는 비교할 때 서로 다른 형태의 값을 비교하면 그 값들을 숫자로 변환하여 비교하기 때문이다!

alert( 0 == false ); // true, false를 숫자로 변환하면 0
alert( '' == false ); // true, ''를 숫자로 변환하면 0, false를 숫자로 변환하면 0

이런 변환을 막기 위해서는 일치 연산자 (strict equality operator) '==='를 사용하면 된다!
일치 연산자는 엄격한 동등 연산자로 값들의 자료형까지 비교한다.

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다.

부등 연산자는 !=, 불일치 연산자는 !== 이다.

하지만 위처럼 일치 연산자를 사용하더라도 문제가 발생할 수 있는데...

null 과 undefined 는 비교할 때 문제가 좀 있다.

alert( null === undefined ); // false, 둘의 자료형은 다르다. 따라서 false

alert( null == undefined ); // true, 동등 연산자(=)는 이 둘을 단짝으로 생각한다!! 
//null 과 undefined 이 두 값을 동등 연산자로 비교할 땐 항상 true를 반환한다.

그렇다면 null 과 0은?

alert( null > 0 );  // (1) false, 비교 연산자는 형태가 다른 값들은 숫자로 변환한다.
//null 을 숫자로 변환하면 0, 따라서 0 > 0 은 false

alert( null == 0 ); // (2) false, null을 동등 연산자로 비교했을 때 true를 반환하는 건
//같은 null이나 undefined뿐이다!

alert( null >= 0 ); // (3) true, null을 숫자로 변환하면 0이다. 따라서 true를 반환.

undefined는?

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

undefined는 숫자로 변환 시 NaN을 반환한다. NaN은 숫자랑 붙으면 무조건 false를 반환한다.