[Group Study, 모던 자바스크립트 Deep Dive] - 37 Set

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

37.1 Set

Set은 수학적 집합을 구현하기 위한 자료구조로 중복되지 않는 유일한 값들의 집합이다. 따라서 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.

Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.

구분	배열	Set
동일한 값을 중복하여 포함 가능	O	X
요소 순서에 의미가 있음	O	X
인덱스로 요소에 접근 가능	O	X

37.1.1 Set 객체 생성

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 당연한 말이지만, 이터러블의 중복된 값은 Set 객체에 저장되지 않는다.

[예제 37-01]

const set1 = new Set([1,2,3,3]) // Set(3) {1,2,3}

const set2 = new Set('hello') // set(4) {"h", "e", "l", "o"}

// 배열의 중복 요소 제거
const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i)

// Set을 사용한 배열의 중복 요소 제거
const uniq = array => [...new Set(array)]

37.1.2 요소 개수 확인

[예제 37-02]

const {size} = new Set([1,2,3,3])

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

console.log(set.size) //3

37.1.3 요소 추가

[예제 37-03]

const set = new Set()
set.add(1)
set.add(2).add(3)
// 모든 값 저장 가능
set.add(NaN).add(null).add(true).add('a').add({}).add([]).add(() => {})

37.1.4 요소 존재 여부 확인

[예제 37-04]

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

console.log(set.has(2))
console.log(set.has(4))

37.1.5 요소 삭제

[예제 37-05]

 

 

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

set.delete(2)

// 에러 없이 무시
set.delete(4)

37.1.6 요소 일괄 삭제(비우기)

 

[예제 37-06]

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

37.1.7 요소 순회

Set 객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용한다.

인수

1. 현재 순회 중인 요소 값
2. 현재 순회중인 요소 값 
3. 현재 순회 중인 Set 객체 자체

[예제 37-07]

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

ser.forEach((v, v2, set) => console.log(v,v2,set));

/*
1 1 Set(3) {1,2,3}
2 2 Set(3) {1,2,3}
3 3 Set(3) {1,2,3}
*/

• Set 또한 이터러블이므로 for ... of 문으로 순회 가능하다.
• Set 또한 이터러블이므로 디스트럭처링 할당의 대상이 될 수 있다.

37.1.8 집합 연산

[예제 37-08] 교집합

Set.prototype.intersection = function(set) {
 return new Set([...this].filter(v => set.has(v)));
}

const setA = new Set([1,2,3,4,])
const setB = new Set([2,4,])

setA.intersection(setA.intersection(setB))

 

[예제 37-09] 합집합

Set.prototype.union = function(set) {
 return new Set([...this], ...set);
}

const setA = new Set([1,2,3,4])
const setB = new Set([2,4])

console.log(setA.union(setB))

 

[예제 37-10] 차집합

Set.prototype.difference = function (set) {
 return new Set([...this].filter(v => !set.has(v)))
}

const setA = new Set([1,2,3,4])
const setB =  new Set([2,4])

console.log(setA.difference(setB))

 

[예제 37-11] 상위 집합 & 부분집합

Set.prototype.isSuperset = function (subset) {
 for (const value of subset) {
  if (!this.has(value)) return false
 }
 
 return true
}

const setA = new Set([1,2,3,4])
const setB = new Set([2,4])

console.log(setA.isSuperSet(setB))