[JS] 객체 Set을 알아보자

Set이란?

중복되지 않는 유일한 값들의 집합

• 키가 없는 값이 저장된다.
• 값들이 삽입된 순서를 유지한다. 
• 인덱스로 요소에 접근할 수 없다.
• 내부적으로 해시테이블을 사용한다.
  • 해시 테이블은 데이터를 저장하는데 사용되는 자료구조 중 하나로, 키값과 밸류값을 쌍으로 저장해 키를 기반으로 값을 검색한다. Set은 내부적으로 이를 이용해 데이터를 저장하는데, Set에 값을 추가하면 해시 함수를 사용해 값의 해시를 계산하고, 값이 저장될 위치를 결정한다. 이처럼 해시 테이블을 기반으로 구현되었으나 Set에서는 값만 저장하므로 값의 중복을 허용하지 않아 고유한(유일한) 값의 집합을 관리하기 적합하다.

---

Set 객체 사용하기

Set 생성하기

new 키워드를 사용해 생성한다.

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

 

Set.prototype.add()

Set 객체의 맨 뒤에 주어진 밸류의 새 요소를 추가한다.

메서드 체이닝(메서드 연속 호출)이 가능하다.

var mySet = new Set();

mySet.add(1);
mySet.add(5).add('어떤 문자열'); // 계속 붙일 수 있음

console.log(mySet);
// Set [1, 5, "어떤 문자열"]

 

Set.prototype.size

size 프로퍼티로 Set 객체의 원소 수를 반환한다.

Set은 중복된 값을 허용하지 않으므로 똑같은 값이 들어와도 하나만 추가한다.

const set1 = new Set();
const object1 = {};

set1.add(42);
set1.add('forty two');
set1.add('forty two');
set1.add(object1);

console.log(set1.size);
// Expected output: 3

 

Set.prototype.has()

Set 객체에 주어진 요소가 존재하는지 여부를 판별해 불리언 값으로 반환한다.

Set에서 has 메서드는 값을 비교할 때 sameValueZero 알고리즘을 사용한다.

이는 일치 연산자와 동일한 동작을 수행하되 0과 -0을 구분하지 않고, 동일한 NaN값이 여러 번 추가돼도 한 번만 저장한다.

 

일치 연산자는 값과 타입 모두를 비교해서, 객체의 경우 참조 값이 동일해야 true가 반환된다.

맨 아래의 obj1과 {'key1': 1}은 각각 별도의 메모리 위치에 저장된다.

즉 참조 값이 다르기 때문에 내용은 똑같지만 참조 값이 달라 false가 반환되는 것이다.

var mySet = new Set();
mySet.add('foo');

mySet.has('foo');  // true
mySet.has('bar');  // false

var set1 = new Set();
var obj1 = {'key1': 1};
set1.add(obj1);

set1.has(obj1);        // true
set1.has({'key1': 1}); // false, 형태만 같은 서로 다른 객체의 참조이기 때문
set1.add({'key1': 1}); // set1의 요소가 2개로 늘어남

 

Set.prototype.delete()

Set 객체에 지정한 요소를 제거한다. 제거하면 true, 그렇지 않으면 false를 반환한다.

var mySet = new Set();
mySet.add('foo');

mySet.delete('bar'); // bar라는 값이 없으므로 false 반환
mySet.delete('foo'); // foo라는 값이 성공적으로 제거되었으므로 true

mySet.has('foo');    // foo는 더 이상 존재하지 않아 false

 

Set.prototype.values()

Set 객체에 요소가 삽입된 순서대로, 각 요소의 값을 순환할 수 있는 새로운 이터레이터 객체를 반환한다.

var mySet = new Set();
mySet.add('foo');
mySet.add('bar');
mySet.add('baz');

var setIter = mySet.values();
console.log(setIter.next().value); // "foo"
console.log(setIter.next().value); // "bar"
console.log(setIter.next().value); // "baz"

 

for... of

반복 가능한 객체로 해당 루프를 사용해 Set 값에 접근할 수 있다.

배열과 달리 인덱스가 제공되지 않아 값을 가져오려면 이렇게 반복을 해 값을 찾아야 한다.

let set = new Set([1, 2, 3])
for (let value of set) {
    console.log(value)
}
// 1
// 2
// 3

 

이터러블 객체이기 때문에 전개 구문이나 구조분해할당도 가능하다.

또한 Set 객체가 수학적 집합을 구현하기 위한 자료구조이기 때문에, 코드를 짜서 교집합이나 차집합, 합집합을 구현하는 것이 가능하다.

---

**참고

[자바스크립트] Set (집합)

Set - JavaScript | MDN