자바스크립트에서 데이터를 키-값 형태로 저장할 때 가장 많이 고민되는 부분이 바로 Map과 일반 객체(Object) 중 무엇을 선택할지입니다. 두 방식은 비슷해 보이지만, 내부 동작과 지원하는 기능에서 뚜렷한 차이가 있습니다.
Map 객체란?
MDN 공식 문서에 따르면, Map 객체는 키-값 쌍을 저장하며 키가 처음 삽입된 순서를 기억합니다. 또한 모든 값(객체와 원시 값 모두)을 키 또는 값으로 사용할 수 있습니다.
1. 객체도 키로 사용 가능
여기서 주목해야 할 핵심은 Map에서는 객체 자체도 키로 사용할 수 있다는 점입니다. 반면 일반 자바스크립트 객체는 문자열(Symbol 포함) 같은 원시 값만 키로 허용하기 때문에, 객체를 키로 사용해야 하는 상황이라면 Map이 유일한 선택지입니다.
2. 삽입 순서대로 순회 가능
Map이 특정 시나리오에서 유용한 또 다른 이유는 이터러블(iterable)이라는 점입니다. Map은 키가 삽입된 순서 그대로 순회할 수 있으므로, 키의 순서를 유지하면서 각 키에 연관된 값을 함께 관리해야 하는 경우에 적합합니다.
예제 코드
다양한 타입의 키를 사용하는 Map의 기본적인 사용 예시입니다.
const myMap = new Map();
const keyString = 'a string';
const keyObj = {};
const keyFunc = function() {};
// 다양한 종류의 키로 값 설정
myMap.set(keyString, 'String Val');
myMap.set(keyObj, 'Object val');
myMap.set(keyFunc, 'function val');
console.log(myMap.size);
console.log(myMap.get(keyString));실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
3 String Val
예제에서 볼 수 있듯이 하나의 Map에 문자열, 객체, 함수까지 서로 다른 타입의 키를 자유롭게 섞어 사용할 수 있으며, size 속성으로 저장된 요소 개수를 손쉽게 확인할 수 있습니다.
정리
- 객체를 키로 사용해야 하는 경우 → Map을 사용하세요.
- 키의 삽입 순서를 유지하며 순회해야 하는 경우 → Map이 적합합니다.
- 단순한 정적 구조의 데이터나 JSON 직렬화가 필요한 경우 → 일반 객체가 여전히 좋은 선택입니다.