JavaScript - Map & Set

Map

• Map

  • 키가 있는 데이터를 저장하는 자료구조
  • 키에 다양한 자료형을 허용함

• Map의 주요 메서드

  • new Map() : Map을 생성함
  • map.set(key, value) : key에 해당하는 값으로value를 저장함
  • map.get(key) : key에 해당하는 값을 반환함
  • map.has(key) : key가 존재하면 true, 존재하지 않으면 false를 반환함
  • map.delete(key) : key에 해당하는 값을 삭제함
  • map.clear() : Map 안의 모든 요소를 제거함

let map = new Map();

map.set('1', 'str1'); // key 타입: string
map.set(1, 'num1'); // key 타입: number
map.set(true, 'bool1'); // key 타입: boolean

alert(map.get('1'); // 'str1'
alert(map.get(1)); // 'num1'
alert(map.size); // 3

• Map은 객체와 달리 키의 타입을 문자형으로 변환하지 않고 그대로 유지함

• Map의 값을 접근할 때는 Map 전용 메서드인 set, get 등을 사용해야 함

  • map[key]를 사용할 경우, Map을 객체처럼 취급하게 되서 제약이 생김

• Map은 객체형 key 허용함

let john = { name: 'John' };

let visitsCountMap = new Map();

visitsCountMap.set(john,123);

alert(visitsCountMap.get(john)); // 123

let john = { name: 'John' };

let visitsCountObj = {};

visitsCountObj[john] = 123;
// john 키는 문자형으로 변환하여 '[object obect]'가 됨
alert(visitsCountObj['[Object Object]']; // 123

• 객체는 모든 키를 문자형으로 변환하기 때문에, 객체형 key를 사용할 수 없음

Map이 키를 비교하는 방식

• Map은 SameValueZero라 불리는 알고리즘을 사용해 값의 등가 여부를 확인함
  - 이 알고리즘은 일치 연산자 ===와 거의 비슷함
  • NaN과 NaN을 같다고 취급하므로, NaN을 키로 사용할 수 있음
  • 이 알고리즘은 수정하거나 커스터마이징 할 수 없음

체이닝(chaining)

• map.set을 호출할 때마다 Map 자신이 반환됨
  - 이를 이용하여 map.set을 체이닝(chaining) 할 수 있음

map.set('1', 'str1')
	.set(1, 'num1')
	.set(true, 'bool1');

Map의 요소에 반복 작업하기

• 다음 메서드를 사용해 Map의 각 요소에 반복 작업을 할 수 있음
  • map.keys() : Map의 각 요소의 key를 담은 반복 가능한(iterable) 객체를 반환함
  • map.values() : Map의 각 요소의 value를 담은 반복 가능한(iterable) 객체를 반환함
  • map.entries() : Map의 각 요소의 [key, value]를 한 쌍으로 담은 반복 가능한(iterable) 객체를 반환함

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// 키(vegetable)를 대상으로 순회함
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// 값(amount)을 대상으로 순회함
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회함
for (let entry of recipeMap) { // recipeMap.entries()와 동일
  alert(entry); // cucumber,500 ...
}

Map은 삽입 순서를 기억함

• Map은 값이 삽입된 순서대로 순회됨
• 반면에 객체는 property 삽입 순서를 기억하지 못함

• Map은 내장 메서드 forEach를 지원함

// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 ...
});

Map을 Object로 바꾸기

• Object.fromEntries()
  • 각 요소가 [key, value] 쌍인 배열을 객체로 바꿔주는 메서드
  • 이 메서드를 사용하여 Map을 객체로 바꿔줄 수 있음

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

// obj = { banana: 1, orange: 2, meat: 4 }
let obj = Object.fromEntries(map.entries());
alert(obj.orange); // 2

• map.entries()를 호출하면 Map의 [key, value] 쌍을 요소로 같는 이터러블(iterable)을 반환함
  • Map에서의 일반적인 반복은 map.entries()를 사용했을 때와 같은 key-value 쌍을 반환하므로 map.entries() 대신 map을 인수로 넣어도 됨

Set

• Set

  • 중복을 허용하지 않는 값들을 모아놓은 특별한 컬렉션(collection)
  • 키가 없는 값이 저장됨

• Set의 주요 메서드

  • new Set(iterable) : 주어진 iterable 객체(주로 배열)의 값을 복사해서 Set을 만듬
  • set.add(value) : 값을 추가하고 set 자신을 반환함
  • set.delete(value) : 값을 제거함, 호출 시점에 set에 값이 있으면 true를 없으면 false를 반환함
  • set.has(value) : set에 값이 있으면 true를 없으면 false를 반환함
  • set.clear() : set을 비움
  • set.size : set의 값의 개수를 반환함

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장됨
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // John, Pete, Mary 순으로 출력됨
}

Set의 값에 반복 작업하기

• for...of나 forEach를 사용하여 Set의 값을 대상으로 반복 작업을 할 수 있음

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert(value);

// forEach를 사용해도 동일하게 동작함
set.forEach((value, valueAgain, set) => {
  alert(value);
});

• Set에서 forEach를 사용할 경우, 첫 번째와 두 번째 인자로 value를 받고 세 번째 인자로 set을 받는 이유는 Map과의 호환성 때문임

  • Map을 Set으로 Set을 Map으로 교체하기 쉽게 하기 위해 forEach의 콜백 함수가 세 개의 인자를 받음

• Set의 반복 작업을 위한 메서드

  • set.keys() : set 내의 모든 값을 포함하는 iterable 객체를 반환함
  • set.values() : set.keys()와 동일한 작업을 함, Map과의 호환성을 위해 만들어짐
  • set.entries() : set 내의 각 값을 [value, value] 쌍을 요소로 갖는 iterable 객체를 반환함, Map과의 호환성을 위해 만들어짐

Summary

• Map : 키가 있는 값이 저장된 컬렉션
• Set : 중복이 없는 값을 저장할 때 쓰이는 컬렉션
• Map과 Set에 반복 작업을 할 때, 해당 컬렉션에 요소나 값을 추가한 순서대로 반복 작업이 수행됨
• 그러나 컬렉션 내 요소나 값을 재정렬하거나 인덱스를 사용하여 특정 요소나 값을 가져오는 것은 불가능함