Map 활용하기

Map(맵)

map은 key, value 형식의 데이터를 저장하여 객체와 유사하지만 key의 형태로 객체(오로지 문자열)과 다르게 모든 타입이 가능

문법

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

// 객체는 키를 문자형으로 변환한다는 걸 기억하고 계신가요?
// 맵은 키의 타입을 변환시키지 않고 그대로 유지합니다. 따라서 아래의 코드는 출력되는 값이 다릅니다.
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

주요 메서드

• new Map() – 맵을 만듭니다.
• map.set(key, value) – key를 이용해 value를 저장합니다.
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
• map.delete(key) – key에 해당하는 값을 삭제합니다.
• map.clear() – 맵 안의 모든 요소를 제거합니다.
• map.size – 요소의 개수를 반환합니다.

1. map 반복작업

map.keys(), map.values(), map.entries()의 메서드를 통해 map의 반복작업가능

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 ...
}

for.Each문법도 지원

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

2. 일반 객체를 Map으로 변환하기

평범한 객체를 가지고 맵을 만들고 싶다면 내장 메서드 Object.entries(obj)를 활용

Object.entries(obj)

• 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj)) <-- [["name","John"], ["age", 30]] 반환
alert( map.get('name') ); // John

맵은 key, value 값을 배열로 가지고 있음

3. Map을 객체로 바꾸기

Map을 평범한 객체로 만들고 싶다면 내장 메서드 Object.fromEntries를 활용

Object.fromEntries

• 각 요소가 [key, value] 쌍인 배열을 객체로 바꿔서 리턴

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

let obj = Object.fromEntries(map) <-- {'banana' : 1 }, {'orange' : 2 }, ...
map.entries()를 호출하면 맵의 [키, 값]을 요소로 가지는 이터러블을 반환