Web/JavaScript

[JavaScript] 모던 자바스크립트 Deep Dive 37장 - Set과 Map

어징베 2023. 2. 8. 19:24


1. Set

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

  • 동일한 값을 포함할 수 없다.
  • 요소 순서에 의미가 없다.
  • 인덱스로 요소에 접근할 수 없다.

1-1 Set 객체의 생성

Set 생성자 함수로 생성

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

배열에서 중복된 요소 제거

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

// Set 이용
const uniq2 = array => [...new Set(array)];
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [ 2, 1, 3, 4 ]

1-2 요소 개수 확인

Set.prototype.size 프로퍼티 사용

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

1-3 요소 추가

Set.prototype.add 메서드 사용

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

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

1-4 요소 존재 여부 확인

Set.prototype.has 메서드 사용

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false

1-5 요소 삭제

Set.prototype.delete 메서드 사용

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

1-6 요소 일괄 삭제

Set.prototype.clear 메서드 사용

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

1-7 요소 순회

Set.prototype.forEach 메서드 사용

const set = new Set([1, 2, 3]);
set.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 }

2. Map

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

구분 객체 Map 객체
키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값
이터러블 X O
요소 개수 확인 Object.keys(obj).length map.size

2-1 Map 객체의 생성

map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

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

2-2 요소 개수 확인

Map.prototype.size 프로퍼티 사용


2-3 요소 추가

Map.prototype.set 메서드 사용


2-4 요소 취득

Map.prototype.get 메서드 사용


2-5 요소 존재 여부 확인

Map.prototype.has 메서드 사용


2-6 요소 삭제

Map.prototype.delete 메서드 사용


2-7 요소 일괄 삭제

Map.prototype.clear 메서드 사용


2-8 요소 순회

Map.prototype.forEach 메서드 사용