[자바스크립트] 비교 연산자

 

비교 연산자

• 다양한 자료형을 대상으로 자바스크립트가 어떻게 비교를 하는지 알아보자.

 

 

문자열 비교

• 자바스크립트는 '사전' 순으로 문자열을 비교한다. (정확히는 유니코드 순으로 비교한다.)

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

 

 

다른 형을 가진 값 간의 비교

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

// 문자열 '2'가 숫자 2로 변환된 후 비교가 진행
alert( '2' > 1 ); // true

// 문자열 '01'이 숫자 1로 변환된 후 비교가 진행
alert( '01' == 1 ); // true

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

• 동등 비교 연산자 ==는("0"을 숫자 0으로 변환) 피연산자를 숫자형으로 바꾸지만,
• 'Boolean'을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문이다.

 

 

일치 연산자

• 동등 연산자는 ==은 0과 false를 구별하지 못한다.

alert( 0 == false ); // true
alert( '' == false ); // true

이유?

• 동등 연산자 ==가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생
• 즉, false는 숫자형으로 변환하면 0이기 때문에

해결 방법 :: ===, strict equality operator

• 일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있다.
• ===은 자료형의 동등 여부까지 검사한다.

alert( 0 === false ); // false

// null과 undefined를 비교하면 특별한 규칙이 적영돼 true를 반환
alert( null == undefined ); // true

 

 

null이나 undefined와 비교하기

1. 일치 연산자 ===를 사용하여 null과 undefined를 비교

// 자료형이 다르기 때문에 거짓 반환
alert( null === undefined ); // false

2. 동등 연산자 ==를 사용하여 null과 undefined를 비교

• 동등 연산자를 사용해 null과 undefined를 비교하면 특별한 규칙이 적용돼 true가 반환

alert( null == undefined ); // true

3. 산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 null과 undefined를 비교

• null과 undefined는 숫자형으로 변환됩니다.
• null은 0
• undefined는 NaN으로 변한다.

 

 

null vs 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

• (3)에서 null은 0보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 false를 반환하고 있다.
  • 동등 연산자 ==와 기타 비교 연산자 <, >, <=, >=의 동작 방식이 다르다.
  • (1)이 거짓을 (3)은 참을 반환하는 이유는 null이 숫자형으로 변환돼 0이 되기 때문이다.
  • 하지만 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지 않는다.
  • undefined와 null을 비교하는 경우에만 true를 반환
  • 그 외 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환
• 왜?

 

 

undefined를 다른 값과 비교해서는 안 된다.

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

• (1)과(2)에선 undefined가 NaN으로 변환되는데(숫자형으로의 변환)
• NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환한다.
• undefined는 null이나 undefined와 같고, 그 이외의 값과는 같지 않기 때문에 (3)은 false를 반환한다.

⚠️ 주의

• 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 한다.
• null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않다.
• null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때 주의하기!
• null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유!

 

 

📌 참고

• 모던 JavaScript 튜토리얼