[JavaScript] Map 객체(Map Object) 메서드 및 반복문 사용 방법

 

Map

 

Map Obejct란?
ES6에 새롭게 추가된 자료구조로 현실 세계를 반영하기엔 객체(Object)와 배열(Array)  만으론 부족해서 
맵(Map)과 셋(Set) 이 등장하게 되었다.

 

 

Obeject와 Map 차이
1) Map은 객체(Object)와 달리 key를 문자형으로 변환하지 않는다. key엔 자료형 제약이 없다.
2) Map은 값이 삽입된 순서를 기억하여 순서대로 순회를 실시하지만, 객체(Obejct)는 순서를 못 한다.
3) Map을 객체(Obejct)처럼 map [key] 방식으로 사용할 수 있지만, 그렇게 되면 Map을 일반 객체(Object)로 취급하게 된다.

 

 

---

1. Map 주요 메서드 사용 방법

// Map Object 선언
let map = new Map()
// let map = new Map([['a', 1]]) iterable 객체 전달

// key를 이용해 value를 저장
map.set(key, value)

// key에 해당하는 값을 반환, key가 존재하지 않으면 undefined를 반환한다.
map.get(key) 

// key가 존재하면 true, 존재하지 않으면 false를 반환
map.has(key)

// key에 해당하는 값을 삭제
map.delete(key)

// 맵 안의 모든 요소를 제거
map.clear() – 맵 안의 모든 요소를 제거합니다.

// 요소의 개수를 반환
map.size

 

 

1-1) 객체(Object)를 key로 사용하는 방법

let john = { name: "John" };

// 고객의 가게 방문 횟수를 저장하는 map
let visitsCountMap = new Map();

// john을 맵의 키로 사용
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

 

1-2) 체이닝 방법

let map = new Map();

map.set('1', 'str1')
   .set(1, 'num1')
   .set(true, 'bool1');

• map.set을 호출할 때마다 맵 자신이 반환된다. 이를 이용하면 map.set을 '체이닝(chaining)'할 수 있다.

 

---

2. Map 반복문 사용 방법

let map = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// key를 대상으로 순회합니다.
for (let key of map.keys()) {
  alert(key); // cucumber, tomatoes, onion
}

// value을 대상으로 순회합니다.
for (let value of map.values()) {
  alert(value); // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회합니다.
for (let [key, value] of map) { // map.entries()와 동일합니다.
  alert(key + "," + value); // cucumber,500 ...
}

• map.keys()  : 각 요소의 키를 모은 반복 가능한(iterable, 이 트러블) 객체를 반환합니다.
• map.values() : 각 요소의 값을 모은 이터러블 객체를 반환합니다.
• map.entries() : 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다.

iterable 객체란?
반복 가능한(iterable, 이터러블)객체는 배열을 일반화한 객체입니다. 이터러블 이라는 개념을 사용하면 어떤 객체에든for..of 반복문을 적용할 수 있습니다.

 

2-1) forEach문 사용 가능

// 각 (키, 값) 쌍을 대상으로 함수를 실행
map.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 ...
});

• Map은 배열과 마찬가지로 내장 메서드 forEach도 사용 가능

 

 

---

3. Map 변환

3-1) 객체(Object) => Map 변환

// 각 요소가 [키, 값] 쌍인 배열
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1

• 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환

 

3-2) Map => 객체(Object) 변환

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2