1. Problem
JavaScript/JS 를 사용하면서 배열(array)의 중복 값/요소를 제거 해야하는 경우가 있습니다. 효율적이고 빠르게 배열의 중복되는 값들을 제거하는 방법은 무엇일까요? 아래의 방법들 중 가장 자신에게 편리한 방법을 사용하시는 것을 권장드립니다!
2. Solution
2.1. Set을 이용한 방법
const arr = [1, 2, 2, 3, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
Set 은 중복을 제거해주는 객체입니다. 위와 같은 방식으로 손쉽게 배열을 넣은 후에, 구조분해할당을 통하여 중복이 없는 배열을 만들 수 있습니다. 속도도 가장 빠른 것으로 인지하고 있습니다.
2.2. filter()와 indexOf()를 이용한 방법
const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
filter 함수를 이용하여 모든 요소를 확인하면서 indexOf 로 자신의 index 와 같은지 확인합니다. indexOf 는 가장 앞에 있는 값을 알려주는데, 자신의 index 와 다른 경우는 중복되는 값이 있는 케이스이기 때문에 filter 에서 제거됩니다.
2.3. reduce()를 이용한 방법
const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = arr.reduce((acc, value) => acc.includes(value) ? acc : [...acc, value], []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
reduce 함수를 이용하는 방법입니다. includes로 해당 원소가 포함되어 있는지 체크하면서 있으면 추가하지 않고, 없으면 추가하는 방식으로 진행합니다.
2.4. Map 객체를 이용하는 방법
const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = Array.from(new Map(arr.map(item => [item, item])).values());
console.log(uniqueArr); // [1, 2, 3, 4, 5]
위 방법은 배열의 각 요소를 Map 객체의 key와 value로 변환한 후, Map 객체의 values() 메서드를 이용하여 중복을 제거합니다. 마지막으로, Array.from() 메서드를 이용하여 Map 객체의 값들로 이루어진 배열을 생성합니다.
문제 해결에 도움이 되셨으면 좋겠습니다! 읽어주셔서 감사합니다!