ES6 Everyday: WeakMaps

A couple days ago, we learned about Maps in ES6. There is a strange counterpart to the new map data structure: the WeakMap.

If you rememember, Maps could take any data type as a key. By contrast, WeakMaps only takes objects as keys:

var tenants = new Map();
tenants.set(345, "Linda and Steve");

var weakTenants = new WeakMap();
weakTenants.set(567, "George and Sam");
// TypeError: Invalid value used as weak map key

But using objects as keys works just fine:

var weakTenants = new WeakMap();
weakTenants.set({ roomNumber: 567 }, "Tamy and Beth");

You’re likely wondering: why the weak prefix?

Well, it’s called a _Weak_Map, because it references keys “weakly,” which means that it won’t prevent garbage collection on the key-value pairs.

So, if the JavaScript garbage collector discovers there are no more references to a key held within a WeakMap, it will go ahead and clean up the key, removing the corresponding value as well.

If this were a traditional Map, the fact that a key is even used within a Map is reason enough for the garbage collector to leave the key-value pair alone.

Nicholas Zakas gives one of the best use cases for this: using DOM elments as keys to store values associated with those DOM elements. When the DOM element no longer exists, the key-value pair will automatically get garbage collected, with no explicit clean-up required.

Also, unlike Map, WeakMap is not iterable. So no for..of fun this time.

Obviously, WeakMap is a very unique data structure that targets a pretty specific use case. We probably won’t get too much use out of it in our day-to-day.