Map 객체 살펴보기

Map 객체는 key-value로 이루어진 데이터 구조이다.

Map에 key-value는 모든 타입에 대해서 사용 가능하다.

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set(1, 3);

console.log(map1.get('a'));
// Expected output: 1
console.log(map1.get('b'));
// Expected output: 2
console.log(map1.get(1));
// Expected output: 3

 

Map은 한 객체 내에서 key는 오직 단 하나만 존재해야 한다.

ex) { 'a': 1, 'a': 2 }  → X

 

Map 객체는 for .. of 구문을 사용하여 내부 요소를 참조할 수 있다.

const map = new Map();

map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for(var m of map) {
    console.log(m);
    // 첫번째 ['a', 1]
    // 두번째 ['b', 2]
    // 세번째 ['c', 3]
}

 for .. of 구문을 사용할 경우, 각 순회마다

key와 value를 크기가 2인 Array로 반환해준다.

Object와 Map의 차이

Object는 Map과 매우 유사하다. 둘 다 key-value 형태이기 때문이다. 예전 Map객체가 없었을 시절엔

Object를 Map으로도 사용하였다.

 

대표적인 차이를 보자.

1. 키 유형

Map은 모든 타입을 key 타입으로 설정할 수 있는 반면에, Object의 경우, String 또는 Symbol이여야 한다.

2. 순회

Map은 iterable 구조이기 때문에 직접 반복할 수 있는 반면에, Object의 경우 for ... of 구문을 사용하여

직접 순회가 불가능하다.

3. 성능

Map은 key-valu 추가 및 제거 관련 상황에서 성능이 더 최적화 되어있다.

4. 직렬화 및 역직렬화

Map의 경우 직렬화 또는 역직렬화에 대한 기본 지원이 없다.

Object의 경우 JSON.stringify(..)를 사용하여

Object → JSON으로 직렬화 및 JSON → 역직렬화가 가능하다.

 

key-value 설정하기

Object의 key-value 설정

const obj = {};
obj['a'] = 1;

이런 식으로 key-value를 동적 추가가 가능하다

그러나 Map 객체에서 key-value를 이렇게 추가하는 경우,

const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";

console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

wrongMap.has("bla"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

내장 메서드를 사용했을 때, key를 제대로 인식하지 못하는 경우가 발생한다.

 

따라서 Map 객체에서 key-value를 추가할 때는 Map.set()을 사용하는 것을 권장한다!