[javascript] new set 으로 중복 제거하기

Set이란?

 

Set은 JavaScript에서 중복 없는 값들의 집합을 저장할 수 있는 구조입니다.

배열과 비슷하지만, 다음과 같은 차이점이 있습니다.

1. 중복된 값을 자동으로 제거
2. 삽입된 순서를 유지
3. 빠른 검색 (has) 가능

 

const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // Set(4) {1, 2, 3, 4}

 

관련 메서드

 

add(value)	값 추가
delete(value)	값 삭제
has(value)	포함 여부 확인
clear()	모두 삭제
size	원소 개수 반환

 

예제

const tags = new Set();

tags.add('JavaScript');
tags.add('JavaScript'); // 중복 무시
tags.add('react');

console.log(tags.has('react')); // true
console.log(tags.size);       // 2

 

 

배열 중복 제거에 활용 

const arr = ['apple', 'banana', 'apple', 'orange'];
const unique = [...new Set(arr)];
console.log(unique); // ['apple', 'banana', 'orange']

 

※ 위의 const number와는 다르게 const unique에서는 [...](전개연산자) 처리를 하는 이유는?

핵심은 Set은 배열처럼 생겼지만 배열은 아님. 즉 객체를 생성하는 것 입니다.

즉, Set → Array로 변환하는 과정이 필요.

그런데 왜 숫자 배열은 왜 잘 나오는 것처럼 보이는가?

->이 부분은 오해하기 쉬운 포인트입니다. 실제로는 잘 나오는 게 아니라, Set 객체를 그대로 콘솔에 보여주는 것뿐입니다

const uniqueNumbers = new Set([1, 2, 2, 3, 4, 4]);
console.log(uniqueNumbers);
// 결과: Set(4) {1, 2, 3, 4} ← 배열 아님!

uniqueNumbers.forEach(n => console.log(n)); // OK

uniqueNumbers[0]; // ❌ undefined

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

 

 

배열 중복 제거에 활용 - 객체형 배열일때

const users = [
  { id: 1, name: 'Tom' },
  { id: 2, name: 'Jerry' },
  { id: 1, name: 'Tom' }
];

const uniqueIds = new Set(users.map(u => u.id));
console.log([...uniqueIds]); // [1, 2]