[JavaScript]Map 객체

Map 객체는 ECMAScript 6부터 도입된 JavaScript 객체입니다.

 

Map 객체는 [키, 값] 형태의 값을 가지는 객체입니다.

 

키는 Map 객체에서 고유해야 하며, 값은 변경 가능합니다.

 

이번 포스팅에서는 Map 객체의 사용 방법을 정리합니다.

 

목차

1. Map 객체 생성 방법
2. Object와 Map 비교
3. Map 객체 다루기(요소의 개수, 추가, 삭제)
4. Map 객체의 요소를 반복문으로 접근하기

---

Map 객체 생성 방법

빈 Map 객체를 생성합니다.

var mapObject = new Map();

 

[키, 값] 형태의 중첩 배열을 전달하여 Map 객체를 생성하는 방법입니다.

var mapObject = new Map([
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
]);

console.log(mapObject);

실행 결과

 

중첩 배열인 변수를 전달하여 Map 객체를 생성할 수 있습니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

console.log(mapObject);

 

만약, 중복되는 키가 존재할 경우 마지막 값이 적용됩니다.

var mapObject = new Map([
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC'],
  ['B', 'valueBBB']
]);

console.log(mapObject);

실행 결과

 

[키, 값]에서 값은 객체가 될 수 있습니다.

var mapObject = new Map([
  ['A', {value : 'valueA'}],
  ['B', {value : 'valueB'}],
  ['C', {value : 'valueC'}]
]);

console.log(mapObject);

실행 결과

 

[키, 값]에서 키도 객체가 될 수 있습니다.

단, 키가 객체인 경우 고유한 값이 될 수 없습니다.

var mapObject = new Map([
  [{key : 'A'}, {value : 'valueA'}],
  [{key : 'B'}, {value : 'valueB'}],
  [{key : 'C'}, {value : 'valueC'}],
  [{key : 'C'}, {value : 'valueCCCC'}]
]);

console.log(mapObject);

실행 결과

---

Object와 Map 비교

Object도 [키, 값] 형태가 가능하지만, Map은 Object보다 더 좋은 장점을 가지고 있습니다.

• Object의 키는 Strings이며, Map은 문자열이 아닌 값도 키로 설정할 수 있습니다.
• Map은 크기를 간단한 방법으로 가져올 수 있습니다.
• Map은 추가된 순서대로 반복됩니다.

---

Map 객체 다루기

size 프로퍼티로 Map 객체 요소의 개수를 구할 수 있습니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

console.log(mapObject.size);
// 3

 

set 함수로 Map 객체에 [키, 값]인 요소를 추가하거나 키의 매핑된 값을 변경할 수 있습니다.

메서드 체이닝을 사용하여 set 함수를 연결할 수 있습니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

console.log(mapObject);

mapObject.set('D', 'valueD').set('E', 'valueE');

console.log(mapObject);

실행 결과

 

특정 키의 매핑된 값을 가져오기 위해서 get 함수를 사용합니다.

키가 존재하지 않을 경우 undefined가 출력됩니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

console.log(mapObject.get('C'));
// valueC

 

키를 삭제하기 위해서 delete 함수를 사용합니다.

키 'C'가 삭제되었기 때문에 undefined가 출력됩니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

mapObject.delete('C');

console.log(mapObject.get('C'));
// undefined

 

clear 함수로 모든 값을 삭제할 수 있습니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

mapObject.clear();

console.log(mapObject);

실행 결과

---

Map 객체의 요소를 반복문으로 접근하기

forEach 함수로 Map 객체의 요소를 접근합니다.

배열의 forEach 함수와 사용방법이 다르므로 주의해서 사용합니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

mapObject.forEach(function(value, key) {
  console.log('key : ' + key);
  console.log('value : ' + value);
});

실행 결과

 

for ... of 반복문을 사용하여 Map 객체의 요소를 접근할 수 있습니다.

키에 접근하기 위해서는 0번째 index를 접근해야 합니다.

값에 접근하기 위해서는 1번째 index를 접근해야 합니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

for (var obj of mapObject) {
  console.log(obj);
  console.log('key : ' + obj[0]);
  console.log('value : ' + obj[1]);
}

실행 결과

 

for ... of 반복문에서 [키, 값] 형태로 사용하고 싶다면, 아래 코드처럼 사용해야합니다.

var nestArr = [
  ['A', 'valueA'],
  ['B', 'valueB'],
  ['C', 'valueC']
];

var mapObject = new Map(nestArr);

for (var [key, value] of mapObject) {
  console.log('key : ' + key);
  console.log('value : ' + value);
}

실행 결과