책정리/모던 리액트 Deep Dive

자바스크립트의 동등 비교 (==, ===, Object.is)

뽀글보리 2024. 2. 12. 20:53
반응형

==와 ===의 차이

JavaScript에서 =====는 두 값의 동등성을 비교하는 데 사용되는 연산자입니다. 하지만 이 둘은 다른 방식으로 동작합니다.

  1. == (동등 연산자):
    • ==는 값의 동등성을 비교합니다. 하지만 엄격한(strict) 동등성이 아니라 변환된 동등성을 비교합니다. 이것은 필요에 따라 다른 데이터 타입을 변환하여 비교를 수행합니다.
    • 예를 들어, 0 == falsetrue를 반환합니다. 이는 JavaScript가 숫자 0을 불리언 false로 변환하여 비교하기 때문입니다.
  2. === (일치 연산자):
    • ===는 값의 엄격한(strict) 동등성을 비교합니다. 이것은 값뿐만 아니라 데이터 타입까지 고려하여 비교를 수행합니다.
    • 예를 들어, 0 === falsefalse를 반환합니다. 이는 JavaScript가 값과 데이터 타입이 모두 같은지 확인하기 때문입니다.
    • ===는 일반적으로 예기치 않은 형변환으로 인한 오류를 방지하는 데 더 유용합니다.
console.log(0 == false);   // true, 0을 false로 변환하여 비교
console.log(0 === false);  // false, 값과 타입이 다르므로 false

console.log(1 == "1");     // true, 문자열 "1"을 숫자 1로 변환하여 비교
console.log(1 === "1");    // false, 값은 같지만 타입이 다르므로 false

console.log(null == undefined);   // true, null과 undefined는 변환 없이 동등함
console.log(null === undefined);  // false, 값은 같지만 타입이 다르므로 false

console.log(true == "true");     // false, 불리언과 문자열은 일치하지 않음
console.log(true === "true");    // false, 값은 같지만 타입이 다르므로 false

===와 Object.is의 차이

JavaScript의 Object.is() 메서드는 ES6에서 제공하는 기능이며, 이 메서드는 메서드는 ===와 비슷하게 동작하지만, 몇 가지 차이점이 있습니다.

// 예시 1: NaN의 비교
console.log(NaN === NaN);  // false
console.log(Object.is(NaN, NaN));  // true

// 예시 2: 0과 -0의 비교
console.log(0 === -0);  // true
console.log(Object.is(0, -0));  // false

// 예시 3: -0과 -0의 비교
console.log(-0 === -0);  // true
console.log(Object.is(-0, -0));  // true
  1. 첫 번째 예시에서, NaN은 자신과 일치하지 않는 유일한 값이므로, NaN === NaNfalse가 됩니다. 그러나 Object.is(NaN, NaN)true를 반환합니다.
  2. 두 번째 예시에서, 0-0은 일반적으로 동등하게 처리되지만, -0 === -0true를 반환합니다. 그러나 Object.is(0, -0)false를 반환합니다. -00은 다른 값으로 간주됩니다.
  3. 마지막 예시에서, -0 === -0true를 반환합니다. Object.is(-0, -0)true를 반환합니다.

Object.is() 메서드를 사용하면 JavaScript에서 값의 동등성을 더 정확하게 확인할 수 있습니다.

반응형