2nd/10_Wiki/Topic_JavaScript/JavaScript_Maps.md

---
id: javascript-maps
title: "JavaScript Maps"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Map", "new Map", "key-value pairs", "ES6 Map", "Map.set", "Map.get", "dictionary"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["javascript", "js", "web", "frontend", "w3schools", "map", "collection", "es6"]
raw_sources: ["https://www.w3schools.com/js/js_maps.asp"]
applied_in: []
github_commit: ""
---

# [[JavaScript Maps]]

## 🎯 한 줄 통찰 (One-line insight)
A JavaScript Map stores key-value pairs like a dictionary, but unlike plain objects its keys can be of any data type, it remembers insertion order, and it exposes a `size` property. [S1]

## 🧠 핵심 개념 (Core concepts)
- **A Map is an object that stores key-value pairs**, similar to a dictionary in other languages; keys can be of any data type. [S1]
- **Maps are most similar to Objects** (a unique key/value collection), but with stronger guarantees. [S1]
- **Six characteristics** — keys can be any type; original insertion order is remembered; item count is easy via `size`; optimized for frequent additions/removals; directly iterable with `for...of` or `forEach()`; original order preserved during iteration. [S1]
- **Two ways to create a Map** — `new Map()` then `set()` calls, or `new Map([...])` with an array of `[key, value]` pairs. [S1]
- **`set()` adds or updates** — calling `set()` with an existing key changes its value. [S1]
- **`get()` retrieves a value** by its key. [S1]
- **Type identity** — `typeof` a Map returns `"object"`, and `instanceof Map` returns `true`. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **set-chain construction** — create empty, then `set()` each pair. [S1]
- **Array-literal construction** — pass `[[k, v], ...]` to `new Map()`. [S1]
- **Upsert by key** — `set()` doubles as insert (new key) and update (existing key). [S1]

## 📖 세부 내용 (Details)
A JavaScript Map is an object that can store collections of key-value pairs, similar to a dictionary in other programming languages. Maps differ from standard objects in that keys can be of any data type. Maps are similar to both Objects (unique key/value collection) and Arrays (ordered values collection), but Maps are most similar to Objects. [S1]

**Map characteristics:** keys can be any type; the original insertion order is remembered; the number of items is easily retrieved via the `size` property; optimized for frequent additions and removals; directly iterable with `for...of` loops or `forEach()`; original order preserved during iteration. [S1]

**How to Create a Map** — you can create a Map by passing an Array to `new Map()`, or by creating a Map and using `set()`. [S1]

**Using set()** — create an empty Map and set values: [S1]
```javascript
// Create an empty Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
```

**Using an Array** — pass an array of `[key, value]` pairs to the constructor: [S1]
```javascript
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
```

**Adding Elements** — the `set()` method can also be used to add new elements: [S1]
```javascript
fruits.set("mangos", 100);
```

**Changing Values** — `set()` will also change existing values: [S1]
```javascript
fruits.set("apples", 200);
```

**The get() Method** — gets the value of a key: [S1]
```javascript
fruits.get("apples");    // Returns 500
```

**A JavaScript Map is an Object** [S1]
```javascript
// Returns object:
typeof fruits;
```
```javascript
// Returns true:
fruits instanceof Map;
```

**JavaScript Objects vs Maps** [S1]

| | Object | Map |
|---|--------|-----|
| Iterable | Not directly iterable | Directly iterable |
| Size property | Do not have a size property | Have a size property |
| Key types | Keys must be Strings (or Symbols) | Keys can be any datatype |
| Key ordering | Keys are not well ordered | Keys are ordered by insertion |
| Default keys | Have default keys | Do not have default keys |

**Browser Support** — Map is an ES6 feature (JavaScript 2015), fully supported in all modern browsers since June 2017. [S1]

| Browser | Version | Release |
|---------|---------|---------|
| Chrome | 51 | May 2016 |
| Edge | 15 | Apr 2017 |
| Firefox | 54 | Jun 2017 |
| Safari | 10 | Sep 2016 |
| Opera | 38 | Jun 2016 |

## 🛠️ 적용 사례 (Applied in summary)
The page's own snippets are the canonical applied examples — building a `fruits` Map by `set()` calls or array literal, adding `mangos`, updating `apples`, and reading back with `get()`. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Create a Map from an array of pairs (language: JavaScript):
```javascript
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
```
Upsert and read:
```javascript
fruits.set("apples", 200);
fruits.get("apples");
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Per the source's Objects-vs-Maps table, prefer a Map over a plain Object when you need: direct iterability (`for...of`), a built-in `size`, keys of any data type (not just strings/symbols), reliable insertion ordering, or no inherited default keys. Use a plain Object for simple string-keyed records where those guarantees are not required. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[JavaScript Tutorial]]
- **관련 개념:** [[JavaScript Map Methods]], [[JavaScript Sets]], [[JavaScript Set Methods]]
- **참조 맥락:** The base concept referenced whenever an ordered, any-key key-value collection is needed.

## 📚 출처 (Sources)
- [S1] W3Schools — JavaScript Maps — https://www.w3schools.com/js/js_maps.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Maps" page (Astra wiki-curation, P-Reinforce v3.1 format).