Javascript Objects vs. Maps

 

Map - JavaScript | MDN

22.01.30 기준 작성

아직 완벽히 이해하지 못해 정확하지 않을 수 있습니다. 공식문서와 비교하며 읽어주세요.

 

Key equality

• Key의 동일성은 sameValueZero 알고리즘에 기반한다.
• NaN !== NaN임에도 NaN은 NaN과 같다고 간주된다. 다른 값들도 === 연산에 기반하여 같은지 결정된다.
• 이전에는 그렇지 않았지만, 현재 ECMAScript specification에서 -0, +0은 같다고 간주된다. 자세한 내용은 브라우저 호환성의 "Value equality for -0 and 0"에서 확인할 수 있다.

 

Objects vs. Maps

Object와 Map은 비슷하다. 이 둘 모두 key와 value를 짝지으며, value를 얻거나, key를 삭제하고, 어떤 값이 key로 저장되어 있는지 확인한다. 이러한 이유로 (그리고 이전에는 대안이 없었기 때문에), Object는 Map처럼 사용되어왔다.

 

그러나 Map이 더 선호되는 몇몇 경우가 있다:

	Map	Object
Accidental Keys	Map은 디폴트로 가지고 있는 key가 없다. 명시적으로 넣어준 key만 가진다.	Object는 prototype을 가지고 있어서 디폴트 key를 가지고 있다. 디폴트 key가 직접 추가할 key와 충돌할 수 있으니 주의해야한다. Note: ES5에서는 Object.create(null)을 사용해 이 문제를 우회할 수 있으나, 극히 드물게 행해진다.
Key Types	모든 값이 Map의 key가 될 수 있다. (함수, object, 모든 primitive 포함)	String이나 Symbol만 Object의 key가 될 수 있다.
Key Order	Map의 key순서는 단순하고 직관적이다: Map은 entry, key, value를 삽입한 순서대로 순회한다.	Object의 key가 순서대로 되어있긴 하지만, 항상 그런것은 아니며 그 순서가 복잡하다. 그렇기 때문에 Property의 순서에 의존하지 않는 것이 가장 좋다.
Size	Map의 item 개수는 size property를 통해 쉽게 얻을 수 있다.	Object의 item 개수는 직접 구해야 한다. (예시 1)
Iteration	Map은 iterable 해서 직접적으로 iteration 할 수 있다.	Object는 iteration protocol을 구현하지 않았으므로, 자바스크립트의 for...of 문장을 사용해 직접적으로 iteration 할 수 없다. Note: - Object는 iteration protocold을 구현(implement)할 수 있다. 또는 Object.keys나 Object.entries를 활용해 iterable을 얻을 수 있다. - for...in 문장으로 object의 enumerable property를 순회할 수 있다.
Performance	빈번하게 key-value 쌍을 추가하거나 삭제하는 경우에 더 나은 퍼포먼스를 보인다.	Key-value 쌍을 빈번하게 추가하거나 삭제하는 경우에 최적화되어있지 않다.
Serialization and parsing	Serialization이나 parsing을 기본적으로 지원하지 않는다. (그러나 JSON.stringify()와 replacer argument를 함께 사용해서 serialization을, JSON.parse()와 reviver argument를 함께 사용해서 parsing을 직접 구현할 수 있다. 참고)	JSON.stringify()를 통해 Object를 JSON으로 serialization하는 것, JSON.parse()를 통해 JSON을 object로 parsing하는 것을 기본적으로 지원한다.

 

 

예시

1. Object의 item 개수 구하기
   
   

   const obj = {}
   obj['a'] = 1
   obj['b'] = 1
   const objLen = Object.keys(obj).length
   console.log(objLen) // 2​

 

아직 해결하지 못한 궁금증 (진행 중)

• Object.create(null)로 key충돌 문제를 해결할 수 있지만, 흔하지 않다는게 무슨 말일까
• Map도 결국 하나의 객체이고, prototype을 갖는데 왜 디폴트 키가 없고, Object는 prototype이 있어서 디폴트 키가 있는걸까
• Symbol은 왜 만들어지게 되었을까
• Iterable의 정확한 의미가 뭘까
• enumerable의 정확한 의미는 뭘까
• Map의 serialization과 parsing 예시