[JavaScript] new Map() 이란?

Map

1. Map 이란?
   - Map은 다양한 자료형의 key를 허용하고, key-value 형태의 자료형으로 이루어진 Collection 입니다.
   - Object와 비교해 다양한 key 사용이 가능합니다. 다양한 메서드를 통해 값을 추가, 삭제할 수 있습니다.

2. 왜 사용할까?
   - Object와 비교해 . or [] 를 사용할 필요없이, 의도를 명확히 드러낸 메서드를 사용해서 접근, 수정, 삭제 등을 할 수 있습니다.
   - Object는 크기를 keys나 values 등을 통해 우회해서 확인할 수 있지만, Map은 size 메서드를 통해 쉽게 확인할 수 있습니다.

3. Map 생성 예시

// 빈 Map 생성하기
const me = new Map();
console.log(me); // Map(0) {}

// 요소를 넣은 Map 생성하기
let anotherMe = new Map([
  ['name', 'chloe'],
  ['age', 28]
]);

Map 메서드

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

me.set('name', 'chloe');
me.set('age', '28');
console.log(me); // Map(2) { 'name' => 'chloe', 'age' => '28' }

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

const checkName = me.get('name');
console.log(checkName); // chloe

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

me.clear();
console.log(me); // Map(0) {}

4. 요소 존재 확인: Map.has(key)

const isChecked = me.has('name');
console.log(isChecked); // true

5. 요소 갯수 확인: Map.size

const checkSize = me.size;
console.log(checkSize); // 2

6. 요소 일부 삭제: Map.delete(key)

me.delete('name');
console.log(me); // Map(1) { 'age' => '28' }

Map 반복문 (for-of)

for (const info of me) { // entries
  console.log(info); // [ 'name', 'chloe' ] [ 'age', '28' ]
}

for (const info of me.keys()) { // key
  console.log(info); // name age
}

for (const info of me.values()) { // value
  console.log(info); // chloe 28
}                                                                                              

Map -> Object -> Array 변환

1. Map -> Object

const meToObj = Object.fromEntries(me);
console.log(meToObj); // { name: 'chloe', age: 28 }

2. Map -> Array

const meToObj = Object.fromEntries(me);
const meToArr = Object.entries(meToObj);
console.log(meToArr); // [ [ 'name', 'chloe' ], [ 'age', 28 ] ]

// entries
const check1 = [ ...me ];
console.log(check1); // [ [ 'name', 'chloe' ], [ 'age', 28 ] ]

// key
const check2 = [ ...me.keys() ];
console.log(check2); // [ 'name', 'age' ]

// value
const check3 = [ ...me.values() ];
console.log(check3); // [ 'chloe', 28 ]