[JS] 비교 연산자 ==와 ===

개요

• 동등 연산자: 피연산자1 == 피연산자2
• 일치 연산자: 피연산자 1 === 피연산자2
• 두 값을 비교하는 기타 방식: Object.is(대상1, 대상2)

동등 비교 연산자 ==

• 비교대상인 두 값을 느슨하게 비교한다.
• 암묵적 형변환을 통해 두 값을 형변환한 후의 값이 같다면 true, 다르다면 false를 반환함.
• ‘암묵적 형변환’이라는 추가적인 과정에 대해 고려해야하므로 비교 결과에 대한 ‘예측성’이 떨어진다.
• [*모던 자바스크립트 딥다이브]*에서는 동등 비교 연산자의 사용을 추천하지 않고 있다.
• 예시코드

  // 동등 비교. 결과를 예측하기 어렵다.
  '0' == ''; // -> false
  0 == '';   // -> true
  0 == '0';  // -> true
  false == 'false';   // -> false
  false == '0';       // -> true
  false == null;      // -> false
  false == undefined; // -> false

일치 비교 연산자 ===

• 비교 대상인 두 값을 엄격하게 비교한다.
• 즉, 두 값의 type까지 모두 일치해야 true를, 다르다면 false를 반환한다.
• 예시 코드: 일치 비교 연산자를 통해 비교한 숫자 5와 string ‘5’는 다르다.

  // 일치 비교
  5 === 5; // -> true
  
  // 암묵적 타입 변환을 하지 않고 값을 비교한다.
  // 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
  5 === '5'; // -> false

• 일치 비교 연산자에서 알아두면 좋을 특이사항들
  • 어떤 변수 variable에 할당된 값이 NaN인지 확인하고 싶을때, if(variable === NaN) 이 아니라 Number의 isNaN() 메서드를 활용해야 한다.

    // NaN은 자신과 일치하지 않는 유일한 값이다.
    NaN === NaN; // -> false

    // Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
    Number.isNaN(NaN); // -> true
    Number.isNaN(10);  // -> false
    Number.isNaN(1 + undefined); // -> true

  • 일치비교 연산자에서도 양의 0과 음의 0은 동일하다. JS에선 양의 0, 음의 0으로 두 가지의 0이 존재한다. 두 값 사이의 비교를 엄격하게 한다는 일치 비교 연산자 ===를 사용하여 양의 0과 음의 0을 비교한다면 당연히 두 값이 다르다는 결과가 반환되어야 할 것 같은데, 실제로는 그렇지 않다.

    // 양의 0과 음의 0의 비교. 일치 비교/동등 비교 모두 결과는 true이다.
    0 === -0; // -> true
    0 == -0;  // -> true

Object.is()

• 일치 비교 연산자도 엄격하게 비교하지 못했던 NaN, 0의 경우까지 잘 비교해주는 함수가 있다.
• 이 함수에서 NaN과 NaN은 같고, 0과 -0은 다르다. 기존의 일치비교연산자 ===가 놓친 부분까지 확실히 비교해주는 함수라고 할 수 있다.
• NaN과 0 이외의 경우에는 ===의 비교와 동일하다.
• 예시 코드

  -0 === +0;         // -> true
  Object.is(-0, +0); // -> false
  
  NaN === NaN;         // -> false
  Object.is(NaN, NaN); // -> true