Section 10. 자바스크립트 Set

Set은 표준 내장 객체 중 하나로서 중복되지 않는 값들의 집합을 말한다.

배열과의 차이는 다음과 같다

• 동일한 값을 여러 번 포함할 수 없다.
• 값들의 순서가 무의미하다.

I. 기본 사용법

// Set 생성
const set1 = new Set();

// add 메서드 - 요소 추가
set1.add(1);
set1.add('A');
set1.add(true);

console.log(set1); //{1, 'A', true}

이미 포함된 요소는 추가하지 않는다.

set1.add(1);
set1.add(true);

console.log(set1); //{1, 'A', true}

배열을 인자로 넣으면 생성 + 초기화를 한다. 그리고 중복된 요소가 제거가 된다.

const set2 = new Set([1, 1, 1, 'A', true]);

console.log(set2); //{1, 'A', true}

 

has - 요소 포함여부 확인 메서드

// has 메서드 - 요소 포함여부 확인
console.log(
  set2.has(1),
  set2.has('A'),
  set2.has(4)
); //true true false

 

delete - 요소 제거 및 성공 여부를 반환하는 메서드

console.log(
  set2.delete('A'), //true
  set2.delete(true), //true
  set2.delete(100) //false
);

console.log(set2); //{1}

 

add 메서드는 결과 셋을 반환한다.

const set3 = set2.add(2);

console.log(set3); //{1, 2}

set2
.add(3)
.add(4)
.add(5)

// 참조형이므로 둘이 같은 Set을 가리킴
console.log(set2, set3); //{1, 2, 3, 4, 5} {1, 2, 3, 4, 5}

 

메서드 체이닝이 가능하고 참조형이므로 같은 Set을 가리킨다. 

size 프로퍼티 - 요소의 개수를 반환한다.

// size 프로퍼티 - 요소의 개수
console.log(
  set2.size
); //5

 

keys, values, entries - 값 / 값 / [값, 값]을 반환하는 메서드. key를 value와 같이 취급한다.

// keys, values, entries 메서드 - 값 / 값 / [값, 값] 반환
// key를 value와 같이 취급
console.log(
  set2.keys(), //SetIterator {1, 2, 3, 4, 5} 
  set2.values(), //SetIterator {1, 2, 3, 4, 5} 
  set2.entries() //SetIterator {1 => 1, 2 => 2, 3 => 3, 4 => 4, 5 => 5}
);

 

clear - 모든 요소들을 삭제하는 메서드

set2.clear();

console.log(set2, set3);

모든 요소들이 삭제가 됐다.

 

참조형 데이터의 경우

const objSet1 = new Set()
.add({ x: 1, y: 2 })
.add({ x: 1, y: 2 })
.add([1, 2, 3])
.add([1, 2, 3]);

// 각기 다른 것으로 인식 (참조하는 주소가 다르므로)
console.log(objSet1);

Set은 add했을때 중복된 것은 추가가 되지 않는다. 하지만 출력문을 보니 값은 같아도 모두 add가 되어 출력된 것을 볼 수 있다. 즉, 값만 같을 뿐 서로 참조하는 주소가 다 다른 것 이라고 이해하면 된다.

const obj = { x: 1, y: 2 };
const arr = [1, 2, 3];

const objSet2 = new Set()
.add(obj)
.add(obj)
.add(arr)
.add(arr);

// 같은 것들로 인식
console.log(objSet2)

 

중복된 것들은 add 되지 않았다.

 

II. 이터러블러서의 Set

배열이랑 문자열에서 쓰는 것과 동일하다. 

 

먼저 배열과 set을 생성했다. 

const arr = ['A', 'B', 'C', 'D', 'E'];
const set = new Set(arr);

 

1. for ... of 문

for (item of set) {
  console.log(item);
}
//A
//B
//C
//D
//E

2. 스프레드 문법

const newArr = [...set];

console.log(newArr); //['A', 'B', 'C', 'D', 'E']

또한 set은 중복을 제거하기 때문에

// 활용 - 중복을 제거한 배열 반환
const arr1 = [1, 1, 1, 2, 2, 3, 4, 5];

const arr2 = [...new Set(arr1)];

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

이런식으로도 활용이 가능하다. 

 

3. 디스트럭쳐링

const [x, y] = set;
console.log(x); //A
console.log(y); //B

const [a, b, ...rest] = set;

console.log(a); //A
console.log(b); //B
console.log(rest); //['C', 'D', 'E']