JavaScript에서 Map과 Set

Source: Dev.to

Map이란?

Map은 키‑값 쌍의 컬렉션으로, 객체와 비슷하지만 몇 가지 개선점이 있습니다:

• 키는 어떤 타입이든 가능 (객체, 함수, 원시값)
• 삽입 순서를 보존
• get, set, delete, has 등 내장 메서드 제공

Map 예시

const map = new Map();

map.set("name", "Rahul");
map.set("age", 22);
map.set(true, "Boolean key");

console.log(map.get("name")); // Rahul
console.log(map.has("age"));  // true
console.log(map.size);        // 3

Map 시각화

Key → Value
"name"  → "Rahul"
"age"   → 22
true    → "Boolean key"

Map vs Object

Set이란?

Set은 고유한 값들의 컬렉션으로, 중복값은 자동으로 제거됩니다.

• 어떤 타입의 값도 저장 가능
• 빠른 조회와 고유성 검사를 제공

Set 예시

const set = new Set([1, 2, 3, 2, 1]);

console.log(set);          // Set(3) { 1, 2, 3 }
console.log(set.has(2));   // true

set.add(4);
console.log(set);          // Set(4) { 1, 2, 3, 4 }

Set 시각화

[1, 2, 3, 2, 1] → Set → {1, 2, 3}

Set vs Array

언제 Map과 Set을 사용해야 할까?

Map을 사용해야 할 경우:

• 어떤 타입이든 동적인 키가 필요할 때
• 키‑값 저장을 순서대로 유지하고 싶을 때
• 엔트리(entry)들을 내장 반복으로 순회하고 싶을 때

Set을 사용해야 할 경우:

• 고유한 값만 필요할 때
• 존재 여부를 빠르게 확인해야 할 때
• 배열에서 중복을 제거하고 싶을 때

중복 제거 예시

const numbers = [1, 2, 3, 2, 4, 3];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4]

발생 횟수 카운팅을 위한 Map

const arr = ["apple", "banana", "apple"];
const countMap = new Map();

arr.forEach(item => {
  countMap.set(item, (countMap.get(item) || 0) + 1);
});

console.log(countMap);
// Map(2) { "apple" => 2, "banana" => 1 }

핵심 정리

• Map → 유연한 키‑값 저장소, 순서 보장, 키는 어떤 타입이든 가능
• Set → 고유 값들의 컬렉션, 빠른 조회, 배열 중복 제거에 용이
• 두 자료구조 모두 객체와 배열의 일반적인 한계를 보완합니다.