[JavaScript] 자바스크립트에서의 객체 비교 방법 (=== vs ==)

개요

---

자바스크립트를 사용하다 보면 객체를 비교하는 상황을 자주 마주하게 된다. 그때마다 ===와 ==를 사용하면서 혼란스러울 때가 많았다. 겉보기에는 똑같아 보이지만 두 연산자의 작동 방식이 다르기 때문이다. 특히 객체 비교에서 이 차이는 더욱 두드러지게 나타난다. 그래서 이 개념을 정리하고, 다른 개발자들과 공유하고자 한다.

 

===와 ==의 차이점

---

자바스크립트에서 ==는 느슨한 동등 비교, ===는 엄격한 동등 비교라고 부른다. 차이점은 ==는 비교할 때 데이터 타입을 자동으로 변환해 동등 여부를 판단하지만, ===는 타입 변환 없이 값과 타입이 모두 일치해야 true를 반환한다.

console.log(2 == '2');  // true, 타입 변환 발생
console.log(2 === '2'); // false, 타입이 다름

 

위 코드를 보면 ==는 숫자와 문자열을 비교할 때 타입을 변환해 같은 값으로 간주하지만, ===는 데이터 타입까지 고려하기 때문에 false를 반환한다.

 

객체 비교 시 주의할 점

---

객체를 비교할 때는 ==나 === 모두 기본값 비교가 아니라 참조를 비교한다. 즉, 두 객체가 메모리 상에서 동일한 참조를 가리키는지를 확인하는 것이다. 따라서 두 객체가 동일한 속성과 값을 가지고 있더라도, 별개의 객체라면 ==나 ===는 false를 반환한다.

const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };

console.log(obj1 == obj2);  // false
console.log(obj1 === obj2); // false

 

위 예제에서 obj1과 obj2는 동일한 속성을 가지고 있지만 서로 다른 객체이기 때문에, 두 연산자 모두 false를 반환한다.

 

실제 코드 예시

---

객체 비교에서 참조가 아닌 값을 비교하려면, 객체의 속성을 직접 비교하는 방법을 사용해야 한다. 자바스크립트에서는 이 작업을 쉽게 하기 위해 JSON.stringify()를 사용할 수 있다. 이 함수는 객체를 문자열로 변환하여 객체의 속성 값 비교를 가능하게 한다.

const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2));  // true

 

위 코드는 객체의 속성 값이 같다면 true를 반환하게 된다. 그러나 이 방법은 순서가 다르거나 중첩된 객체 구조에서는 다르게 동작할 수 있으므로 주의해야 한다.

 

정리

---

자바스크립트에서 ===와 ==는 서로 다른 용도로 사용되며, 특히 객체 비교 시 주의가 필요하다. 객체는 값이 아닌 참조를 비교하기 때문에, 값을 비교하고 싶다면 적절한 방법을 사용해야 한다. 결국, 언제 ===를 쓰고 언제 ==를 써야 하는지 명확히 알고 상황에 맞게 사용해야 불필요한 버그를 피할 수 있다.