두 배열을 합치면서 중복 요소는 모두 제거하는 방법에 대해서 알아보겠습니다.

배열을 합치면 중복 요소들도 함께 포함되는데, 합친 이후에 중복 값을 따로 제거해야 합니다. 두 배열을 합치는 방법에 대해서 먼저 알아보고, 그 이후에 중복 값을 제거하는 방법을 알아보겠습니다.

1. 두 배열을 합치는 방법 (중복 값 제거 안됨)

concat(), 전개 연산자와 push를 사용하여 두 배열을 합칠 수 있습니다.

  • a.concat(b) : a 배열과 b 배열의 모든 요소를 하나의 배열로 합치고 배열 리턴
  • [...array1, ...array2] : array1과 array2의 모든 요소들을 새로운 배열에 추가
  • mergedArray.push(...array1) : mergedArray 배열에 array1의 모든 요소 값을 추가
const array1 = [1, 2, 3];
const array2 = [2, 3, 4];

// 1. concat()으로 합치기
let mergedArray = array1.concat(array2);
console.log(mergedArray); // [ 1, 2, 3, 2, 3, 4 ]

// 2. 전개 연산자로 합치기
let mergedArray2 = [...array1, ...array2];
console.log(mergedArray2); // [ 1, 2, 3, 2, 3, 4 ]

// 3. push와 전개 연산자로 합치기
let mergedArray3 = [];
mergedArray3.push(...array1);
mergedArray3.push(...array2);
console.log(mergedArray3); // [ 1, 2, 3, 2, 3, 4 ]

Output:

[ 1, 2, 3, 2, 3, 4 ]
[ 1, 2, 3, 2, 3, 4 ]
[ 1, 2, 3, 2, 3, 4 ]

2. Set로 배열 합치면서 중복 제거

Set는 중복 요소를 허용하지 않는 자료구조입니다. 배열의 모든 요소를 Set로 변환하고, 다시 Set를 배열로 변환하면 중복이 제거됩니다.

  • new Set([...array1, ...array2]) : Spread operator(전개 연산자)를 사용하여 두 배열의 요소를 합치고, Set로 변환
  • [...new Set()] : 전개 연산자로, Set를 배열로 변환
const array1 = [1, 2, 3];
const array2 = [2, 3, 4];

const mergedArray = [...new Set([...array1, ...array2])];
console.log(mergedArray); // [1, 2, 3, 4]

Output:

[ 1, 2, 3, 4 ]

3. filter()로 배열 합치면서 중복 제거

arr1.concat(arr2)으로 두 배열을 하나로 합칠 수 있습니다. 합친 배열에는 중복 값들이 포함되는데, filter()로 제거할 수 있습니다.

  • 모든 배열 값에대해서 filter()의 함수를 수행하고, 리턴 값이 true인 요소들만 모아서 배열로 리턴
  • self.indexOf(item) === index : indexOf(item)는 배열 왼쪽부터 item을 찾고 인덱스 리턴, 현재 index와 같으면 그 값은 배열에 1개만 있거나 가장 먼저 발견한 값이라는 의미, 중복된 값은 false가 리턴되어 리턴 값에 포함 안됨
const array1 = [1, 2, 3];
const array2 = [2, 3, 4];

// 두 배열 합치기
let mergedArray = array1.concat(array2);
console.log(mergedArray); // [ 1, 2, 3, 2, 3, 4 ]

// 중복 제거
mergedArray = mergedArray.filter(
  (item, index, self) => self.indexOf(item) === index
);
console.log(mergedArray); // [1, 2, 3, 4]

Output:

[ 1, 2, 3, 2, 3, 4 ]
[ 1, 2, 3, 4 ]

4. reduce()로 배열 합치면서 중복 제거

concat()으로 두 배열을 합치고, reduce()로 중복 값을 제거할 수 있습니다. reduce()는 여러 값들을 하나의 값으로 만들 때 사용하는데, 아래와 같이 모든 요소를 순회하면서 중복되지 않은 값들만 배열에 저장하여 리턴할 수 있습니다.

const array1 = [1, 2, 3];
const array2 = [2, 3, 4];

// 두 배열 합치기
let mergedArray = array1.concat(array2);
console.log(mergedArray); // [ 1, 2, 3, 2, 3, 4 ]

// 중복 제거
mergedArray = mergedArray.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(mergedArray); // [ 1, 2, 3, 4 ]

Output:

[ 1, 2, 3, 2, 3, 4 ]
[ 1, 2, 3, 4 ]