[JavaScript] Object VS Map ( 성능 비교 )

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

Map - JavaScript | MDN

 

Object

키를 문자열 또는 심볼로만 가질 수 있는 구조입니다. 위 링크에서도 나와있지만 Object는 역사적으로 Map으로 사용되어왔습니다.

 

Map

key, value 형태로 저장 가능한 자료구조로써 빠른 검색 등에 사용합니다.

Object와는 다르게 키의 데이터 유형에 제약이 없습니다.

Map은 Object를 상속하여 사용합니다. 하지만 당연하게도 Object는 Map을 상속하지는 않습니다.

다만 여기서 조금 주의해서 보아야 할 것은 Map에서 키는 삽입한 순서대로 정렬하여 가지고 있다는 점입니다.

const obj = {};
const map = new Map();
console.log(map instanceof Object); // true
console.log(obj instanceof Map); // false

 

따라서 단순 생각하기에는 Object나 Map이 성능면에서 비슷할 것이라고 생각하겠지만 실상은 다릅니다.

위 링크에서도 성능 면에서 키-값 쌍의 빈번한 추가 및 제거와 관련된 상황에서 성능이 좀 더 좋습니다. 라고 이야기하고 있습니다.

실제로 그러한지 테스트를 해보겠습니다.

// random array of 1000000 numbers
let arr = new Array(1000000);
for (let i = 0; i < arr.length; i++) {
    arr[i] = Math.random() * 1000;
}
console.log("테스트 시작");

// let arr = new Array(1000000);
// for (let i = 0; i < arr.length; i++) {
//     arr[i] = "key" + Math.floor(Math.random() * arr.length);
// }
// console.log("문자 테스트 시작");

// let arr = new Array(1000000);
// for (let i = 0; i < arr.length; i++) {
//     arr[i] = Symbol(Math.random());
// }
// console.log("심볼 테스트 시작");

const startTime = Date.now();
let obj = {};
for (let i = 0; i < arr.length; i++) {
    obj[arr[i]] = arr[i];
}
const endTime = Date.now();
console.log(`object 삽입 시간: ${endTime - startTime}ms`);

const startTime2 = Date.now();
let map = new Map();
for (let i = 0; i < arr.length; i++) {
    map.set(arr[i], arr[i]);
}
const endTime2 = Date.now();
console.log(`map 삽입 시간: ${endTime2 - startTime2}ms`);

const startTime3 = Date.now();
for (let i = 0; i < arr.length; i++) {
    let a = obj[arr[i]];
}
const endTime3 = Date.now();
console.log(`object 검색 시간: ${endTime3 - startTime3}ms`);

const startTime4 = Date.now();
for (let i = 0; i < arr.length; i++) {
    let a = map.get(arr[i]);
}
const endTime4 = Date.now();

console.log(`map 검색 시간: ${endTime4 - startTime4}ms`);

 

각각 숫자와 문자, 심볼로 테스트 했을 때 출력된 시간입니다.

결과는 예상대로 Map이 훨씬 빠르게 나왔습니다. 숫자의 경우 삽입은 약 3.5배정도 차이를 보였으며 검색의 경우에는 25배까지 차이가 나는 것이 보였습니다. 이는 숫자의 경우 문자로 변경하는 작업이 들어가는 Object의 특성이 있기에 생기는 문제로 보입니다.

문자의 경우에는 차이가 조금 덜 했습니다. 삽입의 경우 약 2.5배, 검색의 경우에는 4배정도 차이를 보였습니다.

심볼의 경우에는 더 좁혀졌는데, 삽입의 경우 약 1.3배, 검색의 경우에는 동일하게 4배정도 차이를 보였습니다.

 

헌데 코드를 잘 보시면 알겠지만 이는 삽입한 순서대로 검색하였을 때의 결과입니다. 역순으로 검색을 하였을때에는 아래와 같은 결과가 나옵니다.

각각 숫자와 문자, 심볼을 역순으로 검색하였을 때 출력된 시간입니다.

삽입 시간의 경우 변경된 것이 없지만 검색의 경우 문자와 심볼에서 Object가 Map에 비해 더 앞서는 것을 확인 할 수 있습니다.

 

결론적으로 실제로 빈번한 추가 및 제거에서는 Map이 확실히 앞서는 모습을 보여주었으나 검색은 경우에 따라 달라지는 것을 확인하였습니다. 다만 평균적으로 Map이 앞서는 것 같아 데이터를 다룰 때에는 Map을 사용하는 것이 더 좋아보입니다.