Stop 04 · JavaScriptTopics · 33/36

WeakMap

In short

WeakMap lets you attach extra data to an object without stopping that object from being garbage collected. A niche tool, but perfect for caches and hidden metadata.

Like a Map, but keys must be objects and are held weakly — meaning entries are automatically garbage-collected once the key object is no longer referenced elsewhere. Weak references make `WeakMap` useful for metadata and caches where entries should disappear when their associated objects become unreachable.

The jaadu mascot ties a luggage tag onto a suitcase at a hotel reception desk.

Think of it like this

The hotel luggage tag

A luggage tag is tied to your bag. When you check out with the bag, the tag leaves with it. The hotel doesn't keep a drawer full of orphan tags. A WeakMap entry disappears on its own once its key object is gone.

Watch it happen

A click count that cleans itself up

Your code

WeakMap

Garbage coll.

set(btn, 1)

1/5The first click on btn stores a count of 1 against the button object.

The big ideas

What you need to know

Keys must be objects

Strings and numbers can't be keys. Try one and you'll get a TypeError.

Held weakly

The WeakMap doesn't keep its keys alive. If nothing else references the key, the entry can be collected.

No looping, no size

You can't list a WeakMap's entries, because they might vanish at any time. You only get set, get, has and delete.

Where it's used

Caching results per object, storing data about DOM nodes, and keeping private data for objects you don't own.

See it in code

Walk through the code

1const clickCount = new WeakMap();2 3function track(button) {4  clickCount.set(button, (clickCount.get(button) ?? 0) + 1);5  return clickCount.get(button);6}7 8let btn = document.createElement("button");9console.log(track(btn));   // 110console.log(track(btn));   // 211 12btn = null;  // the button and its count can now be garbage collected13 14// clickCount.set("id", 1);  // TypeError: Invalid value used as weak map key

1/4track stores a count per button. ?? 0 covers the first click.

With a normal Map, the button would stay in memory forever because the Map holds it. The WeakMap lets it go once your code does.

Save yourself the pain

Common mistakes

Oops

Trying to loop over a WeakMap or read its size.

Do this instead

That isn't possible by design. If you need to list entries, use a normal Map.

Oops

Using string ids as WeakMap keys.

Do this instead

Keys must be objects. For string keys, use a Map.

Your mission

Cache per object

~20 min

Quick check

Which of these can you NOT do with a WeakMap?

Go deeper

1Read why WeakMap is useful for attaching private metadata to objects. Then apply the idea in a small example so the theory becomes practical.
2Understand why WeakMaps aren't iterable — a direct consequence of weak references. Be able to explain the concept in your own words and identify where it appears in a real application.
3Compare a real use case: caching computed data per DOM node without leaking memory.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download