Map
Map 객체는 속성(Key)/값(Value) 쌍으로 구성된 객체입니다.
영상 강의
PART 1
예제
맵은 자바스크립트에서 자주 사용되는 데이터 구조입니다. 기존 코드에선 객체를 이용해서 해시맵을 생성했습니다.
var hashMap = {};
hashMap.key1 = 'value1';
hashMap['key2'] = 'value2';
하지만 이 방법은 특정 프로퍼티 이름으로 인한 예상치 못한 함수 오버라이드(override)로부터 안전하지 않습니다.
hashMap.hasOwnProperty = '의도적으로 객체의 hasOwnProperty와 충돌시킴';
for (var key in hashMap) {
// Uncaught TypeError: hashMap.hasOwnProperty is not a function
if (hashMap.hasOwnProperty(key)) {
var value = hashMap[key];
console.log(`key => ${key}`);
console.log(`value => ${value}`);
}
}
반면 맵 객체는 이러한 문제를 발생시키지 않습니다.
맵 객체는 get, set 그리고 has 등의 메소드를 제공합니다.
let map = new Map();
map.set('name', '야무');
map.get('name'); // 야무
map.has('name'); // true
맵 객체의 놀랍고 재미난 점은 키 값으로 문자열만 쓰지 않아도 된다는 것입니다. 어떤 타입을 전달해도 문자열로 형변환 하지 않습니다.
let map = new Map([
['이름', '야무'],
[true, 'false'],
[1, '하나'],
[{}, '객체'],
[function () {}, '함수']
]);
for (let key of map.keys()) {
console.log(typeof key);
// string
// boolean
// number
// object
// function
}
주의!
함수나 객체처럼 기본형 데이터 타입이 아닌 타입을 사용하면 map.get() 같은 메소드를 사용할 때 비교 연산자가 제대로 동작하지 않습니다.
따라서 문자, 불리언, 숫자 같은 기본형 데이터 타입을 계속 쓰는 것이 좋습니다.
.entries() 메서드를 사용하면 맵을 손쉽게 순환할 수 있습니다.
for (let [key, value] of map.entries()) {
console.log(key, value);
// '이름', '야무'
// true, 'false'
// 1, '하나'
// {}, '객체'
// function () {}, '함수'
}