JS기초 13 : Collection, Map, Object 변환

Collection

- 구조 혹은 비구조화로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간

- 자바스크립트에서 제공하는 Collection

Indexed Collection : Array, Typed Array

keyed Collection : Object, Map, Set, Weak Map, Weak Set

 

Map

- 다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장할 수 있는 Collection

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

- 대표 속성 및 메서드

- 생성자 : 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()

 

요소 추가/삭제

- 요소 추가 : Map.set(key,value), 요소 접근 : Map.get(key), 요소 전체 삭제 : Map.clear()

- 다양한 자료형을 key로 가능하며 map.set 호출 시 체이닝(chaining) 가능

let map = new Map();

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

console.log(map.get(123)); // 456
console.log(map.get("name")); // John
console.log(map.get(true)); // Bool

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

//Chanining
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",100],
  ["Syrup",20],
  ["Ice",200]
]);

for (let item of recipe_juice.keys()) {
  console.log(item);
};
/*
Strawberry
Syrup
Ice
*/
for (let amount of recipe_juice.values()) {
  console.log(amount); 
};
/*
100
20
200
*/
for (let entity of recipe_juice) {
  console.log(entity);
};
/*
[ 'Strawberry', 100 ]
[ 'Syrup', 20 ]
[ 'Ice', 200 ]
*/

Map <-> Object 변환

- Object.entries(Object), Object.fromEntries(Map)

let recipe_juice = new Map([
  ["Strawberry",100],
  ["Syrup",20],
  ["Ice",200]
]);

console.log(recipe_juice); // Map(3) { 'Strawberry' => 100, 'Syrup' => 20, 'Ice' => 200 }

let recipe_juice_ob = Object.fromEntries(recipe_juice);
console.log(recipe_juice_ob); // { Strawberry: 100, Syrup: 20, Ice: 200 }

let recipe_juice_kv = Object.entries(recipe_juice_ob);
console.log(recipe_juice_kv); // [ [ 'Strawberry', 100 ], [ 'Syrup', 20 ], [ 'Ice', 200 ] ]