JS 에서 Set 객체의 사용

Set 객체란 ?

Set 객체는 중복되지 않는 유일한 값들의 집합 이다.

Set 객체는 배열과 유사 하지만 차이점이 있다.

1. 동일한 값을 중복하여 포함 할수없다.
2. 요소 순서에 의미가 없다.
3. 인덱스로 요소에 접근할수 없다.

이러한 특성은 수학적 집합의 특성과 일치하는데, Set 객체는 수학적 집합을 구현하기 위한 자료구조다.

따라서 Set 을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할수 있다.

Set 객체의 생성

Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다.

const set_1 = new Set();
console.log(set_1); // Set(0) {}

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다.

이때 중복된 값은 Set 객체에 요소로 저장되지 않는다.

const set_1_1 = new Set([1, 2, 3, 3]);
console.log(set_1_1); // Set(3) { 1, 2, 3 }

const set_1_2 = new Set("hello");
console.log(set_1_2); // Set(4) { 'h', 'e', 'l', 'o' }

중복을 허용하지 않는 Set 객체의 특성을 활용해 배열에서 중복된 요소를 제거할 수 있다.

const unique = (array: number[]) =>
  array.filter((v, i, self) => self.indexOf(v) === i);
console.log(unique([2, 1, 2, 3, 4, 3, 4])); // [ 2, 1, 3, 4 ]

const uniqueSet = (array: number[]) => [...new Set(array)];
console.log(uniqueSet([2, 1, 2, 3, 4, 3, 4])); // [ 2, 1, 3, 4 ]

Set 객체는 이터레이터 프로토콜을 따르므로 전개 연산자를 사용할수 있다.

요소 개수 확인

Set 객체의 요소 개수를 확인할땐 Set.prototype.size 프로퍼티를 사용한다.

const { size } = new Set([1, 2, 3, 3]);
console.log(size); // 3

size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티다. 따라서 size 프로퍼티에 숫자에 할당해 Set 객체의 요소개수를 변경할수 없다.

const exampleSet = new Set([1, 2, 3]);
console.log(Object.getOwnPropertyDescriptor(Set.prototype, "size"));
// {
//   get: [Function: get size],
//   set: undefined,
//   enumerable: false,
//   configurable: true
// }

exampleSet.size = 10; // Cannot assign to 'size' because it is a read-only property.
console.log(exampleSet.size); // 3

 

요소 추가

add 메서드는 새로운 요소가 추가된 Set 객체를 반환한다. 따라서 add 메서드를 연속적으로 사용이 가능하다.

const set_3 = new Set();
set_3.add(1);
console.log(set_3); // Set(1) { 1 }
set_3.add(2).add(3).add(4).add(4);
console.log(set_3); // Set(4) { 1, 2, 3, 4 }

중복을 허용하지 않는 Set 의 특성으로인해, console.log(NaN === NaN) 은 false 이지만,
Set ([Nan, NaN]); 은 같다고 평가된다.

const set_3_1 = new Set();
console.log(NaN === NaN); // false
console.log(0 === -0); // true

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

set_3_1.add(0).add(-0);
console.log(set_3_1); // Set(2) { NaN, 0 }

Set 객체는 객체나 배열과 같이 JS 의 모든 값을 요소로 저장할 수 있다.

const set_3_2 = new Set();
set_3_2
  .add(1)
  .add("test")
  .add(true)
  .add(undefined)
  .add(null)
  .add({})
  .add([])
  .add(() => {});
console.log(set_3_2);
// Set(8) {
//   1,
//   'test',
//   true,
//   undefined,
//   null,
//   {},
//   [],
//   [Function (anonymous)]
// }

요소 존재 여부 확인

Set 객체에 특정 요소가 존재 하는지 확인 하려면 Set.prototype.has 메서드를 사용한다. 반환되는 값은 boolean 이다.

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

console.log(set_4.has(2)); // true
console.log(set_4.has(4)); // false

요소 삭제 

Set.prototype.delete 메서드를 사용 하여 Set 객체 내의 값을 삭제할수 있다. 반환되는 값은 삭제 성공 여부 boolean 이다.
delete 메서드에는 인덱스가 아닌 삭제하려는 요소값을 직접 인수로 전달한다. Set 객체는 순서에 의미가 없고, 배열과 같은 인덱스를 갖지 않기 때문이다.

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

set_4_1.delete(2);
console.log(set_4_1); // Set(2) { 1, 3 }

set_4_1.delete(1);
console.log(set_4_1); // Set(1) { 3 }

만약 존재하지 않는 Set 객체의 요소를 삭제하려 하면 에러없이 무시된다.
또한 delete 메서드의 리턴값은 boolean 이므로, 연속적으로 사용이 불가능하다.

Set.prototype.clear 메서드를 사용하여 Set 객체의 모든 요소를 일괄 삭제할수 있다. 반환되는 값은 항상 undefined 이다.

const set_4_2 = new Set([1, 2, 3, 4, 5]);
set_4_2.clear();
console.log(set_4_2); // Set(0) {}

요소 순회 

Set 객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용한다. 이 메서드는 Array.prototype.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this 로 사용될 객체를 인수로 전달한다.

첫번째 인수 : 현재 순회중인 요소값
두번째 인수 : 현재 순회중인 요소값
세번째 인수 : 현재 순회중인 Set 객체 자체

첫번째 인수와 두번째 인수는 같은 값인데, 이는 Array 의 forEach메서드와 인터페이스의 통일을 하기 위함이다.
Array.prototype.forEach 메서드의 콜백함수 두번째 인자는 순회중인 요소의 인덱스 인데, Set 객체는 순서에 의미가 없기에 이러한 동작을 한다.

const set_5_0 = new Set([1, 2, 3]);
set_5_0.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 문으로 순회할수 있으며, 스프레드 문법과 배열 디스트릭처링도 가능하다.

const set_5_1 = new Set([1, 2, 3, 4]);
console.log(Symbol.iterator in set_5_1); // true

for (const value of set_5_1) {
  console.log(value); // 1 2 3 4
}

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

const [set_5_1Value, ...set_5_1Rest] = set_5_1;
console.log(set_5_1Value, set_5_1Rest); // 1 [ 2, 3, 4 ]

Set 객체는 요소의 순서에 의미를 갖지 않지만 Set 객체를 순회하는 순서는 요소가 추가된 순서를 따른다. 이는 ECMAScript 사양에 규정되어 있지는 않지만 다른 이터러블의 순회와 호환성을 유지하기 위함이다.

집합 연산 

Set 객체는 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set 객체를 통해 교집합, 합집합, 차집합 등을 구현할 수 있다. 집합 연산을 수행하는 프로토타입 메서드를 구현하면 다음과 같다.