Map 오브젝트

- Map 오브젝트와 Object 오브젝트의 차이
1) key에 다양한 타입을 작성할 수 있는것과 이터러블로 작성하는 것
2) ES3에서 Object 오브젝트의 key 갑싱 같아도 추가되었으나 ES5 strict 모드에서는 추가되지 않는다. 그리고 추가한 순서로 읽히는 것을 보장하지 않습니다.
- Map 오브젝트는 key 값이 같으면 추가되지 않고 value 값이 대체되며 추가한 순서로 읽힌다.
- Map 오브젝트에 추가한 순서대로 읽히는 것은 엔진에서 key, vlaue 외에 별도로 일련번호를 부여한다.
- Map 오브젝트는 컬렉션에서 효율이 높습니다.
- key, value 형태이고 이터러블일 때는 Map 오브젝트를 사용하는것이 좋다.
- 값과 함수가 혼합된 형태면 Object 오브젝트를 사용하는것이 좋다.

let emptyMap = new Map();
let newMap = new Map([
    ["key1","value1"],
    ["key2","value2"],
    ["key1","example"]
]);
for (var element of newMap){
  console.log(element);
};

console.dir(newMap);

MapEx01.js:8
Array(2)
0 = "key1"
1 = "example"
length = 2
__proto__ = Array(0)
MapEx01.js:8
Array(2)
0 = "key2"
1 = "value2"
length = 2
__proto__ = Array(0)
MapEx01.js:11
Map(2)
__proto__ = Map {constructor: , get: , set: , has: , delete: , ...}
constructor = function Map() { [native code] }
get = function get() { [native code] }
set = function set() { [native code] }
has = function has() { [native code] }
delete = function delete() { [native code] }
clear = function clear() { [native code] }
entries = function entries() { [native code] }
forEach = function forEach() { [native code] }
keys = function keys() { [native code] }
size = … (invoke getter)
get size = function get size() { [native code] }
values = function values() { [native code] }
Symbol(Symbol.toStringTag) = "Map"
Symbol(Symbol.iterator) = function entries() { [native code] }
__proto__ = Object {constructor: , __defineGetter__: , __defineSetter__: , hasOwnProperty: , __lookupGetter__: , ...}
[[Entries]] = Array(2)
0 = {"key1" => "example"} {key: "key1", value: "example"}
1 = {"key2" => "value2"} {key: "key2", value: "value2"}
length = 2

0 = {"key1" => "example"} {key: "key1", value: "example"}

여기서 0 은 인덱스입니다. 그리고 엔진이 파라미터의 이터러블 오브젝트에 작성한 순서로 인덱스를 부여합니다. 그러므로 작성한 순서로 읽힐 수 있습니다.

for (var element of newMap){
  element.forEach((keyValue, index) =>{
      console.log(index, keyValue);
  })
};

for(var [key, value] of newMap){
    console.log(key, value);
}

MapEx01.js:9
0 key1
MapEx01.js:9
1 example
MapEx01.js:9
0 key2
MapEx01.js:9
1 value2
MapEx01.js:14
key1 example
MapEx01.js:14
key2 value2