Map과 Object 비교, 언제 어떻게 사용할까?

JavaScript에서 데이터를 저장하고 관리하는 방법은 다양합니다. 그중에서도 키-값 쌍을 다루는 데이터 구조로 Object와 Map이 있습니다. 이 두 가지는 언뜻 보면 비슷해 보이지만, 사용 목적과 특성에 중요한 차이가 있습니다. 이 글에서는 Object와 Map의 차이점, 각각의 장단점, 그리고 TypeScript와 함께 사용할 때의 이점에 대해 자세히 알아보겠습니다.

1. Object

const user = {
  name: '남광민',
  age: 30,
  isAdmin: true
};

2. Map

const map = new Map();
map.set('name', '남광민');
map.set('age', 30);
map.set('isAdmin', true);

3. 주요 차이점

3.1 키의 타입

Object

• 키는 문자열 또는 Symbol만 가능합니다.
• 숫자 키를 사용하면 자동으로 문자열로 변환됩니다.

  const obj = {};
  obj[1] = "value";
  console.log(Object.keys(obj)); // ["1"] (문자열로 변환됨)

Map

• 키로 모든 값(객체, 함수, 원시 타입 등)을 사용할 수 있습니다.

  const map = new Map();
  map.set(1, "number as key");
  map.set({}, "object as key");
  map.set(() => {}, "function as key");

3.2 순서 보장

Object

• ES2015 이전에는 속성의 순서가 보장되지 않았습니다.
• 최신 JavaScript 엔진에서는 대체로 순서가 보존되지만, 공식적으로 보장되지는 않습니다.

Map

• 항목이 삽입된 순서대로 반복됩니다.
• 순서가 명시적으로 보장됩니다.

3.3 크기(size) 확인

Object

• 크기를 직접 확인하는 속성이 없습니다.
• Object.keys(obj).length와 같은 방법으로 확인해야 합니다.

Map

• size 속성으로 쉽게 크기를 확인할 수 있습니다.

  const map = new Map([["a", 1], ["b", 2]]);
  console.log(map.size); // 2

3.4 반복 처리 (Iteration)

Object

• for...in, Object.keys(), Object.values(), Object.entries() 등을 사용합니다.
• 프로토타입 체인의 속성도 포함될 수 있어 주의가 필요합니다.

Map

• forEach, for...of, keys(), values(), entries() 메서드를 제공합니다.
• 삽입 순서대로 반복됩니다.

  const map = new Map([["a", 1], ["b", 2]]);
  // 모든 키-값 쌍 반복
  for (const [key, value] of map) {
    console.log(`${key}: ${value}`);
  }
  // 키만 반복
  for (const key of map.keys()) {
    console.log(key);
  }
  // 값만 반복
  for (const value of map.values()) {
    console.log(value);
  }

3.5. 성능

Object

• 소규모 데이터에 적합합니다.
• 키-값 쌍의 추가/제거가 빈번하지 않은 경우 좋습니다.

Map

• 빈번한 추가/제거 작업에 더 최적화되어 있습니다.
• 대규모 데이터 세트에서 더 나은 성능을 보입니다.
• 키 충돌 처리가 더 효율적입니다.

4. 결론

JavaScript에서 Object와 Map은 각각 고유한 특성과 장점을 가지고 있습니다. Object는 간단하고 직관적인 데이터 구조로, 특히 TypeScript와 함께 사용할 때 정적 타입의 이점을 최대한 활용할 수 있습니다. 반면 Map은 더 다양한 키 타입, 순서 보장, 효율적인 반복 처리 등 고급 기능을 제공합니다. 프로젝트의 요구사항, 데이터의 특성, 성능 고려사항을 바탕으로 적절한 데이터 구조를 선택하는 것이 중요합니다. 두 구조의 장단점을 이해하고 상황에 맞게 활용한다면, 더 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있을 것입니다.