자바스크립트 맵 객체 (Javascript Map Object)

Map이란?

Map객체는 Key와 Value로 이루어진 자료구조입니다.

Key는 고유한 값을 가져야 하는 특징을 가지고 있습니다.

Map의 구조

자바스크립트에서의 Map객체는 Key와 Value을 서로 매핑시켜 저장하고, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 해줍니다.

ES6부터 도입된 문법이며 ES5에서는 사용할 수 없습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections

키기반의 컬렉션 - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Map - JavaScript | MDN

 

 

Map 객체 사용 방법

객체 생성

빈 Map 객체를 생성하는 방법입니다.

const map = new Map();

선언할 때, 미리 데이터를 저장할 수 있습니다.

값을 저장할 때는 [key, value] 형식으로 저장하는 것이 일반적입니다.

const map = new Map([
  ['1', 'value1'],
  ['2', 'value2'],
  ['3', 'value3']
]);

결과

만약 Map 객체에 중복되는 key를 가진 데이터를 추가하면 어떻게 될까요?

Map 객체 특성상 key는 중복될 수 없기 때문에, 같은 Key를 가진 데이터가 들어오면 나중에 들어온 데이터 값이 이전 데이터 값을 덮어 씌웁니다.

const map = new Map([
  ['1', 'value1'],
  ['2', 'value2'],
  ['2', 'value2-1'],
  ['3', 'value3']
]);

value2가 사라지고 value2-1이 들어간 모습을 볼 수 있다.

자바스크립트 특성상 key와 value는 둘 다 객체가 될 수 있습니다.

value에 객체가 들어간다면 많은 데이터를 자유롭게 저장하고, 쉽게 접근할 수 있습니다.

하지만 key에 객체가 들어오면 아무리 같은 내용의 객체라도 고유함을 가질 수 없습니다.

그래서 key에 객체가 들어간다면 중복된 내용이 들어갈 수밖에 없습니다.

Map 객체에는 value가 객체가 될 수 있다.

만약 key에 객체가 들어간다면, key에서 중복을 인식할 수 없다.

 

 

 

Map 객체의 속성

Map.prototype.size

map에 저장된 데이터의 수를 가져옵니다.

 

 

Map 객체의 함수

Map.prototype.clear()

Map 객체에 저장된 모든 데이터를 지웁니다.

 

Map.prototype.delete(key)

key로 찾은 데이터가 있다면 그 데이터를 지우고 true를 반환합니다.
만약에 key로 찾고자 하는 데이터가 없으면 false를 반환합니다.

 

Map.prototype.get(key)

key값으로 찾은 데이터가 있다면 value를 반환하고, 만약 없으면 undefined를 반환합니다.

 

Map.prototype.has(key)

key값으로 찾은 데이터 유무를 boolean으로 반환합니다.
데이터가 있다면 true, 없다면 false

 

Map.prototype.set(key, value)

입력한 key에 value를 저장합니다.
이미 key가 있다면 value를 덧씌웁니다.

 

Map.prototype.keys()

Map 객체에 저장된 모든 데이터의 key를 반환합니다. (반환 형식 : MapIterator 객체)

 

Map.prototype.values()

Map 객체에 저장된 모든 데이터의 value를 반환합니다. (반환 형식 : MapIterator 객체)

 

Map.prototype.entries()

Map 객체에 저장된 모든 데이터의 [key, value]를 반환합니다. (반환 형식 : MapIterator 객체)

 

Map.prototype.forEach(callbackFn[, thisArg])

Map 객체에 있는 데이터를 순차적으로 호출하여 콜백함수를 실행합니다.

var arr = [
  ['a', 'aaa'],
  ['b', 'bbb'],
  ['c', 'ccc']
];

var map = new Map(arr);

// forEach에 콜백함수 파라미터는 value, key 순서임.
map.forEach(function(value, key) {
  console.log(`key : ${key} | value : ${value}`);
});

 

Map 응용

Map 객체 2개를 합치는 방법 (How to concatenate map object)

아래의 예시와 같이 2개의 배열로 각각 map이 만들어졌는데, 2개의 map을 하나의 map으로 합치는 방법을 보여줍니다.

 

아래 arr1과 arr2에는 같은 key: "3"를 가지고 있는 객체가 있습니다. 이 배열들로 각각 map이 만들어집니다.

두 map 각각 key: "3"인 객체를 가지고 있고, 두 map이 하나의 map으로 concatenate 된다면?

합쳐진 map에는 key: "3"인 객체가 하나만 있어야 합니다.

const arr1 = [
	{key: "1", value: "aa"},
	{key: "1", value: "aa"},
	{key: "2", value: "bb"},
	{key: "2", value: "bb"},
	{key: "3", value: "cc"},
]

const arr2 = [
    {key: "4", value: "fgg"},
    {key: "4", value: "fgg"},
    {key: "5", value: "ert"},
    {key: "5", value: "ert"},
    {key: "3", value: "cc"},
]

// array to map
const arrMap1 = arr1.reduce((map, obj) => {
    map.set(obj.key, obj.value);
    return map;
}, new Map);

// array to map
const arrMap2 = arr2.reduce((map, obj) => {
    map.set(obj.key, obj.value);
    return map;
}, new Map);


console.log(arrMap1);
console.log(arrMap2);

// map 객체 concat
var concatenated = new Map([...arrMap1].concat([...arrMap2]));

console.log(concatenated);

두 map이 하나의 map으로 concatenate 되었다.

실제로 두 map이 합쳐지면서 key: "3"인 객체는 하나가 되었습니다.

이렇게 map을 사용하여 중복을 방지할 수 있다는 것을 볼 수 있습니다.

 

 

Object와 Map의 차이점

이쯤 되면 "Object에도 key와 value 방식으로 저장할 수 있는데, 왜 Map을 사용할까?" 하고 생각하게 됩니다.

솔직히 성능상의 큰 이점은 없습니다. 자바스크립트의 기초는 Object이기 때문입니다.

이럴때 Object

• 데이터를 json으로 변환하여 작업하는 경우가 많으면 Map이 아닌 Object를 사용하세요.
  Map 객체는 json으로 변환할 수 없습니다.
• 간단한 데이터 구조를 선택할 때는, Object를 사용하세요.
  Map은 생성자를 사용하여 객체를 만들지만, Object는 가장 기초적이고 리터럴 단계입니다.
  리터럴을 사용하는 것이 생성자를 통한 객체 생성보다 훨씬 빠릅니다.

이럴땐 Map

데이터 접근, 수정, 삭제 등에서는 Object보다 약간 좋은 성능을 낼 수 있습니다.

• Map 객체는 key가 unique 한 특징을 가지고 있습니다.
  그래서 Map 객체에서 key는 중복되지 않는 특징을 가지고 있습니다.
• Map 객체는 get, set, has와 같은 함수로 데이터를 쉽게 접근하고 검사할 수 있습니다.
• Map은 Object와 달리 키의 순서를 유지하고 Map은 iteration를 염두에 두고 구축되었습니다.
  반복 또는 요소 순서가 매우 중요한 경우 Map를 사용하면 안정적인 성능을 보장할 수 있습니다.

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps

Map - JavaScript | MDN

https://medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373

ES6 — Map vs Object — What and when?