JavaScript Map vs Object: 성능과 사용법

자바스크립트의 Map과 Object의 특징과 성능 차이를 종합적으로 살펴보겠습니다:

Map의 기본 특징

키-값 저장소

• 모든 데이터 타입을 키로 사용 가능 (객체도 가능)
• 삽입 순서가 보장됨
• size 속성으로 크기 확인 가능

제공 메서드

• set(): 값 추가/수정
• get(): 값 조회
• delete(): 값 삭제
• has(): 키 존재 여부 확인

Map 사용법

Map 생성하기

// 빈 Map 생성
const myMap = new Map();

// 초기값과 함께 생성
const myMap2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

Map 조작하기

const myMap = new Map();

// 값 추가
myMap.set('name', 'John');

// 값 조회
console.log(myMap.get('name')); // 'John'

// 키 존재 확인
console.log(myMap.has('name')); // true

// 값 삭제
myMap.delete('name');

// 전체 삭제
myMap.clear();

Map 순회하기

const myMap = new Map([['a', 1], ['b', 2]]);

// for...of 사용
for (let [key, value] of myMap) {
  console.log(key, value);
}

// forEach 사용
myMap.forEach((value, key) => {
  console.log(key, value);
});

// 키만 순회
for (let key of myMap.keys()) {
  console.log(key);
}

// 값만 순회
for (let value of myMap.values()) {
  console.log(value);
}

내부 구현의 최적화

해시맵 특화 설계

• Map은 동적인 키-값 쌍의 빈번한 추가/삭제를 위해 특별히 설계되었습니다
• Object는 프로토타입 체인과 상속 구조로 인한 오버헤드가 있습니다

VM 최적화 차이

• JavaScript 엔진은 Object를 shape assumption(형태 가정)으로 최적화하려 합니다
• Map은 동적으로 변하는 해시맵 용도로 설계되어 이러한 제약이 없습니다

성능 특성

작업별 성능 비교

• 삽입 작업: Map이 Object보다 최대 45.8배 더 빠름
• 삭제 작업: Map이 Object보다 31배 더 빠름
• 검색 작업: Map이 Object보다 2.6배 더 빠름

예외 케이스

• 문자열 키를 사용하는 읽기 중심 작업에서는 Object가 더 나은 성능을 보임
• 작은 정수를 키로 사용할 때는 Object가 더 효율적

메모리 효율성

• Map은 동일한 크기의 Object보다 메모리 사용량이 적음
• 특히 큰 데이터셋에서 메모리 효율성이 더욱 두드러짐

브라우저 지원

• 2017년 6월 이후 모든 최신 브라우저 지원
• Internet Explorer 미지원