Javascript 에서 Object를 해시맵처럼 사용하지 마세요

Map은 우리가 가장 많이 사용하는 key&value 형태의 데이터 구조중 하나입니다. 그리고 javascript를 사용할 때 좀더 편리하게 사용하기 위해서 다음과 같은 코드를 사용하고는 합니다.

const map = {};

// insert key-value-pair
map['key1'] = 'value1';
map['key2'] = 'value2';
map['key3'] = 'value3';

// check if map contians key
if (map['key1']) {
  console.log('Map contains key1');
}

// get value with specific key
console.log(map['key1']);

하지만 자바스크립트에는 이미 이러한 목적을 가진 map 데이터형을 제공하고 있습니다. Object 를 사용 하는 것보다 Map을 사용해야 하는 이유를 몇 가지 적어 보겠습니다.

1. 더 많은 key 의 유형

Object의 key는 기호나 문자만을 가질 수 있습니다. 하지만 Map은 어떠한 형태라도 key로 사용될 수 있습니다.

const map = new Map();
const myFunction = () => console.log('I am a useful function.');
const myNumber = 666;
const myObject = {
  name: 'plainObjectValue',
  otherKey: 'otherValue'
};
map.set(myFunction, 'function as a key');
map.set(myNumber, 'number as a key');
map.set(myObject, 'object as a key');

console.log(map.get(myFunction)); // function as a key
console.log(map.get(myNumber)); // number as a key
console.log(map.get(myObject)); // object as a key

2. size 사용 가능

Object의 경우 일반적인 방법으로는 size를 확인 할 수 없습니다. 하지만 Map은 가능하죠.

const map = new Map();
map.set('someKey1', 1);
map.set('someKey2', 1);
...
map.set('someKey100', 1);

console.log(map.size) // 100, Runtime: O(1)

const plainObjMap = {};
plainObjMap['someKey1'] = 1;
plainObjMap['someKey2'] = 1;
...
plainObjMap['someKey100'] = 1;

console.log(Object.keys(plainObjMap).length) // 100, Runtime: O(n)

3. 더 나은 성능

Map은 설계단계부터 데이터의 추가와 제거에 최적화 되어 있기 때문에 성능에 있어서 매우 유리합니다.

맥북프로에서 천만개의 데이터 셋을 가지고 테스트 했을 때 Object는 1.6초의 처리시간이 필요했고 Map은 1ms 이하의 처리시간을 보였습니다.

4. 반복문 사용

Object를 사용하여 반복문을 실행시키려면 불편합니다. 하지만 Map은 반복문을 아주 편리하게 사용 할 수 있어요.

const map = new Map();
map.set('someKey1', 1);
map.set('someKey2', 2);
map.set('someKey3', 3);

for (let [key, value] of map) {
  console.log(`${key} = ${value}`);
}
// someKey1 = 1
// someKey2 = 2
// someKey3 = 3

const plainObjMap = {};
plainObjMap['someKey1'] = 1;
plainObjMap['someKey2'] = 2;
plainObjMap['someKey3'] = 3;

for (let key of Object.keys(plainObjMap)) {
  const value = plainObjMap[key];
  console.log(`${key} = ${value}`);
}
// someKey1 = 1
// someKey2 = 2
// someKey3 = 3

5. 순서의 보장

ECMAScript 2015 이전 버전에서는 Object에서 키의 순서를 보장하지 않습니다.

6. 덮어쓰기 금지

Object에는 미리 정의된 prototype이 있기 때문에 key가 충돌할 위험이 있습니다. 하지만 Map을 사용할 때는 그런 걱정을 할 필요가 없습니다.

const map = new Map();
map.set('someKey1', 1);
map.set('someKey2', 2);
map.set('toString', 3); // No problem for Map

const plainObjMap = {};
plainObjMap['someKey1'] = 1;
plainObjMap['someKey2'] = 2;
plainObjMap['toString'] = 3; // Oops, native property

---

참고: https://medium.com/better-programming/stop-using-objects-as-hash-maps-in-javascript-9a272e85f6a8

Stop Using Objects as Hash Maps in JavaScript