[ JavaScript ] Set

세트 Set 란?

자바스크립트에서 고유한 값들의 집합을 다루는 자료구조이다.

이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있다.

자료구조로서의 세트

순서가 없는 중복되지 않은 데이터 값의 집합이다.

세트 vs 배열

배열

• 데이터를 순서에 맞게 저장 => 인덱스를 통해 특정 위치의 데이터에 접근 가능하다.
• 동일한 값을 여러 번 저장할 수 있다.
  (값이 동일하더라도 인덱스가 다르기 때문에 데이터의 중복이 문제되지 않는다.)

세트

• 데이터를 순서 없이 저장한다.
• 기존에 세트에 있는 값을 또 추가하면 아무 효력이 발생하지 않는다.

세트 생성

자바스크립트에서 Set는 클래스이므로 new키워드와 생성자를 사용하여 객체를 생성할 수 있다.

const set = new Set() // Set(0) {size : 0}
// 생성자에 아무 것도 넣지 않으면 빈 세트가 만들어 진다. 

const numSet = new Set([1,2,3]) //Set(3){1,2,3}
// 배열을 인수로 넘기면 배열에 담긴 값으로 세트가 만들어진다. 

const text = "India"
const textSet = new Set(text) //Set(5){"I","n","d","i","a"}
new Set("Firefox"); // Set(7) { "F", "i", "r", "e", "f", "o", "x" } //case sensitive
new Set("firefox"); // Set(6) { "f", "i", "r", "e", "o", "x" }

값 추가 add()

• 새로운 값을 추가할 때는 add()메서드를 사용한다.
• 중복된 값은 추가되지 않으며, 유일한 값만 저장된다.
• add()는 값을 추가한 후에 세트를 반환하기 때문에 연쇄적으로 호출할 수 있다.

const set = new Set()

set.add(1) // Set(1){1}
set.add("A") //Set(2){1,"A"}
set.add(true) //Set(3){1,"A",true}

set.add(1).add("A").add(true) //Set(3){1,"A",true}

값 삭제 delete()

• delete()메서드를 사용하면 특정 값을 삭제할 수 있다.
• delete()메서드에 인자로 넘긴 값이 세트에 존재하여 성공적으로 삭제됐다면 true 반환하고,
  해당 값이 세트에 존재하지 않아서 삭제에 실패했다면 false를 반환한다.

값 존재 여부 확인 has()

• 특정 값이 존재하는지 확인혀려면 has()메서드를 사용한다.
• 보통 if 조건문이나 3항 연산자와 많이 사용된다.
• 배열의 길이와 세트의 사이즈가 같으면, Array.prototype.includes 보다 has()가 더 빠르다.

Set이 왜 더 빠를까?

값의 개수 확인

• 세트의 size속성을 통해 해당 세트의 길이, 즉 얼마나 많은 값이 저장되어 있는지를 알 수 있다.

모든 값 제거 clear()

• 모든 값을 제거하려면 clear()메서드를 사용한다.

세트 순회

• 세트에 저장되어 있는 모든 값을 순회하고 싶을 때는, for루프문 안에서 of 연산자를 사용하면 된다.

for(const num of numSet){
    console.log(num)
}

• 배열처럼 세트도 forEach() 함수를 제공하고 있어서 활용 가능하다.

numSet.forEach((num)=>console.log(num))

배열을 세트로 변환, 세트를 배열로 변환

const array = [1,2,3,3,3,4]

const set = new Set(array) //Set(4){1,2,3,4}

const array = [...set] //[1,2,3] // 전개 spread 연산자 사용
const array = Array.from(set) // [1,2,3]

배열에서 중복 값 제거

const numbers = [1,2,2,3,4,4,5]
const uniqueNumbers = [...new Set(numbers)]
console.log(uniqueNumbers) //[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]); // [1, 2, 3, 4, 5, 6, 7, 8]

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

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

타입스크립트에서 세트 사용

• 타입스크립트를 사용하면 세트를 생성할 때 저장할 수 있는 자료형을 제한할 수 있다.

const numSet = new Set<number>();
numSet.add(1);
numSet.add("A"); // Argument of type 'string' is not assignable to parameter of type 'number'.(2345)
//     ^? (method) Set<number>.add(value: number): Set<number>

세트의 메서드

• Set.prototype.add()
• Set.prototype.clear()
• Set.prototype..delete()
• Set.prototype.entries()

// key and value are the same here
for (const [key, value] of mySet1.entries()) {
  console.log(key);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

• Set.prototype.forEach()
• Set.prototype.has()
• Set.prototype.values() (alias - Set.prototype.keys())
• Set.prototype[@iterator]()

 

---

 

참조

https://www.daleseo.com/js-set/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

https://velog.io/@jiwonyyy/javascipt-Set-vs-Array-%EC%8B%9C%EA%B0%84%EB%B3%B5%EC%9E%A1%EB%8F%84-%EB%B9%84%EA%B5%90-%ED%95%B4%EC%8B%9C%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%B4%EB%9E%80