Set과 Map

이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.

Set

중복되지 않은 유일한 값들의 집합을 말한다. 수학적 집합을 구현하기 위한 자료구조이며 이터러블이다. 또한 배열과 차이점은 다음과 같다.

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

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

size 프로퍼티

Set 객체의 요소 개수를 확인할 때 사용한다.

new Set([1,1,2,2,3,3]).size; // 3

add 메서드

Set 객체에 요소를 추가할 때 사용한다.

const set = new Set();

set.add(1); // Set(1) {1}
set.add(2).add(3); // Set(3) {1,2,3}
set.add(3); // Set(3) {1,2,3}

add 메서드는 연속적으로 호출이 가능하며 중복된 요소의 추가는 무시된다.

has 메서드

Set 객체에 특정 요소가 존재하는 확인할 때 사용한다.

• 반환값 : boolean 타입

new Set('hello').has('h'); // true

delete 메서드

Set 객체의 특정 요소를 삭제할 때 사용한다. 연속 호출이 가능하다.

• 반환값 : 삭제 성공 여부를 나타내는 boolean 타입

new Set([1,2,3]).delete(1); // Set(2) {2,3}

clear 메서드

Set 객체의 모든 요소를 일괄 삭제할 때 사용한다.

반환값 : undefined

new Set([1,2,3]).clear(); // Set(0) {}

forEach 메서드

Set 객체를 순회할 때 사용한다. Array.prototype.forEach 메서드와 유사하게 동작한다.

• 반환값 : undefined

// 첫 번째 요소 : 현재 순회 중인 요소 값
// 두 번째 요소 : 첫 번째 요소와 동일
// 세 번째 요소 : 현재 순회 중인 Set 객체
new Set([1,2,3]).forEach((el, el2, set) => console.log(el, el2, set));
// 1 1 Set(3) {1,2,3}
// 2 2 Set(3) {1,2,3}
// 3 3 Set(3) {1,2,3}

위와 같이 Set 프로퍼티와 메서드를 사용하여 다양한 집합 연산을 구현할 수 있다.

Map

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

• 키로 객체를 포함한 모든 값을 사용할 수 있음
• 이터러블임
• 요소 개수 확인을 size 프로퍼티를 사용하여 확인 가능

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map); // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

만약 중복된 키를 갖는 요소가 존재하면 마지막 값으로 덮어씌워진다. 즉, Map 객체에서 중복된 키를 갖는 요소는 존재할 수 없다.

size 프로퍼티

Map 객체의 요소 개수를 확인할 때 사용한다.

new Map([['key1', 'value1'], ['key2', 'value2']]).size; // 2

set 메서드

Map 객체에 요소를 추가할 때 사용한다.

new Map().set('key1', 'value1').set('key2', 'value2'); // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

Set 객체와 마찬가지로 연속 호출이 가능하며 중복된 키 요소를 추가하면 에러없이 값이 덮어씌워진다.

참고로 Map 객체는 NaN을 모두 같다고 평가한다.

get 메서드

Map 객체에서 특정 요소를 취득할 때 사용한다.

• 인수 : Map 객체의 키
• 반환값 : 인수로부터 받은 키에 맞는 값 또는 undefined

new Map([['key1', 'value1'], ['key2', 'value2']]).get('key1'); // 'value1'

has 메서드

Map 객체에서 특정 요소(키)가 존재하는지 확인할 때 사용한다.

• 반환값 : boolean 타입

new Map([['key1', 'value1'], ['key2', 'value2']]).has('key1'); // true

delete 메서드

Map 객체에서 특정 요소를 삭제할 때 사용한다. Set 객체와 달리 연속 호출은 불가능하다.

• 반환값 : 삭제 성공 여부를 나타내는 boolean 타입

new Map([['key1', 'value1'], ['key2', 'value2']]).delete('key1'); // true

// Map(1) {'key2' => 'value2'}

clear 메서드

Map 객체의 요소를 일괄 삭제할 때 사용한다.

반환값 : undefined

new Map([['key1', 'value1'], ['key2', 'value2']]).clear(); // undefined

// Map(0) {}

forEach 메서드

Map 객체의 요소를 순회할 때 사용한다. Array.prototype.forEach 메서드와 유사하게 동작한다.

• 반환값 : undefined

// 첫 번째 요소 : 현재 순회 중인 값
// 두 번째 요소 : 현재 순회 중인 키
// 세 번째 요소 : 현재 순회 중인 Map 객체
new Map([['key1', 'value1'], ['key2', 'value2']])
  .forEach((value, key, map) => console.log(value, key, map));
// value1 key1 Map(2) {'key1' => 'value1', 'key2' => 'value2'}
// value2 key2 Map(2) {'key1' => 'value1', 'key2' => 'value2'}

이터러블이면서 이터레이터인 객체를 반환하는 메서드

Map 객체는 이터러블이다. 또한 이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드를 제공한다.

• Map.prototype.keys : 키를 값으로 갖는 이터러블이면서 이터레이터인 객체를 반환
• Map.prototype.values : 요소값을 값으로 갖는 이터러블이면서 이터레이터인 객체를 반환
• Map.prototype.entries : 키와 요소값을 값으로 갖는 이터러블이면서 이터레이터인 객체를 반환

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

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

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

for (const entry of map.entries()) {
  console.log(entry); // (2) ['key1', 'value1'], (2) ['key2', 'value2']
}