Map
Key-value collection with set, get, has, delete and size.
Platform under construction
Map & WeakMap
Map stores key-value pairs where keys can be any value. WeakMap stores object-keyed private metadata.
const counts = new Map();
counts.set("html", 3);
console.log(counts.get("html"));
Arrays & Collections
Map is a dedicated key-value collection.
Objects are often used as dictionaries, but Map is built specifically for key-value storage with any key type.
Map preserves insertion order and gives you clear methods: set, get, has, delete and size.
WeakMap only accepts objects as keys. It is useful for private metadata connected to objects without preventing garbage collection.
Any key type
Map keys can be objects, functions or primitives.
Iteration
Map is iterable in insertion order.
WeakMap
Object-keyed metadata without public iteration.
Examples
Array code should reveal whether it reads, mutates, transforms or summarizes.
Map for real key-value collection behavior
const countByStatus = new Map();
countByStatus.set("ready", 3);
countByStatus.set("draft", 1);
console.log(countByStatus.get("ready"));
Object used as a dictionary with unclear keys
const countByStatus = {};
countByStatus["ready"] = 3;
// This is fine for simple string keys, but Map is clearer for collection behavior.
Code patterns
Reusable examples for quick reference.
These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.
Set and get
Store and read a value by key.
const counts = new Map();
counts.set("html", 3);
console.log(counts.get("html"));
Object key
Use an object as a key.
const metadata = new Map();
const record = { id: 1 };
metadata.set(record, { selected: true });
Iterate Map
Loop over key-value pairs.
for (const [key, value] of counts) {
console.log(key, value);
}
WeakMap private metadata
Attach metadata to objects privately.
const privateData = new WeakMap();
const record = {};
privateData.set(record, { visited: true });
console.log(privateData.get(record));
Rules that matter
The right collection method makes the intent obvious.
Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.
Use Map for key-value collections
It gives clear collection methods and size.
Use objects for fixed shapes
Objects are great for records with known property names.
Use has before trusting get
get can return undefined for missing keys.
Iterate with for...of
Map entries are naturally iterable.
Use WeakMap for object metadata
WeakMap keys must be objects.
Do not expect WeakMap size
WeakMap does not expose iteration or size.
Production thinking
Collection choices decide how readable data flow becomes.
Why does this matter?
Map separates dictionary-like collection behavior from ordinary object shape.
Accessibility
Map can track UI metadata by element or object without mixing it into visible data.
Production note
Production code should choose Map when keys are dynamic or not only strings.
SEO note
Maps can group content safely before deterministic rendering, but final output should be arrays or strings.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add another status to the records array.
- Use counts.has before counts.get.
- Create a WeakMap for one record object.
Practice assignment
Do this before moving to the next topic.
- Create a Map and set two values.
- Read one value with get.
- Loop over Map entries with for...of.
Try it yourself
Count records with Map
Self-check
Before you continue, prove that you understand Map & WeakMap.
A collection method should tell the reader what kind of operation is happening before they read the callback body.
- Can you explain Map versus object?
- Can you explain set, get and has?
- Can you explain Map iteration order?
- Can you explain object keys in Map?
- Can you explain WeakMap limitations?
Chapter checkpoint
Arrays & Collections checkpoint
Finish this chapter by turning the lessons into a small practical proof.
Build
Build a small example that combines three lessons from this chapter.
Deliverables
- working code
- short explanation
- self-check answers
Quality checks
- readable code
- clear failure path
- accessibility considered
Review question
Can you explain the important tradeoff without reading from the page?