JavaScript | FP && ES6+ | 맵 객체(Map Object)

 

 

굳이 객체, 맵 객체에 대해서 정리하는 글을 써야 되나... 싶었지만 매번 사용하면서 '메소드가 뭐였지?' 하면서 검색하는 것도 현타 오고, 무엇보다도 하나를 알더라도 확실하게 알기로 다짐했기 때문에 간단한거라도 디테일하게 짚고 넘어가자구!!

 

Map Object

맵 객체(Map object)는 키-값(key-value)의 쌍을 보유하고 키의 원래 삽입 순서를 기억한다. 객체 내의 모든 값은 키 또는 값으로 사용할 수 있다.

 

또한 맵은 이터러블이기 때문에 for ... of 문을 이용하며 [key, value]의 값을 반환한다. 이때 객체처럼 for ... in을 사용하면 undefined가 출력된다.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

for (const i of map1) {
  console.log(i);
}
/*
* expected output
(2) ['a', 1]
(2) ['b', 2]
(2) ['c', 3]
*/

 

 

Objects vs maps

객체와 맵 객체 모두 키-값을 설정하고 값을 검색, 키 삭제 등을 하는 역할은 비슷하다. 그러면 두 개는 뭐가 어떻게 다를까? docs에 나온 표를 참고!

	Map	Object
Accidental Keys	Map은 기본적으로 키를 포함하지 않음 명시적으로 입력된 것만 포함	프로토타입이 있으므로 자신의 키와 충동할 수 있는 기본 키가 포함되어 있음
Key Types	키는 모든 값(함수, 객체 등)이 될 수 있음	오직 String or Symbol
Key Order	entries, key, value 를 삽입한 순서대로 반복함	복잡함. MDN docs 표 참조
Size	map1.size 로 쉽게 찾을 수 있음	수동으로 직접 검색해야 함
Iteration	Map은 이터러블임	Object는 이터레이션 프로토콜로 구현되어 있지 않음
Performance	키-값의 추가 및 제거가 빈번하게 사용될 때 더 나은 성능을 보임	키-값의 빈번한 추가, 제거에 최적화 되어 있지 않음
Serialization and parsing	No native support for serialization or parsing. How do you JSON.stringify an ES6 Map?	Native support for serialization from Object to JSON, using JSON.stringify(). Native support for parsing from JSON to Object, using JSON.parse().

즉 맵 객체는 객체 내의 키-값의 프로퍼티를 자주 업데이트하는 상황에 더 적합하다고 보면 될 것 같다. 사실 아직까지 내가 다루는 데이터들의 크기가 크지 않기 때문에 Object와 Map의 성능 차이가 거의 없다고 봐도 무방할 것 같지만, 앞으로 방대한 양의 데이터들을 변경하는 상황을 대비해서 Map을 체득하는 것이 도움이 될 것이라고 본다.

 

 

Map의 메소드

const contacts = new Map();
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"});
contacts.has('Jessie'); // true
contacts.get('Hilary'); // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"});
contacts.get('Jessie'); // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete('Raymond'); // false
contacts.delete('Jessie'); // true
console.log(contacts.size); // 1

 

위의 예시를 보면서 set, get, has, delete 등의 기본 메소드들에 대해서 익혀 두자. 아 그리고 Map의 장점으로 위에 표에서도 언급했듯이, 값을 저렇게 객체로 넣는 것도 가능!

 

이 외에 메소드 예시

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

for (const key of myMap.keys()) {
  console.log(key)
}
// 0
// 1

for (const value of myMap.values()) {
  console.log(value)
}
// zero
// one

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

 

 

 

* ref

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

https://maxkim-j.github.io/posts/js-map