정의 및 사용 방법

Map 객체는 0개 이상의 키(key)와 값(value)을 쌍으로 가지는 객체입니다.
일반 객체(Plain objects)와 유사하게 키와 값을 가지지만, 키·값 쌍을 매핑(mapping)하는 데 특화된 구조의 객체입니다.

매핑(mapping)이란 어떤 값을 다른 값에 대응시키는 과정을 뜻하는 개념이며 수학, 컴퓨터 과학, 지리 정보 시스템 등 다양한 분야해서 사용합니다. Map 객체는 키·값 쌍을 매핑하는데 특화된 구조를 가지고 있고, 관련 속성과 메서드가 있습니다.

특징

  • 0개 이상의 키(key)와 값(value) 쌍을 가집니다.
    이렇게 키(key)와 값(value) 쌍을 "요소(element) 또는 항목(item)"이라고 합니다.
  • 일반 객체와 달리, Map의 키는 문자열, 심볼뿐만 아니라 숫자, 불리언, 객체, 함수 등 모든 데이터 타입을 사용할 수 있습니다.
  • 같은 키를 중복할 수 없으며, 같은 키를 두 번 추가하면 기존 값이 덮어써집니다. 즉, 나중의 값이 적용됩니다.
  • Map은 키의 순서를 기억하며, 순회 시에도 이 순서가 유지됩니다.
  • 관련 속성과 메서드를 사용하여 키와 값에 대한 데이터를 효율적으로 관리할 수 있습니다.

기본 예제

아래 예제는 Map 객체를 사용하는 기본적인 방법을 보여줍니다. new Map()을 사용하여 Map 객체을 생성하고, .set()을 사용해 데이터를 추가하고, .get()으로 데이터를 읽는 등 핵심 메서드와 속성을 직접 확인해 보세요.

JavaScript 
/* 1. 빈 Map 객체 생성 */
const emptyMap = new Map(); // 아무 요소도 없는 빈 Map

/* 2. 초깃값을 가진 Map 생성 */
const initializedMap = new Map([ // 키와 값의 배열을 전달
    ["name", "Alice"],  // 문자열 키
    ["age", 25],        // 숫자 값
    [true, "Boolean"]   // 불리언 키
]);

/* 관련 속성과 메서드를 사용하여 데이터를 효율적으로 관리 */

/* 3. 요소 추가 */
emptyMap.set("fruit", "Apple");  // 문자열 키
emptyMap.set(42, "Answer");      // 숫자 키
emptyMap.set(false, "Boolean");  // 불리언 키
emptyMap.set({}, "Object Key");   // 객체 키

/* 4. 요소 조회 */
console.log(emptyMap.get("fruit")); // 출력: Apple
console.log(emptyMap.get(42));      // 출력: Answer
console.log(initializedMap.get("name")); // 출력: Alice

/* 5. 요소 삭제 */
emptyMap.delete("fruit");           
console.log(emptyMap.has("fruit")); // 출력: false

/* 6. Map 순회 (키-값 쌍 출력) */
for (const [key, value] of emptyMap) {
    console.log(key, value); // 삽입 순서대로 출력
}

/* 7. Map 크기 확인 */
console.log(emptyMap.size);       // Map에 남아있는 요소 개수
console.log(initializedMap.size); // 초기값 Map의 요소 개수

위 기본 예제에 대한 부연설명입니다. 각 코드 단계에서 사용한 핵심 메서드와 특징을 확인해 보세요.

  • new Map() → 빈 Map 객체 생성
  • new Map([[key, value], ...]) → 초깃값이 있는 Map 객체 생성
  • 다양한 타입의 키 사용 가능 → Map 객체의 핵심 특징 강조
  • .set() → 요소 추가, .get() → 조회, .delete() → 삭제
  • for...of → 순회, .size → 요소 개수 확인

더 알아보기!
Map 객체는 for...of 문으로 순회할 수 있는 Iteration Protocols가 적용된 객체입니다.

Map 객체 생성하기

Map 객체를 생성하는 것은 매우 간단합니다. 먼저 구문를 통해 살펴보겠습니다.

구문

JavaScript 
// 1. 빈 Map 객체 생성
new Map()

// 2. 초기값을 가진 Map 객체 생성
new Map(iterable)
설명
Map 객체 생성 구문 설명
new 새로운 Map 객체를 생성할 때 반드시 붙여서 실행해야 하는 연산자입니다.
Map() Map 객체를 생성하는 생성자 함수인 Map을 호출하는 의미입니다.
new Map() 형태로 실행하면 빈 Map 객체가 새로 만들어집니다. new 없이 호출하면 TypeError가 발생합니다.
Map(iterable) new Map(iterable) 형태로 호출하면 초기값이 있는 Map 객체를 생성할 수 있습니다.
  • iterable은 배열, 다른 Map 등 순회 가능한 이터러블 객체를 의미합니다.
  • [ [key1, value1], [key2, value2], ... ] 형태로 묶은 2차원 배열을 전달해, 초깃값을 가진 Map 객체를 생성할 수 있습니다.
예제
JavaScript 
// 1) 빈 Map 객체 생성
const emptyMap = new Map();
console.log(emptyMap); // 출력: Map(0) {}

// 2) 키와 값의 [ [key1, value1], [key2, value2], ... ] 형태로 묶은 2차원 배열을 전달해 초깃값을 가진 Map 생성
const initializedMap = new Map([
    ["name", "Alice"],  // 첫 번째 요소
    ["age", 25]         // 두 번째 요소
]);
console.log(initializedMap); // 출력: Map(2) {'name' => 'Alice', 'age' => 25}

Map 객체 다루기

new 연산자로 생성한 Map 객체는 관련 속성과 메서드가 내장되어 있습니다. 이 속성과 메서드를 사용하면 Map 객체를 쉽고 효율적으로 다룰 수 있습니다.

속성

Map 객체에는 여러 관련 속성들이 있습니다. 여기에서는 대표적인 속성인 .size에 대해 알아보겠습니다.

.size

이 속성은 해당 Map 객체의 요소 개수를 나타냅니다.
.size 속성을 사용하면 객체의 크기나, 순회 시 처리 등에 있어 매우 유용합니다.

JavaScript 
// Map 객체 생성
const myMap = new Map();

// 요소 추가
myMap.set("name", "Alice");
myMap.set("age", 25);

// size 속성으로 요소 개수 확인
console.log(myMap.size); // 출력: 2

// 요소 하나 삭제
myMap.delete("age");
console.log(myMap.size); // 출력: 1

// 모든 요소 삭제
myMap.clear();
console.log(myMap.size); // 출력: 0

메서드

Map 객체에는 데이터를 추가, 조회, 삭제할 수 있는 다양한 메서드가 내장되어 있습니다.
다음은 Map 객체의 대표적인 메서드를 정리한 표입니다.

Map 객체의 대표적인 메서드
.set(key, value) Map에 키·값 쌍을 추가하거나 기존 값을 갱신합니다.
.get(key) Map에서 해당 키에 연결된 값을 반환합니다.
.has(key) Map에 해당 키가 존재하는지 확인합니다.
.delete(key) Map에서 해당 키·값 쌍을 삭제합니다.
.clear() Map의 모든 요소를 삭제합니다.
.forEach() Map의 키·값 쌍을 순서대로 순회해서 콜백 함수로 처리합니다.

메서드들의 구현 방식을 예제를 통해 살펴보겠습니다.

JavaScript 
// Map 객체 생성
const myMap = new Map();

// .set(key, value)으로 요소 추가
myMap.set("name", "Alice");
myMap.set("age", 25);

// .get(key)으로 조회
console.log(myMap.get("name")); // 출력: Alice

// .has(key)로 존재 확인
console.log(myMap.has("age")); // 출력: true

// .delete(key)로 요소 삭제
myMap.delete("age");
console.log(myMap.has("age")); // 출력: false

// clear()로 전체 삭제
myMap.clear();
console.log(myMap.size); // 출력: 0

// .forEach()로 Map 순회
myMap.set("name", "Alice");
myMap.set("city", "Seoul");

myMap.forEach((value, key) => {
    console.log(`${key} => ${value}`);
});
// 출력:
// name => Alice
// city => Seoul

Map과 일반 객체(Plain Objects) 비교

Map과 일반 객체는 모두 키 설정하고, 해당 값을 가져오며, 키를 삭제할 수 있습니다.
하지만 Map에는 일반 객체보다 더 선호할 만한 중요한 차이점이 존재합니다.

Map과 일반 객체(Plain Objects) 비교
비교 항목 Map 일반 객체
키 타입 모든 값 타입 가능 (객체, 함수, NaN, 또는 원시값 등) 문자열 또는 Symbol만 가능
키 순서 삽입 순서 유지 ES2015 이후 삽입 순서 일부 보장 (숫자 키 특수 처리)
요소 개수 확인 .size 속성으로 쉽게 확인할 수 있음 우회적인 방법인 Object.keys(obj).length에서 반환된 배열의 길이를 통해서 확인 가능하므로 비효율적임
순회 Map 객체는 Iteration Protocols가 적용된 객체이며, 메서드인 forEach()(예: map.forEach()) 또는 for...of 문으로 직접 순회가 가능 일반 객체는 Iteration Protocols가 적용되지 않은 객체로 for...of 문으로 직접 순회가 가능하지 않음. for...in 문을 사용하면 객체의 속성(key)를 순회할 수 있음
성능 키·값의 빈번한 추가나 제거하는 시나리오에서 더 나은 성능을 발휘 키·값의 빈번한 추가 및 제거에 최적화되어 있지 않음

객체 속성 설정의 주의사항

일반 객체의 속성을 설정하는 것처럼 Map 객체에 속성을 직접 설정할 수도 있지만, 이것은 상당한 혼란을 야기할 수 있습니다.
왜냐하면 이런 방식으로 속성을 설정하면 Map 객체의 데이터 구조와 상호 작용하지 않기 때문입니다.

JavaScript 
// Map 객체 생성
const myMap = new Map();

// 잘못된 사용: 객체처럼 속성 할당
myMap["key1"] = "value1";
myMap["key2"] = "value2";

// Map 요소 확인
console.log(myMap);      // Map(0) {}
console.log(myMap.size); // 0 → 실제 Map 요소 없음

// 객체 속성 확인
console.log(myMap["key1"]); // "value1"
console.log(myMap["key2"]); // "value2"

Map 객체에서 데이터를 저장하는 올바른 방법은 .set(key, value) 메서드를 사용하는 것입니다. 이 메서드는 Map에 키·값 쌍을 추가하거나 기존 값을 갱신합니다.

JavaScript 
// Map 객체 생성
const userMap = new Map();

// 1) 새 키-값 쌍 추가
userMap.set("name", "Alice");
userMap.set("age", 25);

console.log(userMap);
// 출력 예시: Map(2) { 'name' => 'Alice', 'age' => 25 }

// 2) 기존 키 값 갱신
userMap.set("age", 26);
console.log(userMap.get("age")); 
// 출력: 26

Map 객체의 순회

Map 객체는 Iteration Protocols가 적용된 객체이며, 메서드인 forEach()(예: map.forEach()) 또는 for...of 문을 사용해 직접 순회할 수 있습니다.

.forEach() 메서드 순회

Map 객체에는 .forEach() 메서드가 내장되어 있어, 이 메서드를 이용하면 쉽게 순회를 할 수 있습니다.

JavaScript 
// Map 객체 생성
const map = new Map([
    ["name", "Alice"],
    ["age", 26]
]);

// .forEach() 메서드 사용
// 콜백 첫 번째 매개변수: 값(value), 두 번째 매개변수: 키(key)
map.forEach((value, key) => {
    console.log(`${key} => ${value}`);
});
// 출력:
// name => Alice
// age => 26

for...of 문 순회

Map 객체는 Iteration Protocols가 적용된 객체이며, for...of 문을 사용해 직접 순회할 수 있습니다.

JavaScript 
const map = new Map([
    ["name", "Alice"],
    ["age", 26],
    ["city", "Seoul"]
]);

for (const [key, value] of map) {
    console.log(`${key}: ${value}`);
}
// 출력:
// name: Alice
// age: 26
// city: Seoul

활용 예제

Map 객체의 장점은 첫 번째로 "데이터의 순서가 중요할 때", 두 번째로 키로 다양한 종류의 데이터를 사용할 수 있다는 것입니다. 이 두 장점을 활용한 예제입니다.

데이터의 순서가 중요할 때: 참가자 명단 관리하기

Map은 데이터의 순서가 중요할 때 빛을 발합니다. 예를 들어, 참가자가 도착한 순서대로 명단을 작성하고 싶을 때 Map을 사용하면 순서를 그대로 유지할 수 있습니다. 일반 객체는 순서가 보장되지 않으므로, 이 예제에는 Map이 더 적합합니다.

JavaScript 
// 참가자들이 도착한 순서대로 명단 만들기
const arrivalList = new Map();

// 참가자 도착 순서대로 Map에 기록 (key: 순서, value: 이름)
arrivalList.set(1, '김민지');
arrivalList.set(2, '박서준');
arrivalList.set(3, '이하윤');

// 순서대로 참가자 명단 출력
console.log("참가자 도착 순서:");
// for...of 반복문을 사용하여 순서대로 명단 확인
for (const [rank, name] of arrivalList) {
    console.log(`${rank}등: ${name}`);
}

// 출력:
// 참가자 도착 순서:
// 1등: 김민지
// 2등: 박서준
// 3등: 이하윤

키로 다양한 종류의 데이터를 사용: '좋아요' 누른 사용자 목록 만들기

Map의 또 다른 장점은 키로 다양한 종류의 데이터를 사용할 수 있다는 것입니다. 일반 객체는 키로 문자열만 사용 가능하지만, Map은 숫자, 객체, 심지어 DOM 요소까지 키로 쓸 수 있습니다. 이 예제는 '게시물'이라는 객체를 키로 사용해서, 어떤 사용자가 어떤 게시물을 좋아하는지 기록하는 간단한 시스템을 보여줍니다.

JavaScript 
// 게시물 데이터
const post1 = { id: 'p1', title: '자바스크립트' };
const post2 = { id: 'p2', title: 'HTML & CSS' };

// '좋아요'를 누른 사용자 목록 Map 생성 (key: 게시물 객체, value: 사용자 배열)
const likedByUsers = new Map();

// 첫 번째 게시물에 '김철수'가 '좋아요'를 눌렀다고 기록
likedByUsers.set(post1, ['김철수']);

// 두 번째 게시물에 '이영희'와 '박준'이 '좋아요'를 누름
likedByUsers.set(post2, ['이영희', '박준']);

// 특정 게시물에 좋아요 누른 사용자 확인
console.log(`${post1.title}을 좋아하는 사람: ${likedByUsers.get(post1).join(', ')}`);
// 출력: 자바스크립트를 좋아하는 사람: 김철수

명세서

Map 객체의 명세서 사양
명세서 사양
Map ECMAScript® 2026 Language Specification
#sec-map-objects
Map() ECMAScript® 2026 Language Specification
#sec-map-constructor

브라우저 호환성

Map 객체의 브라우저 호환성
객체
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Map 예 예 예 예
Map() 생성자 예 예 예 예
new Map(iterable) 예 예 예 예
new Map(null) 예 예 예 예
.size 예 예 예 예
.set(key, value) 예 예 예 예
.get(key) 예 예 예 예
.has(key) 예 예 예 예
.delete(key) 예 예 예 예
.clear() 예 예 예 예
.forEach() 예 예 예 예

참고문헌

같이 보기