JavaScript - 배열에서 중복 제거, 4가지 방법

자바스크립트의 배열에서 중복 요소를 제거하는 방법을 소개합니다.

1. Set를 이용하여 중복 제거

Set는 중복 데이터 저장을 허용하지 않는 자료구조입니다. 이 특성을 이용하여 배열의 모든 요소를 Set에 추가하면 중복이 저절로 제거가 됩니다. new Set(arr)는 배열의 데이터가 추가된 Set 객체가 생성되며, 중복은 허용되지 않기 때문에 1개의 요소만 추가됩니다. Set를 Array로 변경할 때는 Spread operator를 이용하면 [...set]처럼 간단하게 변환할 수 있습니다.

const arr = ['A', 'B', 'C', 'A', 'B'];

const set = new Set(arr);
const newArr = [...set];
console.log(newArr)

Output:

[ 'A', 'B', 'C' ]

Set를 Array로 변환할 때 아래와 같이 Array.from()을 이용할 수도 있습니다.

const arr = ['A', 'B', 'C', 'A', 'B'];
const newArr = Array.from(new Set(arr));
console.log(newArr)

2. filter(), indexOf()를 이용하여 중복 제거

filter()와 indexOf()를 사용하여 중복을 제거할 수도 있습니다. indexOf(element)는 배열에서 요소의 Index를 리턴하는데, 중복된 값이 있을 때 낮은 Index를 리턴합니다. 따라서 indexOf(element) === index가 true가 되는 경우는 하나 뿐이고, 다른 중복된 값은 false가 리턴되여 filter()에 의해 필터링됩니다. 참고로, filter(lambda)는 lambda가 true일 때 그 요소를 결과에 포함시킵니다.

const arr = ['A', 'B', 'C', 'A', 'B'];

const newArr = arr.filter((element, index) => arr.indexOf(element) === index);
console.log(newArr);

Output:

[ 'A', 'B', 'C' ]

3. reduce()를 이용하여 중복 제거

reduce()는 배열 요소의 값들을 순차적으로 순회하면서 하나의 값을 만드는 함수입니다. 초기값 initialValue가 주어지면, 배열의 0번 index부터 연산을 수행하고, 그 결과를 다음 연산의 인자(accumulator)로 전달합니다.

아래 예제는 reduce()로 중복을 제거하는 방법인데 accumulator에 추가 안된 요소라면 추가하고, 그렇지 않으면 추가하지 않습니다. 이것을 첫번째 요소부터 마지막 요소까지 순회하면서 수행합니다.

const arr = ['A', 'B', 'C', 'A', 'B'];

const initialValue = []
const newArr = arr.reduce((acc, obj) => acc.includes(obj) ? acc : [...acc, obj], initialValue)
console.log(newArr)

Output:

[ 'A', 'B', 'C' ]

4. for 루프를 이용하여 중복 제거

반복문을 사용하여 모든 요소를 순회하고 중복된 값은 제거하도록 직접 구현할 수 있습니다. 아래 예제는 forEach를 사용하여 구현하였습니다.

const arr = ['A', 'B', 'C', 'A', 'B'];

const newArr = [];
arr.forEach((element) => {
  if (!newArr.includes(element)) {
    newArr.push(element);
  }
});
console.log(newArr);

Output:

[ 'A', 'B', 'C' ]

References

• Mozilla - Array.reduce()
• Mozilla - Array.filter()