[JavaScript] JavaScript Array.includes() 와 객체에서 구조적 동일성과 참조 동일성 문제

JavaScript Array.includes() 와 객체에서 구조적 동일성과 참조 동일성 문제

JavaScript에서 Array.prototype.includes() 메서드를 사용할 때, 객체와 원시 값(숫자, 문자열 등)을 다룰 때 어떻게 동작하는지 이해하는 것이 중요핟다.

핵심 차이: 참조 vs. 구조

원시 값의 경우, includes()는 배열의 요소 중 검색하는 값과 엄격하게 같은 (===) 요소가 있는지 확인한다.

하지만 객체의 경우, includes()는 구조적 동일성이 아닌 참조 동일성을 확인한다. 즉, 배열이 메모리에서 정확히 동일한 객체 인스턴스에 대한 참조를 포함하는지 확인하며, 단순히 동일하게 보이는 객체(즉, 동일한 속성과 값을 가진 객체)를 확인하지 않는다.

코드 예제

예제를 통해 이를 설명해 보겠다.

// includes()는 객체의 구조적 동일성이 아닌 참조 동일성을 확인한다.
const obj1 = { id: 1 };
const obj2 = { id: 2 };
const obj3 = { id: 1 }; // 구조적으로 obj1과 동일하지만 다른 참조이다.
const objects = [obj1, obj2]; // 배열은 obj1과 obj2에 대한 참조를 포함한다.

console.log("객체 배열:", objects);
// 출력: 객체 배열: [ { id: 1 }, { id: 2 } ]

// 배열이 obj1(정확히 동일한 객체 인스턴스)을 포함하는지 확인한다.
console.log("배열이 obj1을 포함합니까?", objects.includes(obj1));
// 출력: 배열이 obj1을 포함합니까? true (정확함: 동일한 참조이다)

// 배열이 obj3(obj1과 같아 보이지만 다른 객체)을 포함하는지 확인한다.
console.log("배열이 obj3을 포함합니까?", objects.includes(obj3));
// 출력: 배열이 obj3을 포함합니까? false (정확함: 구조는 같지만 다른 참조이다)

// 배열이 obj1과 같이 보이는 새로 생성된 객체를 포함하는지 확인합니다.
console.log("배열이 { id: 1 }을 포함합니까?", objects.includes({ id: 1 }));
// 출력: 배열이 { id: 1 }을 포함합니까? false (정확함: 새로운 객체 리터럴은 새로운 참조를 생성한다)

결론

includes()는 배열에 원시 값이 있는지 확인하는 데 유용하다. 객체 배열을 다룰 때, 특정 참조가 아닌 속성(구조적 동일성)을 기반으로 객체를 찾아야 하는 경우, find() 또는 findIndex()와 같은 메서드를 사용자 정의 비교 함수와 함께 사용해야 한다.

// find()를 사용하여 구조적 검사를 수행하는 예제
const foundById1 = objects.find((obj) => obj.id === 1);
console.log("find()를 사용하여 id가 1인 객체를 찾았습니까?", !!foundById1); // true