[JavaScript] Collection-Map

📌  Collection

- Collection : 구조 또는 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간을 의미한다

- Collection은 내부적으로 Iterator를 가지고 있다 

- 자바 스크립트에서 제공하는 Collection의 종류에는 Indexed Collection와 keyed Collection이 있다

     1. Indexed Collection : index를 통해 가 element에 접근할 수 있다 (예) Array, Typed Array

     2. keyed Collection : 특정 문자열, 자료형을 통해 접근할 수 있다 (예) Object, Map, Weak Map, Set, Weak Set

 

* Iterator : 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부의 요소를 순회하는 객체

 

📌  Map

- Map : 다양한 자료형의 key를 허용하는 key-value 형태의 Collection

- Map은 Object보다 다양한 key를 허용한다

- 값을 추가하거나 삭제할 때에는 정해진 메서드를 사용한다

 

 

💛  Map : 생성자, 요소 추가

// 생성자
let map = new Map();

// 요소 추가
map.set("name", "짱구");
map.set(123, 456).set(true, "bool");

 

- 생성자 : new Map();

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

- 다양한 자료형의 key를 허용한다 

 

 

💛  Map : 요소 접근, 개수 확인 

// 생성자
let map = new Map();
let menu = new Map([
  ["juice", 4000],
  ["coke", 3000],
  ["coffee", 2800],
]);


// 요소 추가
map.set("name", "짱구");
map.set(123, 456).set(true, "bool");

// 요소 접근
console.log(map.get("name"));		// 짱구
console.log(map.get(123));		// 456
console.log(map.get(true));		// bool
console.log(menu.get("coke"));		// 3000
console.log(menu.get("juice"));		// 4000

// 잘못된 접근 방법
console.log(map[123])			// undefined

// 개수 확인
console.log(map.size);			// 3

 

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

- 개수 확인 :  map.size

- 값을 추가하거나 삭제할 때에는 정해진 메서드를 사용한다

 

 

💛   Map : 요소 삭제, 전체 삭제

// 생성자
let map = new Map();

// 요소 추가
map.set("name", "짱구");
map.set(123, 456).set(true, "bool");

// 전체 출력
console.log(map)	// Map(3) { 'name' => '짱구', 123 => 456, true => 'bool' }

// 요소 삭제
map.delete(123);
console.log(map)	// Map(2) { 'name' => '짱구', true => 'bool' }

// 전체 삭제
map.celar();
console.log(map)	// Map(0) {}

 

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

- 전체 삭제 : map.clear()

- 값을 추가하거나 삭제할 때에는 정해진 메서드를 사용한다

 

 

💛  Map :  key  존재 여부 확인

// 생성자
let map = new Map();

// 요소 추가
map.set("name", "짱구");
map.set(123, 456).set(true, "bool");

// 요소 포함 여부 확인
console.log(map) 		// Map(3) { 'name' => '짱구', 123 => 456, true => 'bool' }
console.log(map.has("name"));	// true
console.log(map.has("age"));	// false
console.log(map.has(123));	// true
console.log(map.has(456));	// false

 

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

 

 

💛  Map : key, value 확인

// 생성자
let map = new Map();

// 요소 추가
map.set("name", "짱구");
map.set(123, 456).set(true, "bool");

// key 
console.log(map.keys());    // { 'name', 123, true }

// value
console.log(map.values());  // { '짱구', 456, 'bool' }

// entries
console.log(map.entries()); // { [ 'name', '짱구' ], [ 123, 456 ], [ true, 'bool' ] }

// iterator 속성 확인하기
for(let element of map.entries() console.log(element);

/*
[ 'name', '짱구' ]
[ 123, 456 ]
[ true, 'bool' ]
*/

 

- key 확인 : map.keys()

- value 확인 : map.values()

- key-value 확인 : map.entries()

- Collection 객체인 Map은 Iterator 속성을 가지고 있으므로, for-of문을 통한 반복문 수행이 가능하다

 

 

💛  Map : Map  ↔ Object 형변환

// 생성자
let menu = new Map([
    ["juice", 4000],
    ["coke", 3000],
    ["coffee", 2800],
  ]);
  
  let map_to_obj = Object.fromEntries(menu);    // Map → Object
  let obj_to_kv = Object.entries(map_to_obj);   // Object → Entries(key-value)
  let kv_to_map = new Map(obj_to_kv);           // Entries → map

  console.log(map_to_obj);  // { juice: 4000, coke: 3000, coffee: 2800 }
  console.log(obj_to_kv);   // [ [ 'juice', 4000 ], [ 'coke', 3000 ], [ 'coffee', 2800 ] ]
  console.log(kv_to_map);   // Map(3) { 'juice' => 4000, 'coke' => 3000, 'coffee' => 2800 }

 

- Object.fromEntries(map) : map을 object로 형 변환

- Object.entries(object) : object의 요소를 key-value형태의 entries로

- new Map(entries) : entries를 Map 생성자를 사용해 map으로 생성