09.23 - JS > Map & Object

목차

1. Map

• object와 같이, key - value의 쌍으로 이루어진 자료구조의 한 형태. ES6의 스펙
• 순서가 있음
• 각 요소들을 반복적으로 접근할 수 있음(iterable)

let sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size; // 3
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");

for (let [key, value] of sayings) {
  console.log(key + " goes " + value);
}
// "cat goes meow"
// "elephant goes toot"

Map과 Object

	Map	Object
key값의 data type	모든 자료형 가능(Any)	String, Symbol type만 가능
순서	순서가 있음	순서가 없음
크기 추정	.size() method로 쉽게 추정 가능	수동으로 추정해야 함
Iteration	built-in iterable	iteration protocol을 사용하지 않음 따로 Object.keys / Object.entries / for... in 구문 등을 사용해서 iterate 시켜줘야 함
Performance	빈번한 key-value pair의 변경에 최적화 key의 type이 서로 같을 때 최적화 value의 type이 서로 같을 때 최적화 데이터의 크기가 클 때	빈번한 key-value pair 변경에 최적화 되어있지 않음
Serialization & Parsing	navtive 지원 없음	JSON.stringify() & JSON.parse()로 가능

+ Object는 Prototype을 가지기 때문에, 주의하지 않으면 key가 충돌 -> 무슨말이지?

 

 

언제 Map과 Object를 써야 할까?

Object를 쓰자

- 각각의 value가 서로 다른 type이 많거나, 다른 Logic이 적용되어야 할 때

- 구조가 비교적 간단할 때

- JSON을 활용해야 할 때

 

Map을 쓰자

- 자료의 변경이 자주 있을 때

- 자료의 순서가 중요할 때

- key의 값들을 runtime까지 모를 때

- data의 size가 클 때

- key & value의 type이 각각 같을 때

 

 

+++ 아래 내용보고 위 자료 수정하기

https://medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

[JS #5] ES6 Map(), Set()

 

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections

Keyed collections - JavaScript | MDN

https://kellis.tistory.com/129

[ES6+] Map vs Object

 

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

ES6 — Map vs Object — What and when?

 

https://hackernoon.com/what-you-should-know-about-es6-maps-dc66af6b9a1e

What You Should Know About ES6 Maps | Hacker Noon

https://velog.io/@namda-on/JavaScript-Map-%EA%B3%BC-Object-%EC%9D%98-%EC%B0%A8%EC%9D%B4