모던 자바스크립트 37. Set과 Map

JavaScript의 Set과 Map은 ES6에서 도입된 컬렉션 객체다. Set은 중복되지 않는 유일한 값을 저장하고, Map은 키-값 쌍을 저장한다.

---

1. Set

• Set은 중복되지 않는 유일한 값들의 집합이다.
• Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.

Set 객체와 배열의 차이

• Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.

 

1. Set 객체의 생성

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

const set1 = new Set();

console.log(set1); // ✅ Set(0) {};

• Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다.
  이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다.
• 중복을 허용하지 않는 Set 객체의 특성을 활용하여 배열에서 중복된 요소를 제거할 수 있다.

const set2 = new Set([1, 2, 3, 4, 5]);

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

 

2. 요소 개수 확인

• Set 객체의 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용한다.
• size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티이다.
  따라서 size 프로퍼티에 숫자를 할당하여 Set 객체의 요소 개수를 변경할 수 없다.

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

console.log(set.size); // ✅ 3

 

3. 요소 추가

• Set객체에 요소를 추가할 때는 Set.prototype.add 메서드를 사용한다.
• add 메서드는 새로운 요소가 추가된 Set 객체를 반환한다. 따라서 add 메서드를 호출한 후 연속적으로 호출할 수 있다.

const set = new Set();

set.add(1);
set.add(2);
set.add(2); // 중복 요소는 추가되지 않는다.

console.log(set); // ✅ Set { 1, 2 }

const set2 = new Set();

// 일치 비교 연산자를 사용할 경우 NaN과 NaN을 다르다고 평가한다.
console.log(NaN === NaN); // ✅ false

set2.add(NaN).add(NaN);
// 하지만 Set 객체는 NaN과 NaN을 같다고 평가하여 중복 추가를 허용하지 않는다.
console.log(set); // ✅ Set(1) { NaN }

• Set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장할 수 있다.

const set = new Set();

set
  .add(1)
  .add('a')
  .add(true)
  .add(undefined)
  .add(null)
  .add({})
  .add([])
  .add(() => {});

console.log(set);
/* ✅ Set(8) {
  1,
  'a',
  true,
  undefined,
  null,
  {},
  [],
  ƒ (),
  __proto__: { ... }
} */

 

4. 요소 존재 여부 확인

• Set 객체에 특정 요소가 존재하는지 확인하려면 Set.prototype.has 메서드를 사용한다.
• has 메서드는 특정 요소의 존재 여부를 나타내는 불리언 값을 반환한다.

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

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

 

5. 요소 삭제

• Set 객체에 특정 요소를 삭제하려면 Set.prototype.delete 메서드를 사용한다.
• delete 메서드는 삭제 성공 여부를 나타내는 불리언 값을 반환한다.
• delete 메서드는 인덱스가 아니라, 삭제하려는 요소값을 인수로 전달해야 한다.
• delete 메서드는 add와 달리 연속적으로 호출할 수 없다.

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

set.delete(2);

console.log(set); // ✅ Set { 1, 3 }

// 존재하지 않는 Set 객체의 요소를 삭제하려 하면 에러 없이 무시된다.
set.delete(4);

console.log(set); // ✅ Set { 1, 3 }

 

6. 요소 일괄 삭제

• Set 객체에 모든 요소를 일괄 삭제하려면 Set.prototype.clear 메서드를 사용한다.
• clear 메서드는 언제나 undefined를 반환한다.

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

set.clear();

console.log(set); // ✅ Set(0) {}

 

7. 요소 순회

• Set 객체에 요소를 일괄 순회하려면 Set.prototype.forEach 메서드를 사용할 수 있다.
• Array.prototype.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체(옵션)를 인수로 전달한다. 이때 콜백 함수는 3개의 인수를 전달 받는다.
  • 첫 번째 인수: 현재 순회 중인 요소값
  • 두 번째 인수: 현재 순회 중인 요소값
  • 세 번째 인수: 현재 순회 중인 Set 객체 자체

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

set.forEach(value => {
  console.log(value); // ✅ 1, 2, 3
});

• Set 객체는 이터러블이기 때문에 for...of 문으로 순회할 수 있다. 또한 스프레드 문법과 배열 디스트럭처링의 대상이 될 수 도 있다.
• Set 객체는 요소의 순서에 의미를 갖지 않지만 Set 객체를 순회하는 순서는 요소가 추가된 순서를 따른다.

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

for (const value of set) {
  console.log(value); // ✅ 1, 2, 3
}

 

8. 집합 연산

• Set 객체는 합집합, 교집합, 차집합 등의 집합 연산을 수행할 수 있다.

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

// 합집합
const union = new Set([...setA, ...setB]);

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

// 교집합
const intersection = new Set([...setA].filter(x => setB.has(x)));

console.log(intersection); // ✅ Set { 3 }

// 차집합
const difference = new Set([...setA].filter(x => !setB.has(x)));

console.log(difference); // ✅ Set { 1, 2 }

---

2. Map

• Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다.

객체와 Map 객체의 차이점

1. Map 객체의 생성

• Map 객체는 Map 생성자 함수(new Map())을 사용하여 생성할 수 있다.
  Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다.

const map = new Map();

console.log(map); // ✅ Map(0) {}

• Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다.
  이때 인수로 전달되는 배열은 [key, value] 형태의 쌍으로 이루어진 배열이어야 한다. 각 쌍이 Map 객체의 키와 값으로 설정돤다.
• 배열이나 이터러블 객체를 인수로 전달하면 초기값을 설정할 수 있다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(map); // ✅ Map { 'key1' => 'value1', 'key2' => 'value2' } // 초기값 설정

• Map 생성자 함수의 인수로 전달한 이터러블에 중복된 키를 갖는 요소가 존재하면 값이 덮여쓰여진다.
  따라서 Map 객체에는 중복된 키를 갖는 요소가 존재할 수 없다.

const map1 = new Map([['key1', 'value1'], ['key1', 'value2']]);

console.log(map); // ✅ Map(1) { 'key1' => 'value2'}

 

2. 요소 개수 확인

• Map 객체의 요소 개수를 확인할 때는 Map.prototype.size 프로퍼티를 사용한다.
• size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티다.
  따라서 size 프로퍼티에 숫자를 할당하여 Map 객체의 요소 개수를 변경할 수 없다.(무시된다)

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(map.size); // ✅ 2

 

3. 요소 추가

• Map 객체에 요소를 추가할 때는 Map.prototype.set 메서드를 사용한다.
• set 메서드는 새로운 요소가 추가된 Map 객체를 반환한다. 따라서 set 메서드를 호출한 후 연속적으로 호출할 수 있다.
  (≒ Set 객체의 add 메서드)

const map = new Map();

map.set('key1', 'value1').set('key2', 'value2');

console.log(map); // ✅ Map { 'key1' => 'value1', 'key2' => 'value2' }

• 객체는 문자열 또는 심벌 값만 키로 사용할 수 있지만, Map 객체는 키 타입에 제한이 없다. 따라서 객체를 포함한 모든 값을 키로 사용할 수 있다.

const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

// 객체도 키로 사용할 수 있다.
map.set(lee, '29').set(kim, '30');

console.log(map); // ✅ Map(2) { { name: 'Lee' } => '29', { name: 'Kim' } => '30'}

 

4. 요소 취득

• Map 객체에서 특정 요소를 취득하려면 Map.prototype.get 메서드를 사용한다.
• get 메서드의 인수로 키를 전달하면 Map 객체에서 인수로 전달한 키를 갖는 값(value)을 반환한다.
• Map 객체에서 인수로 전달한 키를 갖는 요소가 존재하지 않으면 undefined를 반환한다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(map.get('key1')); // ✅ 'value1'
console.log(map.get('key3')); // ✅ undefined

 

5. 요소 존재 여부 확인

• Map 객체에서 특정 요소가 존재하는지 확인하려면 Map.prototype.has 메서드를 사용한다.
• has 메서드는 특정 요소의 존재 여부를 나타내는 불리언 값을 반환한다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(map.has('key1')); // ✅ true
console.log(map.has('key3')); // ✅ false

 

6. 요소 삭제

• Map 객체에서 요소를 삭제하려면 Map.prototype.delete 메서드를 사용한다.
• delete 메서드는 삭제 성공 여부를 나타내는 불리언 값을 반환한다.
• delete 메서드는 set 메서드와 달리 연속적으로 호출할 수 없다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

map.delete('key1');

console.log(map); // ✅ Map { 'key2' => 'value2' }

 

7. 요소 일괄 삭제

• Map 객체에서 요소를 일괄 삭제하려면 Map.prototype.clear 메서드를 사용한다.
• clear 메서드는 언제나 undefined 를 반환한다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

map.clear();

console.log(map); // ✅ Map(0) {}

8. 요소 순회

• Map 객체에 요소를 일괄 순회하려면 Map.prototype.forEach 메서드를 사용한다.
• Array.prototype.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체(옵션)를 인수로 전달한다. 이때 콜백 함수는 3개의 인수를 전달 받는다.
  • 첫 번째 인수: 현재 순회 중인 요소값
  • 두 번째 인수: 현재 순회 중인 요소값
  • 세 번째 인수: 현재 순회 중인 Map 객체 자체

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

map.forEach((value, key) => {
  console.log(`${key}: ${value}`); // ✅ key1: value1, key2: value2
});

• Map 객체는 이터러블이므로 for...of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링의 대상이 될 수 도 있다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`); // ✅ key1: value1, key2: value2
}

• Map 객체는 이터러블(iterable)이면서 동시에 이터레이터(iterator)인 객체를 반환하는 메서드를 제공한다.
  이는 Map 객체를 순회할 때 매우 유용하다. Map 객체가 제공하는 이러한 메서드들에는 keys(), values(), entries()가 있다.
• keys()
  keys() 메서드는 Map 객체의 모든 키를 포함하는 이터러블이면서 이터레이터인 객체를 반환한다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

const keys = map.keys();

for (const key of keys) {
  console.log(key); // ✅ 'key1', 'key2', 'key3'
}

• values()
  values() 메서드는 Map 객체의 모든 값을 포함하는 이터러블이면서 이터레이터인 객체를 반환한다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

const values = map.values();

for (const value of values) {
  console.log(value); // ✅ 'value1', 'value2', 'value3'
}

• entries()
  entries() 메서드는 Map 객체의 모든 [키, 값] 쌍을 포함하는 이터러블이면서 이터레이터인 객체를 반환한다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

const entries = map.entries();

for (const [key, value] of entries) {
  console.log(`${key}: ${value}`); // ✅ 'key1: value1', 'key2: value2', 'key3: value3'
}​