JS Sketchbooksee JavaScript think ✏️
← back to phase 4

4.12 — Map & Set

Two honest limits have been hiding in plain sight. Arrays happily hold duplicates — ask "how many unique visitors?" and you're writing a loop with checks.

And object keys are always strings (4.5 hashed strings, remember) — try to use the number 7 as a key, and it gets quietly converted to text.

JavaScript ships two purpose-built collections for exactly these gaps — Set (each value once) and Map (keys of any type) — both running on 4.5's hash machinery.

watch it happen
const seen = new Set(["ana", "ben", "ana"]);
console.log(seen.size);
console.log(seen.has("ben"));

const votes = new Map();
votes.set("pizza", 3);
votes.set(7, "lucky");
console.log(votes.get(7));

new Set([...]) feeds the array through a door with one rule: already inside? Then you don’t come in again. Three names are about to go in.

"ana""ben""ana"the dooralready inside?(hash lookup, O(1))seen (uniques only)"ana""ben"a Set stores each value ONCE — three names go in, one is a repeatconsole (latest)(nothing printed yet)
under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

Both Set and Map run on exactly the hash machinery from lesson 4.5. A hash function turns the key (or value, for a Set) into a bucket number. That bucket is where the lookup, insert, or delete happens — all O(1), no matter how many entries exist.

Both also remember insertion order when you iterate them (with for...of, lesson 4.8) — unlike the historically unordered guarantees of plain objects. That predictability is one more reason Map is the safer choice for a runtime lookup table.

There's a rarer sibling pair worth knowing exists: WeakMap and WeakSet. They only accept objects as keys/values. They let the garbage collector (5.7) sweep an entry away the moment nothing else references that object — useful for caches that shouldn't outlive what they cache. You'll recognize the names more than you'll write them.

your turn

⌨️ count the crowd

An event scanner logs every badge tap — including people tapping twice. Count the UNIQUE visitors who actually came.

requirements:

  • Start with checkins = ["mia", "raj", "mia", "raj", "zoe"].
  • Build the structure that keeps each name once, call it unique, and print how many people actually came.

when you press RUN, the console must show exactly:

3

✏️ Quick check 1

Type exactly what this prints:

console.log(new Set([1, 1, 2, 2, 2]).size);

✏️ Quick check 2

Type exactly what this prints:

const m = new Map();
m.set(1, "one");
m.set("1", "ONE");
console.log(m.size);

✏️ Quick check 3

You need a lookup table that grows at runtime and might use numbers as keys. Which tool?

teach it back

🗣️ Now teach it back

Explain to a friend: when would you reach for a Set instead of an array, and a Map instead of a plain object?

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this
to remember
Set = each value once; .has/.add in O(1) (hash door). The “unique visitors / seen before?” tool.
Map = a hash map with keys of ANY type (object keys are always strings). set/get/size/has.
Fixed named record → plain object (4.4); runtime lookup table, or non-string keys → Map.
next: 4.13 JSON →