JavaScript에서 두 개의 배열을 하나로 병합하고 중복 객체 제거하기

다음과 같이 두 개의 객체 배열이 있다고 가정해 보겠습니다.

const arr1 = [
   {name:'test', lastname: 'test', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'}
];
const arr2 = [
   {name:'test21', lastname: 'test21', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'},
   {name:'test22', lastname: 'test22', gender:'m'}
];

각 배열 내부에는 중복된 객체가 없지만('name' 속성 기준), 첫 번째 배열과 두 번째 배열 사이에는 동일한 name 값을 가진 객체들이 존재합니다.

따라서 우리는 이러한 두 개의 배열을 인자로 받아 새로운 배열을 반환하는 JavaScript 함수를 작성해야 합니다.

새 배열에는 두 배열에 있는 모든 고유한 객체가 포함되어야 하며, 여기서는 객체의 고유성을 판별하기 위해 각 객체의 고유한 "name" 속성을 기준으로 삼습니다.

예제

이를 구현한 코드는 다음과 같습니다.

const arr1 = [
   {name:'test', lastname: 'test', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'}
];
const arr2 = [
   {name:'test21', lastname: 'test21', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'},
   {name:'test22', lastname: 'test22', gender:'m'}
];
const mergeUniquely = (arr1 = [], arr2 = []) => {
   const newArr = arr1.concat(arr2);
   const map = {};
   const res = [];
   newArr.forEach(el => {
      if(!map[el['name']]){
         res.push(el);
         map[el['name']] = 1;
    };
   });
   return res;
};
console.log(mergeUniquely(arr1, arr2));

코드 설명

• arr1.concat(arr2) : 두 배열을 하나의 새로운 배열로 합칩니다.
• map : 이미 처리한 name 값을 추적하기 위한 임시 객체(해시 맵 역할)입니다.
• forEach : 합쳐진 배열을 순회하면서 아직 등장하지 않은 name 값만 결과 배열 res에 추가합니다.
• 이 방식은 단 한 번의 순회로 중복을 제거할 수 있어 시간 복잡도가 O(n)으로 매우 효율적입니다.

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
   { name: 'test', lastname: 'test', gender: 'f' },
   { name: 'test1', lastname: 'test1', gender: 'f' },
   { name: 'test2', lastname: 'test2', gender: 'm' },
   { name: 'test21', lastname: 'test21', gender: 'f' },
   { name: 'test22', lastname: 'test22', gender: 'm' }
]