자바스크립트에서 배열을 다룰 때 중복된 요소를 제거하는 것은 필수적인 작업 중 하나입니다. 특히 데이터 정제나 필터링 과정에서 배열 중복 제거는 코드의 성능과 가독성을 높이는 중요한 과정입니다. 이번 글에서는 효율적인 배열 중복 제거 방법을 정리해 보겠습니다.

1. Set을 이용한 배열 중복 제거 (가장 간단한 방법)
자바스크립트의 Set 객체는 고유한 값만 저장하는 자료구조이므로, 배열을 Set으로 변환했다가 다시 배열로 바꾸면 배열 중복 제거가 가능합니다.
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
✅ 장점: 가장 간단하고 빠른 방법
❌ 단점: 객체 배열 등의 중복 제거에는 직접 사용하기 어려움
2. filter()와 indexOf()를 이용한 배열 중복 제거
filter()와 indexOf()를 활용하면 배열을 순회하면서 첫 번째로 등장하는 요소만 남겨서 배열 중복 제거가 가능합니다.
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
✅ 장점: ES6 이전에도 사용할 수 있는 범용적인 방법
❌ 단점: 성능이 Set보다 떨어질 수 있음 (특히 큰 배열에서)
3. reduce()를 이용한 배열 중복 제거
reduce()를 활용하면 배열을 순회하며 고유한 요소만 누적하여 새로운 배열을 만들 수 있습니다.
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, item) => {
if (!acc.includes(item)) acc.push(item);
return acc;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
✅ 장점: filter()보다 비교 연산을 줄여 성능이 약간 더 나을 수 있음
❌ 단점: 여전히 Set보다 느릴 수 있음
4. 객체를 활용한 배열 중복 제거 (객체 배열에 유용)
객체 배열에서 특정 속성을 기준으로 배열 중복 제거하려면 Map을 활용하는 것이 좋습니다.
const array = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 1, name: "Alice" },
];
const uniqueArray = [...new Map(array.map(item => [item.id, item])).values()];
console.log(uniqueArray);
// [
// { id: 1, name: "Alice" },
// { id: 2, name: "Bob" }
// ]
✅ 장점: 객체 배열에서도 특정 속성을 기준으로 중복을 제거할 수 있음
❌ 단점: 특정 속성을 기준으로 하기 때문에 모든 속성을 비교하는 방식은 아님
성능 비교: 어떤 방법이 가장 빠를까?
일반적으로 배열 중복 제거 방법 중에서 가장 빠른 것은 Set을 이용하는 방법입니다.
하지만 데이터 구조에 따라 적절한 방법을 선택하는 것이 중요합니다.
- 빠른 방법: Set (기본 자료형 배열에서 가장 효율적)
- 유연한 방법: filter() + indexOf(), reduce()
- 객체 배열 처리: Map 활용
자바스크립트에서 배열 중복 제거는 다양한 방법으로 구현할 수 있으며, 상황에 따라 적절한 방법을 선택해야 합니다.
- 기본 자료형 배열에서는 Set을 이용한 방식이 가장 간단하고 빠릅니다.
- 이전 버전의 자바스크립트에서도 사용하려면 filter() 또는 reduce()를 활용할 수 있습니다.
- 객체 배열의 경우 Map을 이용하면 특정 속성을 기준으로 배열 중복 제거가 가능합니다.
코드 작성 시 성능과 가독성을 고려하여 가장 적절한 방법을 선택하세요!
'코드 정리 > Javascript' 카테고리의 다른 글
API 호출 최적화를 위한 디바운스(Debounce) 함수 활용법 (0) | 2025.03.20 |
---|---|
자바스크립트 정규식과 유효성 검사: 핵심 개념 정리 (0) | 2025.03.19 |
[자바스크립트 14일 완전정복] 14일차 - 미니 프로젝트 (할 일 목록 앱 만들기) (0) | 2025.03.16 |
[자바스크립트 14일 완전정복] 13일차 - 테스트와 디버깅 (0) | 2025.03.15 |
[자바스크립트 14일 완전정복] 12일차 - 객체 지향 프로그래밍(OOP) 기초 (0) | 2025.03.14 |