[Javascript] 배열 중복 값 제거

두개의 배열을 하나의 배열로 합칠 때, 중복 값을 제거하는 방법에 대해서 알아보겠습니다.

 

예를 들어, 두개의 배열에 존재하는 모든 값들을 확인하여 어떤 처리를 해야하는 경우가 있을 수 있습니다. 이럴 때 하나의 배열로 합쳐서 for문으로 모든 요소를 순회하면서 처리하면 되는데, 중복 값들이 포함될 수 있습니다. 따라서, 하나의 배열로 합칠 때 중복을 제거하여 합치면 중복 값에 대해서 처리하지 않아도 됩니다.

 

Set로 배열 중복 제거

Set는 중복을 허용하지 않는 자료구조입니다. 따라서 Set에 값들을 추가하면 중복 값들은 추가가 되지 않습니다. 이것을 이용하여 두 배열의 중복 값을 쉽게 제거할 수 있습니다.

 

아이디어는 다음과 같습니다.

• Set에 두 배열의 모든 값을 추가
• Set를 배열로 변환

 

그리고, 아래와 같이 구현할 수 있습니다. 

• new Set(array])는 배열 array의 모든 값을 갖고 있는 Set를 생성
• [...arr1, ...arr2]는 배열 arr1과 arr2가 합쳐진 하나의 배열을 생성 (중복 값 있음)
• 중복 값들이 있는 배열로 Set를 생성하면서, 중복 값들이 제거됨
• [...new Set()]로 Set를 다시 배열로 변환

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [4, 5, 6, 7, 8];

const mergedArray = [...new Set([...arr1, ...arr2])];
console.log(mergedArray);

Output:

[ 1, 2, 3, 4, 5, 6, 7, 8 ]

 

filter()로 배열 중복 제거

먼저 두 배열을 하나의 배열로 합치며, 배열에 중복 값도 모두 포함시킵니다. 그 뒤에 filter()를 이용하여 중복 값을 제거할 수 있습니다.

 

아래와 같이 구현할 수 있습니다.

• arr1.concat(arr2)는 arr1에 arr2의 모든 값을 추가 (중복 값도 추가됨)
• mergedArray.filter(...) : 배열의 모든 값을 filter()를 통해 순회하면서, filter()의 리턴 값이 true인 것만 배열에 포함시킴 (indexOf(item)으로 item의 Index를 찾았을 때 순회 중인 index와 일치하면 중복 값이 아니고 처음 발견한 값이라는 의미)

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [4, 5, 6, 7, 8];

let mergedArray = arr1.concat(arr2);

mergedArray = mergedArray.filter(
  (item, index, self) => self.indexOf(item) === index
);
console.log(mergedArray);

Output:

[ 1, 2, 3, 4, 5, 6, 7, 8 ]