JavaScript Object 대신 Map을 사용해보자

JavaScript에서 데이터를 키-값 형태로 저장해야 할 때, 대부분의 개발자들은 가장 먼저 Object를 떠올립니다. 중괄호 {}를 이용한 간편한 문법 덕분에 오랜 시간 동안 표준처럼 사용되어 왔죠. 하지만 ES6 이후 등장한 Map 객체는 Object의 대체재로 주목받고 있으며, 다양한 책과 문서에서는 Map의 사용을 권장하고 있습니다. 그렇다면 왜 Object 대신 Map을 사용해야 할까요? 그리고 두 자료구조는 어떤 차이점을 가지고 있을까요?

Object와 Map의 기본 구조

먼저 기본적인 사용법을 비교해보면 다음과 같습니다.

// Object
const obj = {};
obj["key"] = "value";

// Map
const map = new Map();
map.set("key", "value");

겉보기엔 큰 차이가 없어 보이지만, 내부 동작과 인터페이스 측면에서는 많은 차이가 있습니다.

인터페이스와 일관성

Object는 본래 key-value 저장소가 아니라, 객체를 표현하기 위한 구조였습니다. 이 때문에 데이터를 다룰 때 일관성이 떨어지는 면이 있습니다. 예를 들어, 값을 삭제할 땐 delete obj.key를 사용하고, 값의 존재 여부를 확인할 땐 'key' in obj 또는 obj.hasOwnProperty('key')를 사용합니다. 반면, Map은 전용 API를 제공하여 보다 직관적이고 일관된 방식으로 조작할 수 있습니다.

map.set("a", 1);    // 값 추가
map.get("a");       // 값 조회
map.has("a");       // 존재 여부 확인
map.delete("a");    // 값 삭제

이처럼 Map은 set, get, has, delete 등 일관된 메서드 기반 인터페이스를 제공하여 사용성을 높입니다.

키의 타입 제한

Object는 키로 문자열 또는 심볼만 사용할 수 있지만, Map은 모든 데이터 타입을 키로 사용할 수 있습니다. 숫자, 객체, 함수 등 다양한 값을 자유롭게 키로 설정할 수 있어 더 유연한 자료구조입니다.

const map = new Map();
const objKey = {};
map.set(objKey, "value"); // 객체를 키로 사용

순서 보장과 이터러블

또 하나의 중요한 차이점은 이터러블(iterable) 지원입니다. Map은 for...of 문으로 순회할 수 있으며, 삽입 순서를 보장합니다. 반면, Object는 for...in을 사용해야 하고, 키 순서가 예측하기 어렵습니다. 물론 Object.entries()를 통해 배열 형태로 변환 후 for...of로 순회할 수 있지만, 이는 부가적인 비용이 발생합니다.

또한, Map은 .size 프로퍼티를 통해 간단하게 요소의 개수를 확인할 수 있는 반면, Object는 Object.keys(obj).length와 같은 우회적인 방법을 사용해야 합니다.

성능과 메모리

일반적으로 Map은 많은 키-값 쌍을 다룰 때 성능상 이점을 보입니다. 특히 빈번한 추가 및 삭제 연산이 일어나는 경우, 내부 해시 구조를 가진 Map이 더 빠르게 동작할 수 있습니다. 다만, 매우 적은 수의 키를 다룬다면 Object와의 차이는 크지 않을 수 있습니다.

실무에서는 여전히 Object를 많이 쓴다?

실무에서는 여전히 {} 리터럴을 자주 사용합니다. 간단한 설정값 저장이나 JSON 처리 등에서는 Object가 여전히 편리하기 때문입니다. 그러나 상태를 관리하거나, 반복적인 키 접근과 수정이 필요한 구조에서는 Map이 더 나은 선택입니다.

또한, 다양한 라이브러리와 프레임워크에서는 iterable한 구조에 맞춘 API를 많이 제공합니다. Map과 Set은 iterable 인터페이스를 기본적으로 따르기 때문에 이러한 환경에 더 잘 맞습니다.

결론

Object는 여전히 JavaScript에서 유용하고 간단한 구조이지만, 점점 더 많은 상황에서 Map이 더 나은 선택이 될 수 있습니다. 명확한 인터페이스, 다양한 키 지원, 순서 보장, iterable한 구조 등은 코드의 일관성과 가독성을 높이고, 실수를 줄이며, 성능에도 도움을 줄 수 있습니다. 앞으로의 JavaScript 개발에서는 상황에 따라 Object 대신 Map을 사용하는 것도 좋은 선택이 될 수 있습니다.

조각 기록