Comparisons (JavaScript)

출처: https://javascript.info/comparison

Comparisons

 

 

비교

우리는 수학에서 여러 비교 연산자를 배웠음.

자바스크립트에선 다음과 같이 작성됨.

 

크다/작다 : 

a>b , a<b

크거나 같다 / 작거나 같다 :

a>=b , a<=b

같다 :

a == b 

(여기서 ==는 동등성 검사이고 =은 할당을 의미함)

 

같지 않다:

수학에서는 ≠를 사용하지만 자바스크립트에서는 a != b 로 씀.

 

이 글에서는 다양한 비교의 유형, 자바스크립트가 이를 처리하는 방법 , 그리고 주의해야 할 특이한 점들에 대해 알아봄.

 

결과는 boolean

모든 비교 연산자는 불리언 값을 반환함.

 

true :  "예" , '맞음" , 또는 "진실"

false: "아니오" , "틀림" , 또는 "거짓"

 

예를 들어: 

 

alert( 2 > 1 );  // true (맞음)
alert( 2 == 1 ); // false (틀림)
alert( 2 != 1 ); // true (맞음)

 

비교 결과는 변수에 할당할수도 있음.

 

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

 

문자열 비교

자바스크립트는 문자열이 다른 문자열보다 큰지 판단할 때 "사전식"(dictionary) 또는 "렉시코그래피(lexicographical)" 순서를 사용함.

즉, 문자열을 한 글자씩 비교함.

 

예 : 

 

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

 

두 문자열을 비교하는 알고리즘은 다음과 같음 : 

 

1. 두 문자열의 첫 번째 문자를 비교 

2. 만약 첫번째 문자열이 첫 문자가 더 크거나 작다면 , 그에 따라 첫 번쨰 문자열이 더 크거나 작다고 결론지으며 비교를 종료 

3.두 문자열의 첫 문자가 같다면 두번째 문자열을 같은 방식으로 비교 

4.이 과정을 한 문자열의 끝까지 반복

5.두 문자열의 길이가 같으면 두 문자열은 같음. 그렇지 않으면 더 긴 문자열이 더 큰것으로 간주됨.

 

첫 번째 예제에서는 'z' > 'A'가 첫 번째 단계에서 결과가 남.

두번째 예제 'GLOW' > 'GLEE' 는 문자 하나하나 비교하며, "G"와 "G" , "L" , "L" 은 같고 "O"가 "E"보다 크므로 첫번째 문자열이 더 큼.

 

실제 사전과는 다르게 유니코드 순서

위 알고리즘은 사전이나 전화번호부에서 사용하는 것과 유사하지만 완전히 동일하지 않음.

예를 들어 대소문자를 구문함.

대문자 "A"와 소문자 "a"는 다르며 어느쪽이 더 클까?

자바스크립트에선 소문자 "a"가 더 큰것을 간주함.

 

그 이유는 소문자가 내부 인코딩(유니코드)테이블에서 더 큰 인덱스를 가지기 때문임.

(자세한 내용은 strings 챕터에서 다룸.)

 

다른 타입 간의 비교

다른 타입의 값을 비교할 때 , 자바스크립트는 값을 숫자로 변환함.

 

예: 

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환됨
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환됨

 

재미있는 결과 

다음과 같은 상황이 발생할 수 있음.

두 값은 서로 같다고 판별되면서 , 

한 값은 불리언으로 변환하면 true , 다른 값은 false가 될 수 있음.

 

예 : 

 

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

 

자바스크립트 관점에서는 정상적인 결과임.

동등성 검사 (==)는 숫자 변환을 통해 비교하므로 "0"이 0으로 변환되어 비교되고

하지만 명시적인 불리언 변환에선 다른 규칙이 적용됨.

 

엄격한 동등성

일반 동등성 검사 == 에는 문제가 있음.

예를 들어 0과 false를 구분하지 못함.

 

alert( 0 == false ); // true

 

빈 문자열도 마찬가지임.

 

alert( 0 == false ); // true

 

이는 서로 다른 타입의 피연산자들이 숫자로 변환되어 비교되기 때문임.

빈 문자열과 false 모두 숫자로 변환되면 0이 됨.

0과 false를 구분하려면 어떡해야 할까?

 

엄격한 동등성 연산자 (===)는 타입 변환 없이 비교함.

즉 a와 b가 서로 다른 타입이면 a === b는 즉시 false를 반환함.

 

예 : 

alert( 0 === false ); // false, 타입이 다르기 때문

 

!== 연산자는 엄격한 부등호로 !=와 유사하게 동작함.

엄격한 동등성 연산자는 작성 시 길어지지만 명확하게 비교를 수행하여 오류 가능성을 줄여줌.

 

null과 undefined의 비교 

null 또는 undefined를 다른 값과 비교할 떄 직관적이지 않은 동작이 있음.

 

엄격한 동등성(===)검사 : 

서로 다른 타입이므로 null과 undefined는 다름.

 

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

 

비엄격한 동등성(==) 검사:

특별한 규칙에 따라 , null 과 undefined는 서로 같다고 판단함.

단 , 다른 값과는 같지 않음.

 

alert( null == undefined ); // true

 

수학적 비교(<,>,<=,>=)에서 :

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

 

수학적으로 보면 모순처럼 보임.

(3)은 null이 0보다 크거나 같다 라고 하지만 (1)과 (2)는 false임.

이유는 동등성 검사와 수학적 비교의 방식이 다르기 때문임.

수학적 비교에서는 null이 숫자 0으로 변환되므로 , null >= 0 은 true가 됨. 

하지만 동등성 검사에서는 null과 0은 같지 않다고 판단함.

 

비교할 수 없는 undefined

undefined는 다른 값과 비교하면 다음과 같이 동작함 : 

 

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

 

왜 0과 비교할 때 모두 false가 나올까?

 

이는 undefined가 숫자로 변환되면 NaN이 되고 , naN과의 모든 비교는 flase이기 때문임.

또한 동등성 검사에서도 undefined는 null 및 undefined와만 같게 정의됨.

 

문제를 피하는 방법

이 예제들을 살펴본 이유는 복잡한 동작들을 기억할 필요가 있을까 하는 의문 때문임.

실제로 이러한 복잡한 상황들은 점차 익숙해지겠지만 , 문제를 피하는 확실한 방법은 다음과 같음:

 

undefined나 null과의 비교(엄격한 동등성 (===) 제외)는 특별히 주의해서 사용

만약 변수에 null 또는 undefined가 들어올 수 있다면 , >= , > , < , <= 와 같은 비교 연산자를 사용하지 않고 별도로 검사하는 것이 좋음.

 

과제 

비교(Comparisons)

 

다음 표현식들의 결과는 ? 

 

1. 5> 4

2. "apple" > "pineapple"

3. "2" > "12"

4. undefined == null

5. undefined === null

6. null == "\n0\n"

7.null === +"\n0\n"

 

1. true

2. false

3. true -> string이기 때문에 사전식으로 비교하여서 그런 것 같음

4.true

5.false

6.false  null 은 undefined와만 같음.  그러므로 0과는 같지 않음.

7.false