[자료구조] 자바스크립트 Set

1. Set이란?

자바스크립트의 Set은 중복된 값을 허용하지 않는 값의 집합을 나타내는 자료구조이다.

• Set은 집합(sets)의 수학적 개념과 유사하게 동작한다는 것을 의미한다.
• Set은 중복된 값을 허용하지 않는다.
• 순서가 정의되어 있지 않다.

2. Set 생성

Set을 생성하려면 다음과 같이 new Set()을 사용한다.

let set = new Set(); // Set { }

3. Set 메서드

• add(value) : Set에 값을 추가한다.
• delete(value) : Set에서 주어진 값을 제거한다.
• has(value) : Set에 주어진 값이 존재하는지 여부를 확인한다.
• size : Set의 크기(요소의 개수)를 반환한다.
• clear() : Set의 모든 요소를 제거한다.

let numbers = new Set();

numbers.add(1);
numbers.add(2);
numbers.add(3);
numbers.add(2); // 중복된 값은 추가되지 않음

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

console.log(numbers.size); // 3

console.log(numbers.has(2)); // true

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

console.log(numbers.size); // 2

numbers.clear();
console.log(numbers); // Set {}

4. Set 접근

entries, values, keys 메서드는 Set의 항목들에 접근할 때 사용되며, Set의 각 항목을 나타내는 이터레이터(iterator)를 반환한다.

• values : Set의 각 값을 나타내는 이터레이터를 반환한다.
• keys : values 메서드와 동일한 동작을 수행하며, Set의 각 값을 나타내는 이터레이터를 반환한다.
• entries : Set의 각 항목을 나타내는 이터레이터를 반환하며, 이터레이터의 각 항목은 [value, value] 형태의 배열이다.

let mySet = new Set();

mySet.add('apple');
mySet.add('banana');
mySet.add('orange');

// values() 메서드를 사용하여 Set의 값을 나타내는 이터레이터를 생성
let valuesIterator = mySet.values();

console.log(valuesIterator.next().value); // 'apple'
console.log(valuesIterator.next().value); // 'banana'
console.log(valuesIterator.next().value); // 'orange'

// keys() 메서드를 사용하여 Set의 키를 나타내는 이터레이터를 생성 (Set은 키와 값이 동일)
let keysIterator = mySet.keys();

console.log(keysIterator.next().value); // 'apple'
console.log(keysIterator.next().value); // 'banana'
console.log(keysIterator.next().value); // 'orange'

// entries() 메서드를 사용하여 Set의 키와 값의 쌍을 나타내는 이터레이터를 생성
let entriesIterator = mySet.entries();

console.log(entriesIterator.next().value); // ['apple', 'apple']
console.log(entriesIterator.next().value); // ['banana', 'banana']
console.log(entriesIterator.next().value); // ['orange', 'orange']

• next() : 이터레이터 객체에서 다음 값을 가져오는 메서드로 현재 위치에서 다음 값을 반환한다. next() 메서드의 반환값은 { value: 'apple', done: false } 와 같다. 이때 value 는 현재 위치의 값을 말하고, done 은 더 이상 값을 찾지 못할 경우 true를, 아직 값이 남아있을 경우 false를 반환한다.

또한 Set은 반복 가능한(iterable) 객체이므로, 반복문(for...of) 혹은 forEach와 같은 메서드를 통해 각 요소에 접근할 수 있다.

for (let item of mySet) {
  console.log(item);
}

forEach 메서드의 콜백 함수는 value, key, set 세 개의 매개변수를 받는다.

• value: 현재 순회 중인 요소의 값
• key: 현재 순회 중인 요소의 키 (Set에서는 값과 키가 동일)
• set: 순회 중인 Set 자체

mySet.forEach(function (value, key, set) {
  console.log(`Value: ${value}, Key: ${key}, Set: ${set}`);
});

5. Set과 Array

전개 연산자를 사용하면 간단하게 Set을 Array로 변환할 수 있으며, 반대로 Array도 Set으로 변환할 수 있다.

// Set을 Array로 변환
let mySet = new Set([1, 2, 3, 4, 5]);
let myArray = [...mySet];

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

// Array를 Set으로 변환
let myArray = [1, 2, 3, 4, 5];
let mySet = new Set(myArray);

console.log(mySet); // Set {1, 2, 3, 4, 5}

다만, Set은 중복된 값을 허용하지 않기 때문에 Array에서 Set으로 변환할 때 중복된 값은 하나로 압축된다. (이 말은 즉, 배열에서 중복된 값을 제거할 때 Set을 사용할 수 있다.) 또한 Set은 값의 순서를 기억하지 않기 때문에 Set에서 Array로 변환하면 순서가 보장되지 않을 수 있다.

한편, Set은 키와 값이 값은 값을 가지기 때문에 Set을 객체로 변환하면 객체의 키와 값이 같은 값으로 설정된다. 따라서 Set을 객체로 변환하는 것은 일반적으로 의미가 없다.

6. Map과 Set의 차이

Map 과 Set 은 자바스크립트에서 제공하는 두 가지 다른 데이터 구조이며, 각각의 특징과 용도가 다르다.

• Map은 키와 값의 쌍을 저장하는 데이터 구조로 각 키는 고유하며, 각 값에 접근하기 위해 키를 사용하는 반면, Set은 키와 값의 쌍이 아닌 값만 가지고 있다.
• Map은 키와 값 쌍이 추가된 순서를 기억한다. 따라서 Map을 순회할 때는 추가된 순서대로 키와 값 쌍에 접근할 수 있다. 반면, Set은 값의 순서를 기억하지 않는다. 따라서 Set에 추가된 순서대로 값에 접근할 수 없다.

let mySet = new Set();

mySet.add('apple');
mySet.add('banana');
mySet.add('orange');
mySet.add('apple'); // 중복된 값은 무시됨

console.log(mySet); // Set { 'apple', 'banana', 'orange' }

let myMap = new Map();

myMap.set('fruit1', 'apple');
myMap.set('fruit2', 'banana');
myMap.set('fruit3', 'orange');
myMap.set('fruit1', 'grape'); // 동일한 키의 값이 업데이트됨

console.log(myMap); // Map { 'fruit1' => 'grape', 'fruit2' => 'banana', 'fruit3' => 'orange' }