ES6 - Map

Map 이란?

• key-value의 쌍으로 이루어진 컬렉션
• key를 사용해서 value를 get, set할 수 있다.
• key들은 중복될 수 없다. 하나의 key에는 하나의 value만 가능하다.
• 모든 타입을 key 또는 value 로 사용할 수 있다.
• iterable 하다.

Map과 Object의 차이점

• Object의 key는 String과 Symbol만 가능하지만, Map은 어떤 값도 가능하다.
• Object에서는 크기를 추적해서 알 수 있지만, Map은 size 프로퍼티를 통해 손쉽게 얻을 수 있다.
• Object에서 key, value를 쌍으로 가진 이차원 배열을 Object로 만드려면 reduce를 사용해야 하지만, Map은 생성자 argument에 이차원 배열을 넣어주면 바로 생성이 가능하다.

// Object
const arrayToObject = (array) =>
  array.reduce(
    (acc, row) => ((acc[row[0]] = [...(acc[row[0]] || []), row[1]]), acc),
    {}
  );

// Map
const newMap = new Map(mapArray);

프로퍼티

size

Map의 size를 구할 수 있다.

메서드

clear()

Map의 모든 Key, Value의 쌍을 제거한다.

delete(key)

key에 해당하는 값이 있을 경우, true를 반환하고 해당 key, value 쌍을 삭제한다.
key에 해당하는 값이 없을 경우, false를 반환한다.

get(key)

key에 해당하는 값이 있을 경우 value를 반환한다. 없을 경우 undefined를 반환한다.

has(key)

key에 해당하는 값이 있을 경우 true, 없을 경우 false를 반환한다.

set(key, value)

Map에 key, value 쌍을 등록한다.

keys()

Map의 key들을 등록 순서에 맞게 배열로 반환한다.

values()

Map의 value들을 등록 순서에 맞게 배열로 반환한다.

entries()

Map의 key, value들을 등록 순서에 맞게 [key, value]로 이차원 배열로 반환한다.

forEach(callbackFn[, thisArg])

Map의 key, value들을 삽입 순서에 맞게 한번씩 호출한다.

반복 방법

Map은 Object와 다르게 iterable한 구조이기 때문에 반복 방법이 다양하다.

Object와 다르게 Map은 배열과 Map의 자유로운 형태 변환이 가능하다.
[key, value]의 이차원 배열을 Map 생성자의 파라미터에 넣으면 Map 생성이 손쉽게 가능하다.

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
const arr = map.entries(); // [['a', 1], ['b', 2], ['c', 3]]
const newMap = new Map(arr); // { 'a' => 1, 'b' => 2, 'c' => 3 }

for..of

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

for (const [key, value] of myMap) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

forEach()

myMap.forEach(function(value, key) {
  console.log(key + ' = ' + value)
})
// 0 = zero
// 1 = one

Array와 Map의 관계

const kvArray = [['key1', 'value1'], ['key2', 'value2']]

// Map 생성자를 사용하여 키, 값 배열을 Map으로 변환
const myMap = new Map(kvArray)

myMap.get('key1') // value

// Array.from()을 사용하여 Map을 키, 값 배열로 변환
console.log(Array.from(myMap)) // kvArray와 동일한 배열을 표시

// 스프레드 연산자를 이용한 간결한 방법
console.log([...myMap])

Map 병합

Map과 Map 병합

const first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])

const second = new Map([
  [1, 'uno'],
  [2, 'dos']
])

const merged = new Map([...first, ...second])

console.log(merged.get(1)) // uno
console.log(merged.get(2)) // dos
console.log(merged.get(3)) // three

Map과 Array 병합

const first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])

const second = new Map([
  [1, 'uno'],
  [2, 'dos']
])

// Merge maps with an array. The last repeated key wins.
const merged = new Map([...first, ...second, [1, 'eins']])

console.log(merged.get(1)) // eins
console.log(merged.get(2)) // dos
console.log(merged.get(3)) // three

---

참조

MDN-Map
ES6 Map(), Set()