210824 개발기록: 자바스크립트 Map() 객체

 

자바스크립트의 Map 객체

객체와 마찬가지로 key 기반 컬렉션이다.하나의 key에 하나의 value 가 매핑되어 데이터가 저장되는 자료형으로, 객체(object)와 비슷한 구조로 이뤄져 있다. 

공부하면서 느낀 가장 큰 차이점은, object 와 달리 forEach() 함수를 적용할 수 있다는 점이다. forEach() 함수를 적용하면 Map() 객체의 value 가 iterable 하게 리턴된다.  물론 object 도, Object.keys(obj) 함수를 사용하면 forEach() 를 적용할 수 있지만, key 값을 기반으로 iterator 가 돈다는 차이점이 있다.

 

 

Object와 Map 비교

1. Object의 키는 Strings이며(only strings), Map의 키는 모든 값(any)을 가질 수 있다.
2. Object는 크기를 수동으로 추적해야하지만, Map은 size()함수로 크기를 쉽게 얻을 수 있다. (=> Map.size())

   - 여기서 수동적으로 크기를 추적한다는 말은, for 문에 Object 를 넣어 각 원소가 몇개인지 파악하는 식으로 크기를 추적한다는 뜻이다.
3. Map은 삽입된 순서대로 반복된다(순서를 지킨다).

 

Map() 객체가 데이터를 저장(set)하고 가져오는(get) 방법은 아래 코드와 같다. 위에서 언급했듯이, forEach() 함수를 적용할 수 있어 iterable 한 특성을 가진다.

let m = new Map()

m.set("name", "LIM")
// Map(1) {"name" => "LIM"}

m.set("name", "HOO")
// Map(1) {"name" => "HOO"}

m.get("name")
// "HOO

let m2 = new Map().set("name", "KIM").set("age", 20)
// m2 => Map(2) {"name" => "KIM", "age" => 20}

m2.forEach(m => console.log(m))
// KIM
// 20

m2.map(i => console.log(i)) // TypeError

 

MDN 에는 Object 나 Map 중에 어느 것을 사용할지를 결정하는데 아래 두가지 팁을 준다.

1) 실행 시까지 키를 알수 없고, 모든 키가 동일한 type 이면서 모든 값들이 동일한 type 일 경우 objects 대신 map 을 사용해라.

=> 개인적으로 1) 의 이유는 iterable 이라 생각한다. value 값이 모두 동일하다면 forEach() 함수로 리턴하여 동일한 함수 로직을 적용할 수 있기 때문이다.

2). 각 개별 요소에 대해 적용해야 하는 로직이 있을 경우, objects 를 사용해라.

 

 

reference

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

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