ES6 introduced WeakMaps
and WeakSets
, which brings weak and strong references to JavaScript, a concept front-enders are not particularly used to.
If you're working on games, you have to pay very close attention to how memory and performance is managed.
I'm using WeakMap
here as an example, but it's the same for WeakSet
too. The main difference between Map
and Set
is that the latter only keeps unique values.
According to Wikipedia:
In computer programming, a weak reference is a reference that does not protect the referenced object from collection by a garbage collector, unlike a strong reference.
That actually, surprisingly, makes a lot of sense! Wikipedia got me used to definitions like Coroutines are computer program components that generalize subroutines for non-preemptive multitasking by allowing execution to be suspended and resumed
.
Alright, what a WeakMap
does, compared to a good old Map
or {}
is each individual key element in the set can be garbage-collected when they are not referenced somewhere else:
If this is the content of a regular Map
/ {}
:
const bigObject = {
id: 'spritesheet-1',
data: [
/* gigantic array with a lot of stuff */
],
description: 'hello bla bla',
};
And you're only using it in the code like this
const spritesheetID = bigObject.id;
// the gigantic array in myMap.data is in memory
The whole object and the gigantic array will remain in memory and will not be CGed until it or its references are destroyed.
Whereas if you use a weak map anything that isn't being used in your program will be garbage-collected.
// create a WeakMap from the big object
const weakMap = new WeakMap(Object.entries(bigObject));
// gigantic array is garbage-collected
const spritesheetID = weakMap.get('id');
Now you could manually delete
the keys of the object that you don't use, but this trick saves you having to keep track of your usage because this isn't C++.
People have also found other ways to use this with promises and more in this Stackoverflow thread.
That's all for this post! It's a simple concept but needed clarification for me, so I thought I might as well share it.
Cover Photo by Fredy Jacob on Unsplash.
Top comments (10)
Great !! this is something new for me 😍
Question : Map and {} use strong reference right ??
Hi Harshil,
Yes. A Map/Set structure should protect an object from being "Garbage Collected", unlike the WeakMap/Set structures. The same applies to a property of an object "{}". While the property is in use (is referenced), the whole object will still live in memory.
Thanks bro 😊
I'd like to see a full example somewhere of how to handle using weak maps; it seems that one would pretty quickly get into a situation where something is GC'd but you still need it.
It's only GCed if no other references to the object exist. You can't dereference the object from the weakmap/weakset in any case, only from the other references.
Weakmaps and weaksets can be useful for storing arbitrary metadata about an object without modifying the object itself.
For example:
Whether a given element has been hovered can now be determined by checking
previouslyHoveredEls.has(el)
, without polluting the elements themselves with additional properties. GC may be triggered by elements being removed from the DOM (if no other references to them remain), but won't be triggered otherwise.Can you expand on that? So
delete
wouldn't work, but there's noremove
to undo anadd
? Is the main usecase having references from DOM nodes, and then deleting those nodes which in turn frees memory? So is this less useful for vdom oriented apps?The DOM thing is one example use case. Another would be adding metadata to request/response objects in Node.js apps so that it can be read by middlewares later in the stack (without needing to modify any TypeScript interfaces).
Yes, there's a
delete
method for weak maps and weak sets. Like adding, it has zero effect on GC, which can't be manually controlled in JavaScript. Note that thedelete
operator used on an object also doesn't guarantee immediate GC.I meant to say "eligible for gc".
Great post! WeakMap in JavaScript is a new concept for me.
Thanks for sharing this bit of knowledge!
No problem, thank you for the comment!