[JavaScript] 36. Map

* Map

- key-value 형태의 자료형을 저장할 수 있는 Collection

- Object와 달리 다양한 자료형의 key를 허용함

- Object와 달리 값의 추가/삭제 시 메서드를 이용해야 함

- 생성: new Map()

 

* 요소 추가/삭제, 크기

- 요소 추가: Map.set(key, value)

- 요소 접근: Map.get(key)

- 요소 삭제:  Map.delete(key)

- 요소 전체 삭제: Map.clear()

- 요소 개수 확인: Map.size

- map.set 호출 시 map이 반환되므로 체이닝(chaining) 가능

// map이라는 새로운 Map 생성
let map = new Map();

// set을 이용한 요소 추가 (다양한 자료형의 key 허용)
map.set("name", "John"); // string key
map.set(123, 456); // number key
map.set(true, "bool_type"); // boolean key
console.log(map); // output: Map(3) { 'name' => 'John', 123 => 456, true => 'bool_type' }

// size를 이용한 크기 확인
console.log(map.size); // output: 3

// get을 이용한 요소 접근
console.log(map.get("name")); // output: John
console.log(map.get(123)); // output: 456
console.log(map.get(true)); // output: bool_type

// delete를 이용한 요소 삭제
map.delete("name");
console.log(map); // output: Map(2) { 123 => 456, true => 'bool_type' }

// clear를 이용한 요소 전체 삭제
map.clear();
console.log(map); // output: Map(0) {}

// set 호출 시 map이 반환됨
console.log(map.set("name", "Alice")); // output: Map(1) { 'name' => 'Alice' }

// set 호출 시 map이 반환되는 것을 이용한 체이닝(chaining)가능
map.set(456, 789).set(false, "bool_type");
console.log(map); // output: Map(3) { 'name' => 'Alice', 456 => 789, false => 'bool_type' }

 

* Key 존재 여부 확인

- Key 존재 여부 확인: Map.has(key)

// map 생성과 초기화를 한번에
let recipe_juice = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
]);

console.log(recipe_juice.has("strawberry")); // output: true
console.log(recipe_juice.has("bluebery")); // output: false

 

* Map 반복문

- Collection 객체인 Map이 가지고 있는 iterator 속성을 이용하여 for ... of 구문으로 반복문 수행 가능

- 모든 key값 반환: Map.keys()

- 모든 value값 반환: Map.values()

- 모든 요소 반환: Map.entries()

let recipe_juice = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
]);

console.log(recipe_juice);
// output: Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }

// keys를 이용해 recipe_juice의 key값 확인
console.log(recipe_juice.keys());
// output: [Map Iterator] { 'strawberry', 'banana', 'ice' }]

// values를 이용해 recipe_juice의 value값 확인
console.log(recipe_juice.values());
// output: [Map Iterator] { 50, 100, 150 }

// recipe_juice의 key값에 차례로 접근
for (let item of recipe_juice.keys()) console.log(item);
// output: strawberry banana ice

// recipe_juice의 value값에 차례로 접근
for (let amount of recipe_juice.values()) console.log(amount);
// output: 50 100 150

// recipe_juice의 각 요소(key, value)에 차례로 접근
for (let entity of recipe_juice) console.log(entity);
// ouput: [ 'strawberry', 50 ] [ 'banana', 100 ] [ 'ice', 150 ]

// recipe_juice 모든 요소에 접근
console.log(recipe_juice.entries());
/* output: 
[Map Entries] {
  [ 'strawberry', 50 ],
  [ 'banana', 100 ],
  [ 'ice', 150 ]
} */

 

* Map  <-> Object 변환

- Map -> Object: Object.fromEntries(Map)

- Object -> Key, Value: Object.entries(Object)

- Key, Value -> Map: new Map(Key, Value)

// recipe_juice (Map)
let recipe_juice = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
]);

// recipe_juice (Map) -> recipe_juice_obj (Object)
let recipe_juice_obj = Object.fromEntries(recipe_juice);
console.log(recipe_juice_obj);
// output: { strawberry: 50, banana: 100, ice: 150 }

// recipe_juice_obj (Object) -> recipe_juice_kv (Key, Value)
let recipe_juice_kv = Object.entries(recipe_juice_obj);
console.log(recipe_juice_kv);
// output: [ [ 'strawberry', 50 ], [ 'banana', 100 ], [ 'ice', 150 ] ]

// recipe_juice_kv (Key, Value) -> recipe_juice_map (Map)
let recipe_juice_map = new Map(recipe_juice_kv);
console.log(recipe_juice_map);
// output: Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }

- Object의 Key값은 String과 Symbol type만 가능하다. 기억이 안 난다면..? https://cherish-my-codes.tistory.com/entry/8-%EA%B0%9D%EC%B2%B4%ED%83%80%EC%9E%85

8. 객체타입

- 만약 Map의 Key값이 String이 아닌데 Object로 변환한다면?

// recipe_juice (Map)
let map = new Map([[123, 456]]);

console.log(map);
// output: Map(1) { 123 => 456 }

// map (Map) -> map_obj (Object)
let map_obj = Object.fromEntries(map);
console.log(map_obj);
// output: { '123': 456 } (Key 123(Number)이 '123'(String)으로 바뀜!!!)

// map_obj (Object) -> map_kv (Key, Value)
let map_kv = Object.entries(map_obj);
console.log(map_kv);
// output: [ [ '123', 456 ] ]

// map_kv (Key, Value) -> map_map (Map)
let map_map = new Map(map_kv);
console.log(map_map);
// output: Map(1) { '123' => 456 }