JavaScript 집합 (Set)

1. 집합(Set)이란?

Set 객체는 중복을 허용하지 않는 값들의 순서 있는 목록을 저장하는 컬렉션입니다. 즉, 하나의 Set 안에는 동일한 값이 두 번 이상 존재할 수 없습니다.

배열(Array)과 유사하게 여러 값을 순서대로 저장하지만, 가장 큰 차이점은 값의 유일성 보장에 있습니다. 이 특징 덕분에 배열에서 중복된 항목을 제거하거나, 특정 항목의 존재 여부를 효율적으로 확인할 때 매우 유용합니다.

주요 특징

• 값의 유일성: 동일한 값은 한 번만 저장됩니다.
• 순서 유지: 값은 추가된 순서대로 저장되고 순회됩니다.
• 모든 자료형 저장: 원시 자료형, 객체, 함수 등 모든 유형의 값을 저장할 수 있습니다.

2. Set 기본 조작

Set 생성

new Set() 생성자를 사용하여 Set 객체를 생성합니다. 선택적으로 배열(또는 다른 이터러블 객체)을 인자로 전달하여 초기화할 수 있으며, 이 과정에서 중복된 값은 자동으로 제거됩니다.

// 빈 Set 생성
const emptySet = new Set();

// 배열을 이용해 Set 생성 (중복 값 2는 자동으로 제거됨)
const numbers = [1, 2, 2, 3, 4, 4];
const numberSet = new Set(numbers);

console.log(numberSet); // Set(4) { 1, 2, 3, 4 }

크기 확인: size

size 프로퍼티를 사용하여 Set에 포함된 요소(값)의 개수를 확인할 수 있습니다. (배열의 length와 유사합니다.)

const mySet = new Set([1, 2, 3, 3]);
console.log(mySet.size); // 3

3. Set 메서드

add(value): 요소 추가

add() 메서드를 사용하여 Set에 새로운 요소를 추가합니다. 이미 존재하는 값을 추가하면 아무런 변화가 일어나지 않습니다. add() 메서드는 체이닝(chaining)이 가능하도록 Set 객체 자신을 반환합니다.

const set = new Set();

set.add(1);       // Set(1) { 1 }
set.add("hello"); // Set(2) { 1, "hello" }
set.add(1);       // Set(2) { 1, "hello" } (변화 없음)

// 체이닝
set.add(2).add(3);
console.log(set); // Set(4) { 1, "hello", 2, 3 }

has(value): 요소 존재 여부 확인

has() 메서드는 특정 값이 Set에 존재하는지 확인하고, 그 결과를 불리언(true 또는 false)으로 반환합니다.

const set = new Set([1, 2, 3]);

console.log(set.has(2)); // true
console.log(set.has(4)); // false

delete(value): 요소 삭제

delete() 메서드는 Set에서 특정 값을 삭제합니다. 삭제에 성공하면 true를, 해당 값이 없어 삭제에 실패하면 false를 반환합니다.

const set = new Set([1, 2, 3]);

const result1 = set.delete(2);
console.log(result1); // true
console.log(set);     // Set(2) { 1, 3 }

const result2 = set.delete(4); // 존재하지 않는 요소 삭제 시도
console.log(result2); // false

clear(): 모든 요소 제거

clear() 메서드는 Set의 모든 요소를 한 번에 제거합니다.

const set = new Set([1, 2, 3]);
set.clear();
console.log(set); // Set(0) {}

4. Set 순회 (Iteration)

Set 객체는 이터러블(iterable)이므로, for...of 반복문이나 forEach() 메서드를 사용하여 요소를 순회할 수 있습니다.

for...of 반복문

const numberSet = new Set([10, 20, 30]);

for (const value of numberSet) {
  console.log(value);
}
// 10
// 20
// 30

• 배열과 비슷하게 동작합니다.
• 순서대로 Set에 들어있는 값들을 하나씩 꺼내줍니다.

forEach() 메서드

Set의 forEach는 배열의 forEach와 유사하지만, 콜백 함수에 전달되는 첫 번째와 두 번째 인자가 모두 값(value)이라는 점이 독특합니다. 이는 배열과의 호환성을 위한 것입니다.

• Set의 forEach()는 배열의 forEach와 같은 형식으로 콜백을 받습니다.
  - 배열의 경우: callback(element, index, array)
  - Set의 경우: callback(value, valueAgain, set)
• 차이점: 배열은 첫 번째가 값, 두 번째가 인덱스지만 Set은 첫 번째와 두 번째 모두 값입니다.
  • 왜냐하면 Set은 인덱스 개념이 없기 때문입니다.
  • 대신 배열과 호환성을 맞추기 위해 “두 번째 인자 자리”를 그대로 유지하되, 그냥 같은 값을 두 번 넣어줍니다.
  

참고: foreEach 매개변수의 순서는 중요합니다.

순서가 중요한 이유:

• 자바스크립트 엔진은 항상 (값, 키, 원본객체) 순서로 콜백을 호출합니다.
• Map은 (value, key, map)
• Set은 (value, valueAgain, set)
• 따라서 매개변수 위치를 바꿔 적으면, 헷갈리거나 잘못된 데이터로 인식할 수 있어요.

const stringSet = new Set(["apple", "banana", "cherry"]);

stringSet.forEach((value, valueAgain, set) => {
  console.log(`value: ${value}, valueAgain: ${valueAgain}`);
});
// value: apple, valueAgain: apple
// value: banana, valueAgain: banana
// value: cherry, valueAgain: cherry