[ES6+] Map vs Object

이 글에서는 ES6에서 새롭게 도입된 Map에 대해서 알아보고, 이것이 Object Literal과는 무슨 차이가 있는지 살펴보도록 하겠습니다.

(1) Map?

Map은 대부분 개발자에게 익숙한 단어일 것입니다. ECMA Script 2015(ES6)에서 도입된 Map 역시 우리가 익히 알고 있는, Key와 Value의 쌍으로 이루어진 Collection입니다. 

기본 구문은 아래와 같습니다. 

var map = new Map([Iterable]);
 
map.set("keyString", "valueString");
map.get("keyString"); //result : valueString
 
map.set({}, "객체를 키로 하는 경우의 value")
map.get({}) //result : 객체를 키로 하는 경우의 value

여기서 Iterable에는 요소가 키-값의 쌍으로 이루어진 Array나 순회 가능한 객체가 들어갈 수 있습니다.

 

(2) Object?

Javascript는 객체 기반의 스크립트 언어이니만큼 자바스크립트를 이루는 거의 모든 것들이 객체라고 볼 수 있습니다. Object는 Property와 Method를 가지며, 여기에서 property가 Map의 Key 역할을 한다고 생각하면 됩니다. Object에서 property는 하나의 값과 연결되며 충돌이 발생하지 않도록 유의해야 합니다. 또한 Object는 built-in prototype을 가집니다. 

var obj = {
    "key1" : "value1"
    "key2" : "value2"
}
 
obj.key1; // result : value1
obj.toString(); // result : [object object]
obj.toString = "value3";
obj.toString(); // Uncaught TypeError : obj.toString is not a function 발생

 

(3) 무엇이 다른가?

정의상으로는 Object와 Map의 기본적인 콘셉트는 같습니다. 데이터를 저장하기 위해 Key와 Value를 사용한다는 점에서 말입니다. 실제로 Map이 등장하기 이전에는 Object가 Map의 역할을 수행했습니다. 값에 키를 할당할 수 있고, 키를 사용하여 값을 얻을 수 있으며, 키를 삭제하거나 키가 존재하는지 확인할 수 있는 등 대부분 Map의 기능을 제공하기 때문입니다.

그렇다면 어째서 ES6에서 Map이 추가되게 된 것일까요?

위 그림에서 볼 수 있듯이 Object와 Map은 유사한 듯 보이지만 분명하게 차이점이 존재합니다.

• 사용 가능한 Key의 타입 
  • Object : String, Symbol
  • Map : Any (함수, 객체, 원시 자료형 등 어떤 값이든 사용 가능)
• 순회
  • Object :  Key의 배열을 얻어 이 배열을 이용하여 순회
  • Map : built-in iterable. 바로 순회 가능

//Object
{id: 1, name: "test"}
for (var key in obj){
   console.log(`key: ${key}, value: ${obj[key]}`);
   //key: id, value: 1
   //key: name, value: test
}
//또는
Object.keys(obj).forEach((key)=> console.log(`key: ${key}, value: ${obj[key]}`));
//key: id, value: 1
//key: name, value: test
 
//Map
for (const [key,value] of map){
    console.log(`key: ${key}, value: ${value}`);
    //key: 2, value: 3
    //key: 4, value: 5
}
//또는
map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));
//key: 2, value: 3
//key: 4, value: 5

• 크기
  • Object : 직접 판별해야 함
  • Map : size 속성을 이용하여 쉽게 얻을 수 있음

//Object
Object.keys(obj).length
 
//Map
map.size

• 정렬
  • Object : 안 함
  • Map : 삽입 순으로 정렬 
• Object는 프로토타입을 가지기 때문에, 주의하지 않으면 Key가 충돌

 

따라서 Map과 Object는 사용처가 조금 다릅니다. 단순히 위의 차이점만 보았을 때는 마치 Map이 Object보다 더 많은 장점이  있는 것처럼 보이지만, 어떤 경우에는 Object가 더 나은 성능을 보일 때도 있습니다.

 

(4) 언제 써야 하는가?

그렇다면 어떨 때 무엇을 써야 하는 걸까요? 

Object

• 데이터를 저장하기 위한 간단한 구조이며, Key가 String이거나 integer(또는 Symbol)인 경우 : Map을 생성하는 것보다 기본 오브젝트를 생성하는 데 훨씬 적은 시간이 걸리기 때문.
• 각각의 property/element가 별도의 로직이 적용되어야 하는 경우 
• JSON으로/에서 변환해야 하는 경우(Map은 현재 지원하지 않음)

Map

• 키의 추가/삭제가 빈번한 경우 : Map은 순수한 Hash이고, Object는 그보다 복잡하기 때문에 속도가 Map이 더 뛰어남. 또한 Object property를 삭제하는 delete 연산은 몇 가지 성능 이슈가 존재함
• 키의 순서가 보장되어야 할 때 : Map은 iteration 기반으로 만들어졌기 때문에 기본적으로 순서를 유지
• 데이터의 크기가 클 때 : 더 나은 성능을 보임
• 런타임 시점까지 key가 정해지지 않은 경우 
• key와 value가 각각 같은 타입일 경우 

 

 

[references]

What's the Difference Between Map and a Simple Object in JavaScript?

Beyond Java

What You Should Know About ES6 Maps

What You Should Know About ES6 Maps | Hacker Noon

ES6 — Map vs Object — What and when?

ES6 — Map vs Object — What and when?

Map vs Object in JavaScript

Map vs Object in JavaScript

Map - JavaScript

Map