JS 자바스크립트 값 비교 시 주의사항 (비교연산자 == 와 === 차이 등)

 

== 와 === 차이

== 는 타입을 일치 시킨 뒤 값을 비교를 하는데 문자열 과 숫자 간 비교 시에 문자열을 숫자로 변환한 뒤 비교
=== 는 값과 타입, 전부 일치 하는지 비교

console.log(7 == "7"); // true
console.log(7 === "7"); // false

 

 

부동 소수점의 비교

자바스크립트의 부동 소수점 연산의 한계로 아래 예시와 같은 경우가 발생하는데

let num1 = 0.1 + 0.2;  (를 출력해보면 0.3이 아닌 0.30000000000000004 와 같이 예상과 다른 값이 출력 됨)
let num2 = 0.3;

console.log(num1 === num2); // false

오차 범위를 지정하고 절대값을 추출해서 비교 하는 함수 형태로 만들어서 비교를 해야 하며

이와 같은 방법도 완벽한 정확도를 보장하기 어렵기 때문에 필요한 상황에 맞게 오차 범위를 설정하여 사용해야 함

function isEqual(num1, num2, diifRange) {
   return Math.abs(num1 - num2) <= diifRange;
   // 절대값 끼리의 차이를 구한 뒤 오차범위와 비교하여 그 결과를 반환
}

let value1 = 0.1 + 0.2;
let value2 = 0.3;
let diifRange = 0.0001; // 오차범위

console.log(isEqual(value1, value2, diifRange)); // true

 

 

객체비교
객체는 참조 타입으로, 변수에 할당될 때 값이 아닌 객체의 메모리 주소를 참조하는데, 그래서 두 객체를 비교할 때는 객체 자체를 비교하지 않고, 각 객체의 프로퍼티 끼리 비교하거나 객체를 JSON.stringify() 를 이용해 문자열화 한뒤 문자열 끼리 비교를 해야하는데, 주의할 점은 문자열 끼리의 값 비교이기 때문에 객체의 프로퍼티의 순서가 각기 다를 경우 false가 발생함

// 각 프로퍼티 끼리 값 비교

let obj1 = { name: "Paul", age: 21 };
let obj2 = { name: "Paul", age: 21 };

function objCompare(obj1, obj2) {
  return obj1.name === obj2.name && obj1.age === obj2.age;
}

console.log(objCompare(obj1, obj2)); // true



// 문자열화 한 뒤 비교

let obj1 = { name: "Paul", age: 21 };
let obj2 = { name: "Paul", age: 21 };

let str1 = JSON.stringify(obj1);
let str2 = JSON.stringify(obj2);

console.log(str1 === str2); // true


let obj1 = { name: "Paul", age: 21 };
let obj2 = { age: 21, name: "Paul" };

let str1 = JSON.stringify(obj1);
let str2 = JSON.stringify(obj2);

console.log(str1 === str2); // false , 객체 끼리의 프로퍼티의 순서가 다를 경우 비교 X

 

 

null과 undefined 의 비교
null과 undefined는 == 를 사용하여 비교할 때  true를 반환
=== 를 사용하면 타입까지 비교하기 때문에 false를 반환

 

 

NaN("Not a Number") 비교
NaN은 특수한 값으로, 숫자 연산중 계산되지 않는 결과가 있는 경우(0으로 나누기, 숫자형식이 아닌 문자를 숫자로 변환 하려고 할 때 등) 발생하는데 NaN 끼리 서로 비교(NaN === NaN) 해도 false 가 나와 비교 불가하여 isNaN() 함수를 사용하거나 Number.isNaN() 메서드를 사용해서 체크해야 함