JavaScript에서 키-값 쌍을 저장할 때, 대부분 {} 객체를 씁니다. 그런데 ES6에서 Map이 추가되었습니다. 왜 Object가 있는데 Map을 따로 만들었을까요? "둘 다 키-값 저장소 아니야?"라고 생각하기 쉽지만, 내부 구조부터 용도까지 근본적으로 다릅니다.

Object의 본질: 프로퍼티 컨테이너

Object는 원래 키-값 저장소로 설계된 것이 아닙니다. 프로퍼티의 집합입니다. 메서드를 담고, 프로토타입 체인을 통해 상속을 구현하는 것이 본래 목적입니다.

const user = {
  name: 'Kim',
  greet() {
    return `Hello, ${this.name}`;
  },
};

// user는 "데이터 저장소"가 아니라 "엔티티"입니다.
// 프로퍼티(name)와 행위(greet)를 함께 가집니다.

이 구조를 키-값 저장소로 쓰면 여러 문제가 생깁니다.

프로토타입 오염

const map = {};
map['toString'] = 'hello';

// 의도: 'toString'이라는 키에 'hello'를 저장
// 실제: Object.prototype.toString을 덮어씀
typeof map.toString; // 'string' (함수가 아니라 문자열)

Object.create(null)로 프로토타입 없는 객체를 만들면 이 문제를 피할 수 있지만, 그건 Object의 핵심 기능(프로토타입 체인)을 포기하는 것입니다. 키-값 저장소로 쓰기 위해 Object의 본질을 부정하는 셈입니다.

키 타입 제한

Object의 키는 문자열 또는 Symbol만 가능합니다.

const obj = {};
const key1 = { id: 1 };
const key2 = { id: 2 };

obj[key1] = 'first';
obj[key2] = 'second';

console.log(obj[key1]); // 'second' ← 'first'가 아닙니다
console.log(Object.keys(obj)); // ['[object Object]']
// key1과 key2 모두 '[object Object]'로 변환되어 같은 키가 됩니다.

숫자를 키로 써도 내부적으로 문자열로 변환됩니다.

const obj = {};
obj[1] = 'one';
obj['1'] = 'one string';

console.log(obj[1]); // 'one string'
// 숫자 1과 문자열 '1'이 같은 키입니다.

Map의 설계: 순수한 키-값 저장소

Map은 처음부터 키-값 저장소로 설계되었습니다. Object의 키-값 용도 한계를 해결하기 위해 ES6에서 추가되었습니다.

const map = new Map();

// 어떤 타입이든 키로 사용 가능
map.set(1, 'number key');
map.set('1', 'string key');
map.set(true, 'boolean key');
map.set(null, 'null key');
map.set({ id: 1 }, 'object key');
map.set(document.body, 'DOM element key');

console.log(map.get(1));   // 'number key'
console.log(map.get('1')); // 'string key' — 구분됩니다

Map의 키 비교는 SameValueZero 알고리즘을 사용합니다. ===와 거의 같지만, NaN === NaN을 true로 처리합니다.

const map = new Map();

map.set(NaN, 'not a number');
console.log(map.get(NaN)); // 'not a number'
// === 에서는 NaN !== NaN이지만, Map에서는 같은 키로 취급합니다.

map.set(0, 'zero');
map.set(-0, 'negative zero');
console.log(map.get(0)); // 'negative zero'
// 0과 -0도 같은 키로 취급합니다.

단, 객체 키는 참조 동일성으로 비교합니다.

const map = new Map();

map.set({ id: 1 }, 'first');
console.log(map.get({ id: 1 })); // undefined
// 내용이 같아도 다른 참조이므로 다른 키입니다.

const key = { id: 1 };
map.set(key, 'found');
console.log(map.get(key)); // 'found'
// 같은 참조를 사용해야 합니다.

핵심 차이 비교

	Object	Map
키 타입	문자열, Symbol	모든 값 (객체, 함수, 원시값)
키 순서	정수 키 → 문자열 키(삽입순) → Symbol 키	항상 삽입 순서 보장
크기 확인	Object.keys(obj).length (O(n))	map.size (O(1))
반복	Object.keys() / for...in	for...of / forEach (직접 iterable)
프로토타입	있음 (키 충돌 가능)	없음 (순수 저장소)
직렬화	JSON.stringify() 네이티브 지원	직접 변환 필요
성능 (빈번한 추가/삭제)	느림	빠름

삽입 순서와 키 정렬

Object의 키 순서는 직관적이지 않습니다. ECMAScript 스펙에서 정의된 규칙이 있습니다.

const obj = {};
obj['b'] = 2;
obj['1'] = 1;
obj['a'] = 3;
obj['2'] = 4;
obj[Symbol('s')] = 5;

console.log(Object.keys(obj));
// ['1', '2', 'b', 'a']
// 정수 키가 먼저(오름차순) → 문자열 키(삽입순) → Symbol(Object.keys에는 안 나옴)

Map은 단순합니다. 항상 삽입 순서입니다.

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

console.log([...map.keys()]); // ['b', 1, 'a', 2] — 넣은 순서 그대로

순회(Iteration) 차이

Object는 기본적으로 iterable이 아닙니다. for...of를 직접 사용할 수 없습니다.

const obj = { a: 1, b: 2, c: 3 };

// ❌ TypeError: obj is not iterable
for (const [key, value] of obj) { }

// Object를 순회하려면 변환이 필요합니다
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// 또는 for...in (프로토타입 체인의 프로퍼티도 포함될 수 있음)
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

Map은 iterable protocol을 구현하고 있어서 직접 순회할 수 있습니다.

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

// ✅ 바로 사용 가능
for (const [key, value] of map) {
  console.log(key, value);
}

// 구조 분해, 스프레드, Array.from 모두 가능
const entries = [...map];           // [['a', 1], ['b', 2], ['c', 3]]
const keys = [...map.keys()];       // ['a', 'b', 'c']
const values = [...map.values()];   // [1, 2, 3]

// forEach도 지원 (콜백 인자 순서 주의: value, key)
map.forEach((value, key) => {
  console.log(key, value);
});

성능: 언제 차이가 나는가

V8 엔진은 Object를 Hidden Class(내부적으로 Shape 또는 Structure라고 부릅니다)로 최적화합니다. 같은 구조의 객체를 반복 생성하면 같은 Hidden Class를 공유하며, 프로퍼티 접근이 정적 오프셋 계산으로 이루어져 매우 빠릅니다.

// V8이 Hidden Class를 만들어 최적화하는 패턴
function createUser(name, age) {
  return { name, age }; // 항상 같은 구조 → 같은 Hidden Class
}

// 이렇게 쓰면 정적 컴파일 언어 수준의 프로퍼티 접근 속도
const user = createUser('Kim', 30);
console.log(user.name); // Hidden Class 덕분에 오프셋 계산으로 즉시 접근

하지만 Object를 키-값 저장소처럼 동적으로 프로퍼티를 추가/삭제하면 Hidden Class 최적화가 깨집니다. V8은 이런 Object를 "dictionary mode"로 전환하는데, 이 모드에서는 해시 테이블을 사용합니다.

const cache = {};

// 프로퍼티를 계속 추가/삭제하면 dictionary mode로 전환
for (let i = 0; i < 10000; i++) {
  cache[`key_${i}`] = i;
}

// delete 연산은 Hidden Class를 깨뜨리는 대표적인 패턴
delete cache['key_500'];

Map은 처음부터 해시 테이블로 구현되어 있습니다. 동적 추가/삭제가 빈번한 경우 Map이 더 효율적입니다.

벤치마크 경향

실제 성능은 엔진, 데이터 크기, 접근 패턴에 따라 달라지지만, 일반적인 경향은 다음과 같습니다.

연산	Object	Map
고정 구조의 프로퍼티 읽기	빠름 (Hidden Class 최적화)	보통
동적 키 추가	느려질 수 있음 (dictionary mode 전환)	빠름
키 삭제	느림 (delete가 Hidden Class 파괴)	빠름
크기 확인	느림 (Object.keys().length, O(n))	빠름 (size, O(1))
키 존재 확인	'key' in obj 또는 hasOwnProperty	map.has(key) (둘 다 빠름)

delete 연산이 Object에서 특히 비용이 큰 이유는, Hidden Class 전환(transition)을 발생시키기 때문입니다. V8은 프로퍼티가 삭제되면 새로운 Hidden Class를 생성하거나 dictionary mode로 전환합니다. 반면 Map의 delete()는 해시 테이블에서 엔트리를 제거하는 단순한 연산입니다.

메모리: Map이 더 효율적인 경우

많은 키-값 쌍을 저장할 때, Map이 Object보다 메모리를 적게 사용하는 경향이 있습니다. Object는 Hidden Class 메타데이터, 프로토타입 체인, 프로퍼티 디스크립터(writable, enumerable, configurable) 등 부가 정보를 유지해야 합니다. Map은 키-값 쌍만 저장합니다.

V8 블로그에 따르면, 수천 개 이상의 엔트리를 가진 컬렉션에서 Map의 메모리 효율이 Object를 크게 앞섭니다.

JSON과의 관계

Object의 가장 큰 실용적 장점은 JSON과의 1:1 호환입니다.

const obj = { name: 'Kim', age: 30, active: true };
const json = JSON.stringify(obj); // '{"name":"Kim","age":30,"active":true}'
const parsed = JSON.parse(json);  // { name: 'Kim', age: 30, active: true }

Map은 JSON 직렬화를 네이티브로 지원하지 않습니다.

const map = new Map([['name', 'Kim'], ['age', 30]]);

JSON.stringify(map); // '{}'  ← 빈 객체가 됩니다

// 변환이 필요합니다
JSON.stringify(Object.fromEntries(map)); // '{"name":"Kim","age":30}'

// 복원
new Map(Object.entries(JSON.parse(json)));

API 응답, 설정 파일, 데이터 교환 등 JSON이 필요한 곳에서는 Object가 자연스럽습니다.

WeakMap: 메모리 누수 방지

Map의 특수한 변형인 WeakMap은 키에 대한 약한 참조를 유지합니다. 키로 사용된 객체가 다른 곳에서 참조되지 않으면 가비지 컬렉션 대상이 됩니다.

const metadata = new WeakMap();

function processElement(element) {
  // DOM 요소에 메타데이터를 연결
  metadata.set(element, {
    clickCount: 0,
    lastAccessed: Date.now(),
  });
}

// element가 DOM에서 제거되고 다른 참조도 없으면,
// WeakMap의 엔트리도 자동으로 가비지 컬렉션됩니다.
// Map이었다면 명시적으로 delete하지 않는 한 메모리에 남습니다.

WeakMap의 제약사항은 다음과 같습니다.

• 키는 객체 또는 등록되지 않은 Symbol만 가능 (원시값 불가)
• iterable이 아님 — keys(), values(), entries(), forEach, size 없음
• 순회할 수 없는 이유는 가비지 컬렉션 타이밍이 비결정적이기 때문입니다

대표적인 활용 사례는 다음과 같습니다.

// 1. 프라이빗 데이터
const privates = new WeakMap();

class Counter {
  constructor() {
    privates.set(this, { count: 0 });
  }
  increment() {
    const data = privates.get(this);
    data.count++;
  }
  getCount() {
    return privates.get(this).count;
  }
}
// Counter 인스턴스가 GC되면 private 데이터도 함께 사라집니다.

// 2. 캐시
const cache = new WeakMap();

function expensiveComputation(obj) {
  if (cache.has(obj)) return cache.get(obj);
  const result = /* 비용이 큰 계산 */ obj;
  cache.set(obj, result);
  return result;
}
// obj가 더 이상 사용되지 않으면 캐시도 자동 정리됩니다.

언제 뭘 써야 하나

Object를 쓰는 경우:

• 구조가 고정된 엔티티를 표현할 때 ({ name, age, email })
• JSON과 직접 변환이 필요할 때
• 구조 분해 할당, 스프레드 문법을 활용할 때
• 메서드를 포함하는 객체를 만들 때

// ✅ Object가 적합한 경우
const config = {
  host: 'localhost',
  port: 3000,
  debug: true,
};

const { host, port } = config; // 구조 분해
const extended = { ...config, port: 8080 }; // 스프레드

Map을 쓰는 경우:

• 키가 문자열이 아닌 경우 (DOM 요소, 객체 등)
• 키-값 쌍이 동적으로 자주 추가/삭제되는 경우
• 삽입 순서가 중요한 경우
• 엔트리 개수를 자주 확인하는 경우
• 키 이름이 예측할 수 없는 사용자 입력인 경우

// ✅ Map이 적합한 경우
const clickCounts = new Map();

document.querySelectorAll('button').forEach((btn) => {
  btn.addEventListener('click', () => {
    // DOM 요소를 키로 사용
    const count = clickCounts.get(btn) || 0;
    clickCounts.set(btn, count + 1);
  });
});

// 이벤트 핸들러 레지스트리
const handlers = new Map();
handlers.set(fetchUser, { retries: 3, timeout: 5000 });
handlers.set(fetchPosts, { retries: 1, timeout: 10000 });

WeakMap을 쓰는 경우:

• 객체에 메타데이터를 연결하되 수명을 객체에 맞추고 싶을 때
• 캐시를 구현하되 메모리 누수를 방지하고 싶을 때
• 프라이빗 데이터를 저장할 때

정리

Object와 Map은 겉보기에 비슷하지만 설계 목적이 다릅니다. Object는 프로퍼티와 행위를 가진 엔티티를 표현하기 위한 것이고, Map은 키-값 쌍의 컬렉션을 다루기 위한 것입니다.

코드에서 {} 를 습관적으로 쓰고 있다면 한 번 생각해 볼 가치가 있습니다. "이건 엔티티인가, 컬렉션인가?" 엔티티라면 Object, 컬렉션이라면 Map이 맞는 도구입니다.

참고

• MDN - Map
• MDN - WeakMap
• ECMAScript Specification - Map Objects
• V8 Blog - Fast properties in V8
• MDN - Enumerability and ownership of properties