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 메서드 사용