[...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법

AI 생성 이미지: [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법

JavaScript로 배열을 다룰 때는 중복 요소를 제거해야 할 일이 흔히 생깁니다. API 응답이나 폼 입력, 로그 데이터 같은 곳에서 동일한 값이 반복되면 집계나 렌더링 로직에 오류가 발생할 수 있습니다. 실무에서는 [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법을 우선적으로 고려하는 경우가 많습니다.

이 글에서는 Set을 사용하는 간단한 패턴과 filter()와 indexOf를 조합한 패턴을 중심으로, 각각의 동작 원리와 장단점을 실무 관점에서 정리합니다.

1. Set을 활용한 배열 중복 제거

Set은 중복을 허용하지 않는 컬렉션입니다. 배열을 Set으로 바꾸면 중복 항목이 즉시 제거됩니다. 그런 다음 다시 배열로 변환하면 중복이 제거된 새로운 배열을 얻습니다. 간단하고 성능도 합리적입니다. 사실 [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법은 바로 이 흐름을 말합니다.

1-1. 기본 예제

const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]
    

위 예제는 new Set(arr)로 중복을 제거하고, 전개 연산자 ...로 다시 배열로 풀어냅니다. 결과적으로 uniqueArr에는 중복이 제거된 값만 남습니다. 코드가 매우 직관적이라 유지보수가 쉽습니다.

TIP: 이 방법은 숫자나 문자열 같은 원시 값 배열의 중복 제거에 특히 효율적합니다. 객체 배열에서는 참조(identity) 기준으로 판단하므로 의도한 결과와 다를 수 있습니다.

1-2. [...new Set(arr)] 동작 방식 이해하기

• new Set(arr) → 배열의 요소를 Set으로 옮겨 중복을 제거합니다.
• [...set] → 전개 연산자로 Set의 요소를 다시 배열 리터럴로 펼칩니다.

결국 [...new Set(arr)]는 배열을 Set으로 변환해 중복을 제거한 뒤 다시 배열로 복원하는 간결한 패턴입니다.

2. filter()와 indexOf를 활용한 배열 중복 제거

filter()는 각 요소를 순회하며 조건을 만족하는 항목만 추려 새로운 배열을 만듭니다. 여기에 indexOf()를 조합하면 “처음 등장한 항목만 남기기” 방식으로 중복을 제거할 수 있습니다. 약간의 코드가 더 필요하지만, 커스터마이징이 용이하다는 장점이 있습니다.

2-1. 기본 예제

const arr = [1, 2, 3, 3, 4, 5, 5];

const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});

console.log(uniqueArr); // [1, 2, 3, 4, 5]
    

2-2. 동작 설명

• filter()는 콜백이 true인 요소만 결과 배열에 남깁니다.
• 콜백의 세 번째 인자 self는 원본 배열을 참조합니다.
• self.indexOf(value)는 해당 값이 처음 등장하는 인덱스를 반환합니다.
• 현재 인덱스 index와 같을 때만 통과시키면, 이후에 중복된 값은 걸러집니다.

참고: 이 방식은 Set보다 표현이 길지만, 값 비교 기준을 바꾸거나 추가 조건을 넣어 복잡한 필터링을 구현할 때 유용합니다.

3. Set vs filter – 어떤 방식을 써야 할까?

방법	장점	단점 / 주의점
[...new Set(arr)]	코드가 매우 간결하고 가독성이 좋습니다. 원시 타입 배열의 중복 제거에 적합합니다.	객체나 배열 같은 참조 타입은 참조(identity) 기준으로 판단합니다. 매우 오래된 환경에서는 Set을 지원하지 않을 수 있으니 폴리필을 고려해야 합니다.
filter() + indexOf()	로직을 명확하게 제어할 수 있고, 조건을 추가하기 쉽습니다. 특정 기준(예: 속성값 비교)으로 중복을 판단할 때 유리합니다.	Set에 비해 표현이 길고, 배열 길이가 매우 길면 성능상 비용이 커질 수 있습니다. 복잡한 비교 로직을 직접 구현해야 할 수도 있습니다.

현대 브라우저나 Node 환경에서는 보통 가독성과 간결함 때문에 Set 방식을 먼저 고려합니다. 다만 상황에 따라 [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법이 항상 최선은 아닙니다. 오래된 환경 지원이나 복합 조건이 필요하면 filter() 기반 방식이 더 적절할 수 있습니다.

4. 마무리 정리

• Set은 중복을 허용하지 않는 구조이므로 배열 중복 제거에 직관적입니다.
• [...new Set(arr)] 패턴은 배열을 Set으로 바꿔 중복을 제거하고 다시 배열로 복원하는 간단한 방법입니다.
• filter() + indexOf()는 “처음 등장한 인덱스만 남기기”로 동작하며, 조건을 더해 유연하게 활용할 수 있습니다.
• 프로젝트의 브라우저 지원 범위, 데이터 타입(원시/참조), 성능 요구사항을 고려해 적절한 방법을 선택하세요.

실무에서는 우선 [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법을 시도해 보고, 필요하면 filter() 기반으로 맞춤형 로직을 적용하는 흐름이 효율적입니다. [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법을 기억해 두면 빠르게 문제를 해결할 수 있습니다.

함께 보면 좋은 엔터프라이즈 사례

• 데이터 플랫폼 품질검증과 실시간 파이프라인 최적화 핵심 전략
• SRE 관점에서의 SLA 예측과 자동복구 회로설계 실전 가이드
• 비용 최적화: 클라우드 스팟·권한 기반 자동스케일링 실전 절감법

🚀 이 주제, 우리 서비스에 어떻게 적용할까요?

[...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법를 실제 서비스와 조직에 녹여보고 싶다면, 현재 아키텍처와 운영 방식을 한 번 점검해 보는 것부터 시작해 보세요. 팀 위키나 기술 블로그, 사내 스터디 주제로도 아주 좋습니다.

이 글이 도움이 됐다면, 비슷한 엔터프라이즈 사례 글들도 함께 살펴보면서 우리 조직에 맞는 운영 상용구를 정의해 보세요.

AI 생성 이미지: [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법