[JavaScript] Set 알아보기

set() 이란?

Set은 수학적 집합을 표현하기 위해 ES6에 새롭게 추가된 고유한 값들의 집합을 다루는 자료구조입니다.

 

따라서 수학적 집합의 합집합, 여집합, 교집합, 차집합 등을 구현할 수 있습니다.

 

Set()의 특징

Set 은 배열과 비슷하지만 배열과 다른 점이 존재합니다.

 

배열은 데이터를 index 순서가 있게 저장을 하기 때문에 index를 통해 배열 요소에 접근이 가능합니다. 그렇기 때문에 값이 동일하더라도 index가 다르기 때문에 데이터 중복이 가능합니다. 

 

반면에 Set은 아래와 같은 특징을 가집니다.

 

• key가 없고 value값 만을 저장하며 동일한 값을 중복을 허용하지 않습니다.
• 요소 순서에 의미가 없기 때문에 인덱스로 요소에 접근이 불가능 합니다.
• 대소문자를 구분합니다.

 

Set 생성

const emptySet = new Set();

console.log(emptySet); // 결과 : Set(0) { }

const nums = new Set([1,2,3,4,5]);

console.log(nums); // 결과 : Set(5) {1,2,3,4,5}

const str = new Set('Hello');

console.log(str); // 결과 : Set(4) {'H', 'e', 'l', 'o'}

const str2 = new Set('Hello hi');

console.log(str2); // 결과 : Set(7) {'H', 'e', 'l', 'o', " ", "h", "i"}

 

Set 객체는 클래스(class)이므로 new 키워드와 생성자 함수를 사용하여 객체를 생성해야 합니다.

 

위 코드에서 보았듯이 생성자 함수의 인자에 아무것도 넘기지 않는다면 빈 Set가 만들어집니다.

 

또한 str처럼 중복을 허용하지 않는 것을 확인할 수 있으며 str2처럼 대소문자를 구분하는 것을 확인할 수 있습니다.

 

Set 값 추가

Set에 새로운 값을 추가할 때는 add() 메서드를 사용하면 됩니다.

 

/* 요소 추가하기 */
const set = new Set();
console.log(set); // Set(0) {}

set.add(1);
console.log(set); // Set(1) {1}

/* 메서드 체이닝이 가능합니다. */
const set = new Set();

set.add(1).add(2).add(3).add('A').add('B').add('C');
console.log(set); // Set(2) {1, 2, 3, 'A', 'B', 'C'}

/* 중복된 요소 추가는 허용하지 않습니다.. */
const set = new Set();

set.add(1).add(2).add(2);
console.log(set); // Set(2) {1, 2}

 

add() 메서드는 값을 추가한 후에 세트를 반환하기 때문에 아래와 같이 연쇄적(메서드 체이닝)으로 호출할 수도 있습니다.

 

 

Set 값 삭제

Set의 특정 값을 삭제할 때는 delete() 메서드를 사용하면 됩니다.

 

이때 delete() 인자로 넘기는 값이 Set에 존재하여 성공적으로 삭제가 되면 true를 반환하고, 삭제할 값이 없다면 false를 반환합니다.

 

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


console.log(set.delete(1)); // 결과 : true
console.log(set.delete('A')); // 결과 : false
console.log(nums); // 결과 : {2, 3}

 

값 존재 여부 확인

Set에 특정 값이 존재하는지 확인하려면 has() 메서드를 사용하면 됩니다.

 

이때 반환 값은 boolean값입니다.

 

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

const result = set.has("A") ? "Yes" : "No" ;

console.log(result); // 결과 : No

 

Set의 모든 값 삭제

Set 객체의 모든 값을 제거하려면 clear() 메서드를 사용하면 됩니다.

 

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

nums.clear(); 

console.log(nums); // 결과 : Set(0) {size: 0}

 

 

Set의 요소 순회

Set에 저장되어 있는 모든 값을 순회하고 싶을 때는 for of 문 & forEach() 문 사용하면 됩니다.

 

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

for (let i of nums) {
  console.log(num); 
}

nums.forEach((el) => console.log(el));

 

 

배열을 Set로 변환

배열을 Set로 변환이 가능하며 중복된 값이 있을 때 Set로 변환하여 중복된 값을 제거할 때 주로 사용합니다.

 

const array = [1, 2, 3, 2, 1];
const set = new Set(array); // Set(3) {1, 2, 3}

 

 

Set를 배열로 변환

Set를 배열로 변환하는 것 역시 가능하며 ▶ 전개 연산자(...) & Array.from() 함수를 사용합니다.

 

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

const arrS = [...nums];

const arrA = Array.from(nums);

 

 

배열에서 중복 값 제거하기

앞서 살펴본 것처럼 Set는 중복 값을 허용하지 않는다는 특징이 있기 때문에 중복된 값이 있는 배열을 중복된 값을 제거하는데 매우 유용하게 쓰입니다.

 

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

const uniqueNums = [...new Set(nums)];

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

 

 

집합 연산 

합집합

const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([4, 5, 6, 7, 8]);


const union = new Set([...set1, ...set2]);
console.log([...union]); // 결과 : Set(8) [1, 2, 3, 4, 5, 6, 7, 8]

 

교집합

const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([4, 5, 6, 7, 8]);

const intersection = new Set([...set1].filter((value) => set2.has(value)));
console.log([...intersection]); // Set(2) [4, 5]

 

has() 메서드를 사용하여 set2에 set1의 요소가 존재하는지 확인을 해서 true인 값만 filter() 함수를 사용하여 intersection 변수에 새로운 Set로 만들어 줍니다.

차집합

const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([4, 5, 6, 7, 8]);

const difference = new Set([...set1].filter((value) => !set2.has(value)));
console.log([...difference]); // Set(3) [1, 2, 3]

 

교집합과 마찬가지 로직으로 false인 값만 filter() 함수를 사용하여 difference 변수에 새로운 Set로 만들어 줍니다.

 

 

 

---

 

 

Reference

• Mdn web docs
• https://www.daleseo.com/