Map 자료형

1. <주요 메소드>

Create

• new Map()
• map.set(key, value) : key를 이용해 value 를 생성

Read

• map.get(key) : key에 해당하는 value 반환 (없으면 undefined)

• map.has(key) : 해당 key가 있는지 검사

Update

• map.set(key, value) : key를 이용해 value 변경

Delete

• map.delete(key) : key 에 해당하는 값 삭제

etc

• map.clear() : map 안의 모든 원소 제거
• map.size : map 안의 원소의 개수 반환

2. about Map

2-1. Map은 Key로 object를 허용한다

예시)

let frenchkebab = { name: 'frenchkebab' };

let map = new Map();
map.set(frenchkebab, 123);
console.log(map.get(frenchkebab));	// 123

• object 를 key로 사용할 수 있다는 점은 Map의 중요한 기능중 하나이다.
• 하지만 object 는 string key 는 사용할 수 있지만, object key는 사용할 수 없다 !!

let frenchkebab = { name: '최정현' };

let obj = {};
obj[frenchkebab] = 123; // frenchkebab을 key로 해서 value에 값 123을 저장

console.log(obj['[object Object]']); // 123
console.log(obj[frenchkebab]); // 123 (나오긴 한다)

let hermine = { name: '헤르민' };
obj[hermine] = 234;

console.log(obj[hermine]); // 234
console.log(obj[frenchkebab]); // 234 -> ??
console.log(obj['[object Object]'] // 234            

object의 key에 object를 넣으면, '[object Object]' 라는 string 으로 자동으로 변환된다

2-2. 주의사항

map[key] 와 같은 형태로 사용하지 말 것!

• 이 방법은 map을 일반 객체로 취급하게 되므로,
  map 전용 메소드 set, get 을 사용할 것!

3. map이 동작하는 방식

3-1. map이 key를 비교하는 방식

map은 SameValueZero 라고 불리는 알고리즘을 사용해 값의 등가 여부를 확인한다.
일치 연산자 === 과 거의 유사하지만 NaN과 NaN 이 같다고 취급하는 것에서 차이가 있다.

따라서 map 에서는 NaN도 key로 쓸 수 있다.

3-2. chaining

map.set을 할 때마다 map 자신이 반환된다.
이를 이용하여 map.set을 chaining할 수 있다.

map.set('1', 'frenchkebab'(
  .set('2', 'hermine')
  .set('3', 'portejoie');

4. iteration

4-1. ※ map은 삽입 순서를 기억한다

map은 object와 다르게 삽입된 순서대로 순회를 한다.
(opject는 property의 순서를 기억하지 못한다.)

4-2. key를 모은 iterable한 객체

: for .. of 반복문으로 쓰인다.

• map.keys() : 각 요소의 key를 모은 객체 반환

4-3. value를 모은 iterable한 객체

• map.values() : 각 요소의 value를 모은 객체 반환

4-4. [key, value]를 모은 iterable한 객체

• map.entries() : [key, value]를 한 쌍으로 하는 객체 반환

4-5. map은 배열과 유사하게 forEach를 지원

hermineMap.forEach( (value, key, map) => {
  console.log(`${key}: ${value}`);
  // hermine: 1
  // marie: 2
  // yvette: 3
  // portejoie: 4
});

5. 객체 <-> map

5-1. array를 map으로

let hermine = [
    ['hermine', 1],
    ['marie', 2],
    ['yvette', 3],
    ['portejoie', 4]
];

let hermineMap = new Map(hermine);

console.log(hermineMap);
// Map(4) {"hermine" => 1, "marie" => 2, "yvette" => 3, "portejoie" => 4}

5-2. Object.entries(obj) : object를 map으로

let hermine = {
  name: 'hermine',
  age: 26,
  nationality: 'france'
};

let map = new Map(Object.entries(hermine));
console.log(map.get('name')); // hermine

5-3. Object.fromEntries: map을 object로

let map = new Map();
map.set('hermine', 1);
map.set('marie', 2);
map.set('yvette', 3);
map.set('portejoie', 4);

let obj = Object.fromEntries(map.entries());
// let obj = Object.fromEntries(map); 로 해도 동일
console.log(map); // {hermine: 1, marie: 2, yvette: 3, portejoie: 4}

map.entries()를 호출하면 [key, value]를 요소로 갖는 iterable을 반환한다.
(Object.formEntries를 사용하기에 딱 맞는 형태!