How does Garbage Collection work in JavaScript?

Garbage collection is the process in which many high-level languages (like JavaScript) clear the memory from unused objects. It is based on the fact that JavaScript has some reference tree from some global variable (e.g. the window or document in the browser).

A simple JavaScript garbage collection example

Let’s assume you have some global variable. In the browser it can be `window`.

`window` holds `document`. `document` in turn holds a reference to `children` (among other properties) – it usually has only `html` as a child. `html` would have `head` and `body` as children. `document.body.children` will hold the direct children of `body`.

The same goes for every DOM element. Eventually, we have a tree that looks like this:

Let’s assume we severe the `header` from the body in the tree by doing something like: 

document.body.children[0] = null;

This line of code effectively tells the body’s children array to stop referencing the first (in our case, the `header`) element.

If this was the only reference to the `header` element, GC would have gone ahead and cleared it from memory. That’s because of how GC works – it goes over all the objects in the objects tree (here starts in `window`) and marks the ones that have no references from other objects in the code.

The thing is – body has several more references to the `header` element. For instance `body.firstElementChild` also references `header` in our case. So the GC mechanism will not mark `header` for removal from memory even though we removed it from the array.

We could do something else though…

document.body = document.createElement('body');

The code above will replace the whole body element. This effectively clears the screen… It also removes any reference to `body` and its children from the document. Now GC will find no reference to the old `body` or any of its children – and they will be removed from memory.

Preventing GC from working in Javascript

We now know how the objects tree works in regards to GC. Let’s look at another example:

const myBody = document.body;
document.body = document.createElement('body');

In this case, we kept a reference in our code to `document.body`. As long as `myBody` is kept, `body` still has a reference. In this case, it’s not enough to just replace the `body` in the `document`. We also have to make sure `myBody` is disposed of.

Now we also know how we can create a memory leak in JavaScript… 

Summary

In this short article, we learned about the essence of Garbage Collection in Javascript.

There is a “tree” of objects originating from some root object. In the browser it will be the `window` global object. In Node.js, the Garbage Collector starts from the `global` object.

It utilizes 2 main strategies that solve the problem of clearing unreferenced variables.

The Garbage Collector walks over the objects in memory and finds out which object has no reference in that tree. These “rootless” objects are marked for sweeping and are removed from memory.

This way, JavaScript keeps the memory clean and makes sure we do not overbloat it. 

You should beware of memory leaks – which are mostly unhandled references to objects we thought we unreferenced. The `myBody` example above, in which we kept a reference to `body` before replacing it in the document, prevented the Garbage Collector from marking the old `body` for sweeping and effectively left it in memory even though we might not need it anymore.

---

Sign Up for our FREE newsletter and get our best articles delivered to you by e-mail

---

---

JavaScript Performance Optimization Tips

---