[javascript] Map VS Object_Map Object 차이점

Javascript에서 데이터를 저장하고 관리할 때 자주 사용되는 자료 구조 두 가지가 있는데 Map과 Object이다.

둘 다 키-값 쌍을 저장하는 구조이기에 언제 어떤 구조를 사용하는 것이 적합할지 헷갈리는데 오늘은 이 둘의 차이점과 언제 무엇을 사용해야 하는지 알아보겠다.

---

1. Object와 Map

(1) Object

Object는 Javascript의 기본적인 데이터 구조로, 키-값 쌍을 저장할 수 있다.

모든 키는 String 또는 Symbol 타입이어야 하며 값으로는 다양한 타입을 저장할 수 있다.

const obj = {
  key: 'value',
  numberValue: 123
};

console.log(obj.key); // 'value'

 

(2) Map

Map은 ES6에서 도입된 새로운 데이터 구조로, 키-값 쌍을 저장하지만 더 다양한 기능과 유연성을 제공한다.

Map은 키로 문자열뿐만 아니라 모든 자료형(객체, 함수, 원시 값)을 사용할 수 있다.

const map = new Map();
map.set('key', 'value');
map.set(123, 'numberKey');
map.set({}, 'objectKey');

console.log(map.get('key)); // 'value'

 

2. Object VS Map

Object와 Map 둘 다 값을 가리키는 키를 설정하고 해당 값을 받아오며, 키를 삭제하고 키에 무엇이 저장되었는지 여부를 알 수 있다는 점에서 유사하다.

 

그렇다면 어떤 상황에서 무엇을 사용해야 하는걸까?

우선 둘의 차이를 알아보자.

 

(1) 키의 자료형

위에서 Object와 Map을 알아봤을 때에도 설명했듯이 설정할 수 있는 키의 자료형에서 차이가 있다.

(1-1) Object

Object의 키는 반드시 문자열 또는 심볼이어야 한다.

만약 숫자나 객체를 키로 사용할 경우, Javascript가 이를 문자열로 자동 변환한다.

const obj = {};
obj[123] = 'number';
obj[{ a: 1 }] = 'object';

console.log(obj); // { '123': 'number', '[object Object]': 'object' }

 

(1-2) Map

반면 Map은 모든 자료형을 키로 사용할 수 있다.

문자열, 숫자, 객체, 함수, undefined, NaN도 키로 사용 가능하다.

const map = new Map();
map.set(123, 'number');
map.set({ a: 1 }, 'object');

console.log(map.get(123)); // 'number'

 

(2) 키-값 쌍의 순서

(2-1) Object

Object는 저장된 순서에 대해 보장하지 않지만 대부분의 최신 브라우저에서는 삽입된 순서를 어느정도 유지한다.

 

(2-2) Map

Map은 키-값 쌍의 삽입 순서를 보장한다.

따라서 for..of 또는 forEach()같은 반복문을 통해 Map을 순회할 시 삽입된 순서대로 키와 값을 얻을 수 있다.

const map = new Map();
map.set('a', 1);
map.set('b', 2);

for (const [key, value] of map) {
  console.log(key, value);
}
// 출력:
// a 1
// b 2

 

(3) 성능

(3-1) Object

작은 크기의 데이터에서는 성능 차이가 크지 않지만 Object는 많은 데이터가 포함되면 성능 저하가 발생할 수 있다.

특히 객체 키를 검색하거나 삭제하는 데는 Map보다 느릴 수 있다.

 

(3-2) Map

많은 양의 데이터를 다룰 때 Map은 더 나은 성능을 제공한다.

특히 요소 추가, 삭제, 검색 시 성능이 안정적이며 일정한 시간 복잡도를 유지한다고 한다.

 

(4) 키 존재 여부 확인

(4-1) Object

in 연산자나 hasOwnProperty() 메소드를 사용하여 키가 객체에 존재하는지 확인할 수 있다.

const obj = { key: 'value' };
console.log('key' in obj); // true
console.log(obj.hasOwnProperty('key')); // true

 

(4-2) Map

has() 메소드를 사용하여 키 존재 여부를 확인할 수 있다.

const map = new Map();
map.set('key', 'value');
console.log(map.has('key')); // true

 

(5) 크기 확인

(5-1) Object

Object의 크기(키-값 쌍의 개수) 확인을 위해 Object.keys()를 사용해 배열을 만들고 길이를 확인해야 한다.

const obj = { a: 1, b: 2 };
console.log(Object.keys(obj).length); // 2

 

(5-2) Map

Map은 size 프로퍼티를 제공하기 때문에 바로 크기를 확인할 수 있다.

const map = new Map();
map.set('a', 1);
map.set('b', 2);

console.log(map.size); // 2

 

(6) 기본 제공 메소드

(6-1) Object

Object는 키와 값의 순회를 위한 내장 메소드가 제한적이다.

그렇기에 추가적으로 for...in, for...of와 같은 반복문이나 Object.keys(), Object.values(), Object.entries()와 같은 메소드를 활용해야 한다.

 

(6-2) Map

Map은 set(), get(), has(), delete(), clear()같은 유용한 메소드를 기본적으로 제공하기 때문에

Map의 키와 값에 접근하거나 반복을 수행하는 것에 있어 매우 간편하다.

const map = new Map([['a', 1], ['b', 2]]);
map.forEach((value, key) => {
  console.log(key, value);
});

 

3. 그래서 언제 무엇을 사용해야 할까?

앞서 Object와 Map의 차이점에 대해 알아보았는데

그래서 언제 무엇을 사용해야 하는걸까?

 

(1) Object를 사용할 때

• JSON 형식의 데이터 구조를 다룰 때
• 키가 문자열이거나 심볼만으로 이루어진 데이터가 있을 때
• 단순한 데이터 구조를 저장할 때

 

(2) Map을 사용할 때

• 키로 다양한 자료형(객체, 함수 등)을 사용해야할 때
• 데이터의 삽입 순서가 중요할 때
• 데이터의 양이 많아 성능이 중요한 경우
• 내장 메소드(set(), get(), has())를 통해 효율적인 데이터 조작이 필요할 때

 

4. 결론

Object는 Javascript의 기본 자료형으로서 오랜 시간 사용되었지만 ES6 이후 Map이라는 더 유연하고 성능이 좋은 대안이 생긴만큼

각 자료 구조의 장단점을 고려하여 데이터의 특성과 용도에 맞게 선택하는 것이 중요해졌다.

 

결국 작고 단순한 데이터일 경우 Object를, 복잡하고 다양한 키를 가져야 할 경우 Map이 더 적합하다는 것을 알 수 있다.

---

 

[참고]

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

Map - JavaScript | MDN