JavaScript 컬렉션 - Map

Map 한 줄 요약

Map은 "키-값 쌍 목록(넣은 순서는 유지됨)"이다.
키로 문자열뿐 아니라 숫자, 객체, 배열 같은 값도 그대로 사용할 수 있다.

 

처음 보면 보통 이런 생각이 든다.

• Object({})랑 뭐가 다르지?
• 그냥 객체 쓰면 안 되나?
• Map도 결국 객체라던데?

---

먼저 감 잡기 (Object와 차이)

• Object ({}): JSON/응답 데이터/설정값처럼 이름 붙은 데이터 구조에 자주 사용
• Map (new Map()): 키-값을 추가/삭제/검색/순회하는 컬렉션 용도에 잘 맞음
• 서버 응답 / 설정값 / 모델 데이터 중심이면 → Object
• 매핑 테이블 / 캐시 / lookup / 키-값 컬렉션 조작 중심이면 → Map

---

용어 10초 정리

블로그/문서에서 아래 단어가 자주 나오는데, 처음엔 이렇게 이해하면 충분하다.

• 컬렉션(Collection): 값을 여러 개 담아두는 자료형/자료구조 (예: Array, Set, Map)
• 이터러블(Iterable): for...of로 순회할 수 있는 값 (예: Array, Set, Map, 문자열)

즉, Map은 "컬렉션"이고, 동시에 "이터러블" 이다.

• 컬렉션이라서 키-값 쌍을 여러 개 담을 수 있고
• 이터러블이라서 for...of로 [key, value]를 바로 순회할 수 있다

---

Map이란 뭐냐? (진짜 핵심만)

한 줄로 정리하면:

"키-값 쌍을 순서 있게 저장하는 컬렉션"

 

핵심 특징:

• 키-값 쌍 저장: key -> value 형태
• 삽입 순서 유지: 넣은 순서대로 순회됨
• 키 타입 자유로움: 문자열뿐 아니라 숫자/객체/배열도 가능
• 개수 확인 쉬움: map.size
• 이터러블: for...of, keys(), values(), entries() 사용 가능

const map = new Map();

map.set('name', 'JavaScript');
map.set('year', 1995);

console.log(map.get('name')); // 'JavaScript'
console.log(map.has('year')); // true
console.log(map.size);        // 2

---

실무에서 먼저 알아두면 좋은 포인트

1) Map의 키는 "값 자체" 기준이다

특히 객체를 키로 쓸 때 이게 제일 중요하다.

const keyObj = { id: 1 };
const map = new Map();

map.set(keyObj, 'hello');

console.log(map.get(keyObj));     // 'hello'
console.log(map.get({ id: 1 }));  // undefined (다른 객체 참조)

{ id: 1 } 모양이 같아도 다른 객체면 다른 키로 취급된다.

---

2) Object와 경쟁 관계라기보다 "용도"가 다르다

• Object: 데이터 구조(응답 데이터, 설정값, JSON) 느낌
• Map: 동적으로 키-값을 관리하는 컬렉션 느낌

둘 중 하나가 무조건 더 좋다기보다, 상황에 맞게 선택하는 게 핵심이다.

---

핵심 메서드 6개만 먼저 보기

• set(key, value) : 키에 값 저장 (이미 있으면 덮어씀)
• get(key) : 값 조회 (없으면 undefined)
• has(key) : 키 존재 여부 확인 (true / false)
• delete(key) : 키 삭제
• clear() : 전체 삭제
• size : 저장된 키-값 쌍 개수

const userMap = new Map();

userMap.set(101, { name: 'Kim' });
userMap.set(102, { name: 'Lee' });
userMap.set(101, { name: 'Kim Updated' }); // 같은 키라 값 덮어씀

console.log(userMap.get(101)); // { name: 'Kim Updated' }
console.log(userMap.has(102)); // true
console.log(userMap.size);     // 2

userMap.delete(102);
console.log(userMap.size);     // 1

---

생성 패턴 먼저 익히기 (자주 씀)

1) 빈 Map 만들기

const map = new Map();

2) 초기값과 함께 만들기

[key, value] 쌍의 배열을 넣는다.

const map = new Map([
  ['name', 'JS'],
  ['level', 'junior'],
  ['year', 2025],
]);

처음엔 이 패턴만 외워도 충분하다.

new Map([[key, value], [key, value]])

---

Map 순회 (for...of가 기본)

Map은 이터러블이라 for...of로 바로 순회할 수 있다.
기본 순회 결과는 [key, value] 쌍이다.

const scoreMap = new Map([
  ['a', 10],
  ['b', 20],
  ['c', 30],
]);

for (const [key, value] of scoreMap) {
  console.log(key, value);
}
// a 10
// b 20
// c 30

키/값만 따로 보고 싶을 때

for (const key of scoreMap.keys()) {
  console.log('key:', key);
}

for (const value of scoreMap.values()) {
  console.log('value:', value);
}

for (const [k, v] of scoreMap.entries()) {
  console.log(k, v);
}

실무에서는 보통 아래 둘이 체감 사용량이 높다.

• for (const [k, v] of map)
• map.get(key), map.has(key)

---

언제 Map을 쓰면 좋은가?

아래 상황이면 Map을 먼저 떠올리면 된다.

1. 키-값 쌍을 컬렉션처럼 관리할 때
   • 예: id -> user, token -> session, route -> handler
2. 키 추가/삭제/검색이 자주 일어날 때
3. 키로 문자열 말고 다른 값(숫자/객체 등)을 쓰고 싶을 때
4. 개수 확인을 자주 할 때 (map.size)

---

실무 예시 1) ID로 빠르게 조회하기 (lookup 테이블)

배열에서 매번 find()로 찾는 대신,
조회가 자주 일어나면 Map으로 바꿔두면 코드가 깔끔해진다.

const users = [
  { id: 1, name: 'Kim' },
  { id: 2, name: 'Lee' },
  { id: 3, name: 'Park' },
];

const userMap = new Map(users.map(user => [user.id, user]));

console.log(userMap.get(2));
// { id: 2, name: 'Lee' }

• 원본 데이터는 배열로 받고
• 조회용으로는 Map을 만들어 쓰는 패턴

이 조합이 실무에서 꽤 자주 나온다.

---

실무 예시 2) 카운트(빈도수) 누적하기

문자/값이 몇 번 나왔는지 셀 때 Map이 깔끔하다.

const words = ['js', 'ts', 'js', 'react', 'js', 'ts'];
const countMap = new Map();

for (const word of words) {
  countMap.set(word, (countMap.get(word) ?? 0) + 1);
}

console.log(countMap.get('js')); // 3
console.log(countMap.get('ts')); // 2
console.log(countMap.get('react')); // 1

---

실무 예시 3) Object 대신 Map이 더 자연스러운 경우

키-값을 자주 추가/삭제하고 순회해야 하는 상태라면 Map이 읽기 편할 때가 많다.

const onlineUsers = new Map();

function connect(userId, socketId) {
  onlineUsers.set(userId, socketId);
}

function disconnect(userId) {
  onlineUsers.delete(userId);
}

function isOnline(userId) {
  return onlineUsers.has(userId);
}

---

살짝 비교: Map vs Object

관점	Object ({})	Map (new Map())
기본 용도	데이터 구조 / 레코드 / 설정값	키-값 컬렉션 / 매핑 / 캐시
키 타입	주로 문자열/심벌	어떤 값이든 가능
개수 확인	Object.keys(obj).length 등	map.size
기본 순회	for...in, Object.keys() 등	for...of로 [key, value] 바로 순회
JSON 직렬화	바로 사용 쉬움	보통 변환 후 사용

 

한 줄 감각으로 정리하면:

• Object = 데이터를 담는 상자
• Map = 키-값을 관리하는 컬렉션 도구

---

Map ↔ Array / Object 변환 패턴 (실무 자주 씀)

1) Array(쌍 배열) → Map

const pairs = [
  ['a', 1],
  ['b', 2],
];

const map = new Map(pairs);

2) Map → Array

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

const arr1 = [...map];           // [['a', 1], ['b', 2]]
const arr2 = Array.from(map);    // 동일

3) Object → Map

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

4) Map → Object (키가 문자열일 때)

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

const obj = Object.fromEntries(map);
console.log(obj); // { a: 1, b: 2 }

주의: Map -> Object는 키가 문자열(또는 심벌로 다루기 쉬운 형태)일 때 특히 자연스럽다.

---

Map 사용할 때 내 체크리스트 (실전용)

실제 코드에서 Map을 쓸지 말지 고민될 때는 아래 순서로 생각하면 편하다.

• 이게 JSON/응답 데이터/설정값인가?
  • 맞으면 → 먼저 Object 고려
• 키-값 쌍을 자주 추가/삭제/조회하나?
  • 맞으면 → Map 고려
• 키가 문자열만으로 부족한가? (숫자/객체/배열 키 필요)
  • 맞으면 → Map 쪽이 자연스러움
• 개수 확인/순회가 자주 나오나?
  • map.size, for...of가 깔끔하면 Map 적합
• 직렬화(JSON.stringify) 바로 해야 하나?
  • 맞으면 → Object가 더 편할 수 있음 (또는 변환 후 처리)

---

오늘 내용 한 줄씩 다시 정리

• Map = 키-값 쌍 목록(넣은 순서는 유지됨)
• 키로 문자열뿐 아니라 숫자/객체/배열 같은 값도 사용할 수 있다
• 핵심 메서드: set, get, has, delete, clear, size
• 순회는 for...of + keys() / values() / entries()가 기본
• Object는 데이터 구조, Map은 키-값 컬렉션 관리에 더 잘 맞는 경우가 많다