[JS] 자바스크립트 컬렉션(JavaScript Collection) - Map

Map이란?

자바스크립트의 키 기반 컬렉션(Keyed Collection)으로 ES6(ECMAScript 6)부터 소개되었다.

다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장할 수 있는 컬렉션이다.

Map은 Object와 비교하면 다양한 key의 사용을 허용하고 값의 추가/삭제 시 메서드를 통한 수행이 필요하다.

---

대표 속성(property) 및 메서드(method)

• 생성자 : new Map()
• 개수 확인 : Map.size
• 요소 추가 : Map.set(key, value)
• 요소 접근 : Map.get(key)
• 요소 삭제 : Map.delete(key)
• 전체 삭제 : Map.clear()
• 요소 존재 여부 확인 : Map.has(key)
• 그 외 메서드 : Map.keys(), Map.values(), Map.entires()

 

요소 추가/삭제

다양한 자료형을 key로 사용 가능하며 map.set 호출 시 map이 반환되므로 체이닝(chaining)이 가능하다.

let map = new Map();

map.set("name", "kh");
map.set(123, 456);
map.set(true, "boolean");
console.log(map); // Map(3) { 'name' => 'kh', 123 => 456, true => 'boolean' }

console.log(map.get("name")); // kh
console.log(map.get(123)); // 456
console.log(map.get(true)); // boolean
console.log(map.size); // 3

map.delete(123);
console.log(map); // Map(2) { 'name' => 'kh', true => 'boolean' }
map.clear();
console.log(map); // Map(0) {}

map.set(123, 789).set(false, "boolean").set("fruit", "banana");
console.log(map); // Map(3) { 123 => 789, false => 'boolean', 'fruit' => 'banana' }

 

Map 반복문

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

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

for (const iterator of recipe_juice.keys()) {
  console.log(iterator);
}
// strawberry
// banana
// ice
for (const iterator of recipe_juice.values()) {
  console.log(iterator);
}
// 50
// 100
// 150
for (const iterator of recipe_juice) {
  console.log(iterator);
}
// [ 'strawberry', 50 ]
// [ 'banana', 100 ]
// [ 'ice', 150 ]

 

Map과 Object 변환

Object.entries(Object), Object.fromEntries(Map)를 통해 Map과 Object 간 변환이 가능하다.

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

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

let recipe_juice_obj = Object.fromEntries(recipe_juice);
let recipe_juice_kv = Object.entries(recipe_juice_obj);
let recipe_juice_map = new Map(recipe_juice_kv);

console.log(recipe_juice_obj); // { strawberry: 50, banana: 100, ice: 150 }
console.log(recipe_juice_kv); // [ [ 'strawberry', 50 ], [ 'banana', 100 ], [ 'ice', 150 ] ]
console.log(recipe_juice_map); // Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }