JavaScript 객체 배열 내 객체 비교

서로 다른 객체 배열 안 같은 객체들을 찾아낼 수 있을까?

var enterprise = [
  {
    name: 'SULU',
    species: 'Human'
  },
  {
    name: 'KIRK',
    species: 'Human'
   }
];

var yorktown = [
  {
    name: 'BEN',
    species: 'Human'
  },
  {
    name: 'DEMORA',
    species: 'Human'
  },
  {
    name: 'SULU',
    species: 'Human'
  }
];

배열 enterprise와 yorktown에 객체가 들어있습니다. enterprise에도 존재하는 yorktown의 객체를 찾아내려면 어떻게 해야할까요?

JavaScript의 Object는 참조에 의해 할당되고 복사되기 때문에 ==, ===, Object.is() 를 사용하여 같은 값을 지닌 객체인지 비교할 수 없습니다. ==, ===, Object.is()를 사용해 enterprise와 yorktown을 비교하면 안에 들어있는 객체 자체가 아닌 각각의 변수들이 저장하고 있는 객체의 참조를 비교하기 때문에 같은 값의 객체가 있어도 false를 리턴합니다. 따라서 중첩된 for문이나 filter, reduce 등을 사용할 수 없습니다.

그래서 꼼수를 찾아냈죠! 🤫

for(var i=0; i<enterprise.length; i++){
  if(JSON.stringify(yorktown).includes(JSON.stringify(enterprise[i]))){
    console.log(enterprise[i]);
  }
}

JSON.stringify()로 yorktown 배열 전체와 for문을 돌며 인덱스 순서대로 만나는 enterprise[i]를 문자열로 바꿉니다. 그런 다음 문자열 yorktown에 문자열 enterprise[i]가 포함되어있는지 includes()로 확인하면 되는 것이죠! 혹시 includes()를 사용하지 못하는 IE 등의 환경에서는 indexOf()를 사용하면 됩니다.
단, 이 방법은 객체 내 요소들의 순서, key와 value가 모두 같다는 전제 하에 사용할 수 있습니다

 

분명 더 좋은 방법이 있을테지만 제가 찾아낸 가장 간단한 방법은 이 방법이었습니다! 혹시 오류나 더 좋은 방법이 있다면 댓글로 알려주세요! :D