JavaScript Sets
JavaScript Sets: 집합(Set)의 이해와 활용
JavaScript의 Set 객체는 고유한 값을 저장할 수 있는 집합을 구현합니다. Set은 배열과
유사하지만, 중복된 값이 없으며, 각 요소는 한 번만 저장됩니다. 이 특징 덕분에 Set은 중복된 값을 제거하거나, 데이터의
유일성을 보장하는 작업에 적합합니다.
이 가이드는 JavaScript에서 Set 객체의 사용법과 그 활용 방법을 설명합니다.
1. Set의 기본 개념
Set은 배열과 비슷하게 동작하지만, 중복된 값을 허용하지 않습니다. 또한 삽입 순서를 유지하며, 데이터의 삽입, 삭제,
검색에 유용한 메서드를 제공합니다.
1.1. Set의 생성
Set은 배열과 비슷하게 리터럴 값을 전달하여 생성할 수 있습니다.
const mySet = new Set();
console.log(mySet); // 출력: Set(0) {}
const numbers = new Set([1, 2, 3, 4, 5]);
console.log(numbers); // 출력: Set(5) { 1, 2, 3, 4, 5 }
1.2. 중복 값 처리
Set은 중복된 값을 자동으로 제거합니다. 즉, 동일한 값이 추가되면 무시됩니다.
const uniqueNumbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(uniqueNumbers); // 출력: Set(5) { 1, 2, 3, 4, 5 }
2. Set의 주요 메서드
Set은 데이터의 추가, 삭제, 검색 등을 위한 다양한 메서드를 제공합니다.
2.1. add(): 요소 추가
add() 메서드는 Set에 새로운 요소를 추가합니다. 중복된 값은 추가되지 않습니다.
const fruits = new Set();
fruits.add("apple");
fruits.add("banana");
fruits.add("apple"); // 중복된 값은 무시됨
console.log(fruits); // 출력: Set(2) { 'apple', 'banana' }
2.2. has(): 요소 존재 여부 확인
has() 메서드는 Set에 특정 요소가 있는지 확인하여, 불리언 값으로 반환합니다.
console.log(fruits.has("apple")); // 출력: true
console.log(fruits.has("grape")); // 출력: false
2.3. delete(): 요소 삭제
delete() 메서드는 Set에서 특정 요소를 삭제합니다. 성공적으로 삭제되면 true, 삭제할 요소가
없으면 **false**를 반환합니다.
console.log(fruits.delete("banana")); // 출력: true
console.log(fruits); // 출력: Set(1) { 'apple' }
console.log(fruits.delete("grape")); // 출력: false
2.4. clear(): 모든 요소 제거
clear() 메서드는 Set의 모든 요소를 삭제합니다.
fruits.clear();
console.log(fruits); // 출력: Set(0) {}
2.5. size: Set의 크기 확인
size 속성은 Set에 저장된 요소의 개수를 반환합니다.
const numbers = new Set([1, 2, 3, 4]);
console.log(numbers.size); // 출력: 4
3. Set의 반복과 순회
Set은 배열과 마찬가지로 반복 가능한 이터러블 객체입니다. 따라서 **for...of**나 forEach()
같은 반복문을 사용하여 순회할 수 있습니다.
3.1. for...of로 Set 순회
for...of 반복문을 사용하여 Set의 요소를 순회할 수 있습니다.
const colors = new Set(["red", "green", "blue"]);
for (const color of colors) {
console.log(color);
}
// 출력:
// red
// green
// blue
3.2. forEach() 메서드
Set 객체는 배열과 마찬가지로 forEach() 메서드를 제공하며, 각 요소에 대해 지정된 함수를 실행합니다.
colors.forEach((color) => {
console.log(color);
});
// 출력:
// red
// green
// blue
4. Set과 배열 변환
Set을 배열로 변환하거나, 배열을 Set으로 변환하는 작업은 매우 간단합니다.
4.1. 배열을 Set으로 변환
배열을 Set으로 변환하여 중복된 값을 제거할 수 있습니다.
const numbersArray = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = new Set(numbersArray);
console.log(uniqueNumbers); // 출력: Set(5) { 1, 2, 3, 4, 5 }
4.2. Set을 배열로 변환
Set 객체를 배열로 변환하려면 Array.from() 또는 **전개 연산자(spread operator)**를 사용할 수 있습니다.
const uniqueNumbersArray = Array.from(uniqueNumbers);
console.log(uniqueNumbersArray); // 출력: [ 1, 2, 3, 4, 5 ]
const uniqueNumbersArray2 = [...uniqueNumbers];
console.log(uniqueNumbersArray2); // 출력: [ 1, 2, 3, 4, 5 ]
5. Set의 활용 예시
5.1. 배열에서 중복된 값 제거
Set을 사용하면 배열의 중복된 값을 손쉽게 제거할 수 있습니다.
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 출력: [ 1, 2, 3, 4, 5 ]
5.2. 교집합 구하기
두 배열 간의 교집합을 구하는 방법입니다. Set과 filter()를 활용하여 교집합을 간단히 구현할 수 있습니다.
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);
const intersection = [...setA].filter(x => setB.has(x));
console.log(intersection); // 출력: [ 3, 4 ]
5.3. 합집합 구하기
합집합을 구하려면 두 Set 객체를 전개 연산자로 결합하면 됩니다.
const union = new Set([...setA, ...setB]);
console.log(union); // 출력: Set(6) { 1, 2, 3, 4, 5, 6 }
5.4. 차집합 구하기
한 집합에서 다른 집합에 없는 값을 구하는 차집합입니다.
const difference = [...setA].filter(x => !setB.has(x));
console.log(difference); // 출력: [ 1, 2 ]
6. Set의 주의사항
-
중복 제거:
Set은 중복된 값을 자동으로 제거하지만, 객체는 참조로 비교되므로, 동일한 객체라도 서로 다른 참조일 경우Set에 중복으로 추가됩니다.const obj1 = { name: "Alice" }; const obj2 = { name: "Alice" }; const set = new Set([obj1, obj2]); console.log(set.size); // 출력: 2 (객체는 참조가 다름) -
순서 보장:
Set은 삽입된 순서를 기억하며, 이는 배열처럼 요소가 삽입된 순서대로 접근할 수 있음을 의미합니다.
요약
Set객체는 중복된 값을 허용하지 않는 데이터 구조로, 유일한 값만 저장할 수 있습니다.- 주요 메서드:
add(),has(),delete(),clear()등을 통해 요소를 추가, 삭제, 조회할 수 있습니다. - 반복 및 순회:
for...of,forEach()로Set의 요소를 순회할 수 있습니다. - 배열과의 변환:
Set은 배열과 상호 변환할 수 있으며, 중복된 값을 제거하는 데 유용합니다.
JavaScript의 Set 객체는 **데이터의 유
일성**을 보장하거나, 중복된 값을 처리하는 작업에서 매우 유용합니다. 다양한 메서드를 적절히 활용하여 중복 제거, 교집합, 합집합 등의 작업을 쉽게 처리할 수 있습니다.