서로 다른 객체 배열 내 중복 객체 구하기

서로 다른 객체 배열이 있을 때 두 객체 배열에 공통적으로 들어있는 객체 요소를 찾아내는 방법에 대해 설명합니다.

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

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

위와 같이 배열 enterprise와 yorktown에는 객체(Object)들이 들어있습니다. yorktown에 존재하는 객체 중 enterprise에도 동일하게 들어있는 객체를 찾고자 한다면 어떻게 해야 할까요?

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

그러니, 꼼수를 사용해봅시다

let yorktownStr = JSON.stringify(yorktown);
let dupObject = enterprise.filter(crew => {
    return yorktownStr.includes(JSON.stringify(crew))
});

console.log(dupObject);

1. JSON.stringify()를 이용해 yorktown 배열을 문자열로 바꿉니다.
2. enterprise 배열의 요소들을 filter로 하나씩 접근합니다.
3. 문자열로 변경한 yorktown 배열에 문자열로 변경한 enterprise 배열의 요소가 포함되어 있다면 (includes()) return합니다. 만약 includes를 사용하지 못하는 환경이라면 indexOf를 사용해도 됩니다.

이렇게 작성하면 dupObject에는 filter의 조건으로 걸러진 [ { name: 'SULU', species: 'Human' } ]가 담기게 됩니다. 우리가 원하는 값을 얻었지만 이 방법은 객체 내 key:value 쌍의 순서가 같다는 전제 하에만 사용할 수 있습니다. 만약 enterprise에 들어있는 객체는 { name: 'SULU', species: 'Human' }인데 yorktown에 들어있는 객체가 { species: 'Human', name: 'SULU' }라면 다른 객체로 판단하기 때문입니다.

만약 key:value 쌍의 순서가 다른 경우에도 비교하여 알아내고 싶다면 다음과 같이 조금 더 복잡한 로직을 사용해야 합니다.

let dupObject = enterprise.filter((crew) => {
    let entKey = Object.keys(crew); // crew의 key들
    let filtered = yorktown.filter(people => {
        let isSame = true;
        let yorkKey = Object.keys(people); // people의 key들

        if (entKey.length !== yorkKey.length) { // key들이 길이가 다르면 다른 Object
            isSame = false;
        } else {
            yorkKey.forEach(key => {
                if (crew[key] !== people[key]) {
                    isSame = false;
                }
            });
        }
        return isSame;
    });

    return filtered.length > 0;
});

console.log(dupObject);

1. enterprise를 filter로 접근하며 현재 요소(crew) 객체의 key들을 구합니다.
2. yorktown을 filter로 접근하며 현재 요소(people) 객체의 key들을 구합니다.
3. 만약 enterprise의 key들과 yorktown의 key들의 길이가 같지 않으면 다른 객체라고 판단하고 isSame에 false를 저장합니다.
4. 만약 enterprise의 key들과 yorktown의 key들의 길이가 같다면 기준 Object인 yorktown의 요소 people의 key를 하나씩 돌며 crew[key]와 people[key]의 값이 같은지 비교합니다.
5. boolean인 isSame값을 return해 1차적으로 걸러진 filtered 배열을 구합니다.
6. filtered.length > 0의 return해 최종 결과를 dupObject에 저장합니다.

위의 구문을 사용하게 되면 { name: 'SULU', species: 'Human' }와 { species: 'Human', name: 'SULU' } 같은 객체로 판단하게 됩니다.

 

---

오류 수정, 더 좋은 방법 제안은 언제든 환영합니다! 🙌