Should you use JavaScript WeakMaps or WeakRef?
Tags: javascript, programming, webdev
Published: 2021-11-30 23:21:18

Developers are always searching for the new exciting stuff and so they are excited when they find something new. Finally a new hammer to put any kind of nail into all walls you can possibly find! But with time, you accept the harsh truth that new and exciting technology should be avoided to be used instantly when you discover them.

First you should try to understand them better. A good example are WeakMaps in JavaScript. And to be honest they are not really something new and exciting as their spec was already implemented in IE11, but most of of JS developers probably never really heard of them. And that is for a good reason, because most of us developers don't really need to use that in our daily coding business, because it is an advanced spec that you will probably only need if you want to write your own library or squeeze the last tiny bit of possible optimization out of your frontend app.

Still, you should learn about them and there is actually a great introduction to the topic on YouTube that i would definitely recommend you to watch:

{% youtube uygxJ8Wxotc %}

However, i want to give you some quick introduction into this topic so you can understand better what is possible with this "weak" JavaScript stuff and why you should avoid using it for the most cases.

## WeakMaps

What is the difference between a normal `Map` and a `WeakMap`? There are two key (*pun intended*) factors that differentiate them. For the start, only an object is allowed as a key for a `WeakMap` and you can't iterate over a `WeakMap`.

Imagine the object you define as a key as something like real key, that you can't copy. A `string` as the key for example would be easy to copy. Because two equal strings are the same. This is different for objects and that is really important for WeakMaps. Because WeakMaps **don't** hold a strong reference to an object. And this means if the object is nowhere else in the running code used anymore, the key on the WeakMap will also vanish. Because it is actually garbage collected. And this is where the problem with WeakMaps start. Because by the specification of garbage collection for JavaScript engines for the different browser you can't rely on the fact that they all handle their garbage collection the  same way. You actually can never be sure how your code behaves for different browsers or even in different browser versions. If that sounds really dangerous to you, it probably should.

Nonetheless some developers still use a WeakMap for example to add metadata to objects, that they also want to be garbage collected when the object is garbage collected. Or just want to add that metadata in some part of the code and need the metadata only there. But ask yourself: Is it worth the risk to use something that can possibly behave different than you expect? And will your coworkers understand it, when they have to review or even change your code later? There is a good chance that they have never worked with WeakMaps and will therefore possibly introduce some bugs to your system that are hard to fix.

Right now you probably ask yourself why stuff like WeakMaps do exist in the first place? To understand this better, let's talk about `WeakRef`.

## WeakRefs

A WeakRef holds a weak reference to an object. So like the WeakMap, the object can be garbage collected even if there still exists a WeakRef that contains an object.

Why do we need WeakRefs actually? One of the most popular reasons has something to do with the `FinalizationRegistry` and WebAssembly. Because `FinalizationRegistry` will give you a way to create a callback to also clean up your objects in WebAssembly if a related object is garbage collected in the actual JavaScript Code of your WebAssembly project.

Otherwise it would be really hard to recognize if an object was garbage collected and you probably have to use much more memory than you would need. And this is especially interesting for WebAssembly. Because most of the WebAssembly projects are created with performance and speed at the heart of the project. So this part becomes really important.

## Avoid where possible

As you have probably already realized it is not only hard to use `WeakMap` or `WeakRef`, but it can also lead to some bugs that are even harder to debug. And with modern state management libraries there are better ways to add meta data to objects. So, as the official specs will tell you: Try to avoid using them.