• Home
  • How does Garbage Collection work in JavaScript?
How Garbage Collection works in JavaScript

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:

JavaScript garbage collection example

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


What you will learn:

  • How to make simple changes to your code to achieve the HIGHEST JavaScript performance possible
  • An easy, effective way to TEST your code and find places to make improvements
  • Practical tips on how to improve JavaScript MEMORY performance and reduce garbage collection
  • An expert advice on JavaScript from the leading programmers in the field
  • JavaScript Performance hacks and shortcuts to save you time and boost efficiency

Enter your name and email to access your FREE membership

*** We take your privacy very seriously. We hate spam as much as you do, so rest assured that your contact details will never be shared with a third party.


JavaScript Performance Optimization Tips

Node.JS performance optimization

Easy ways to test and improve Node.js performance

Here’s how to measure Node.js code efficiency and significantly boost Node’s performance. Simple tips that will improve your Nodejs code CPU and memory consumption.

JavaScript Memory leaks

Here’s how to find and fix memory leaks in JavaScript

JavaScript memory leaks can be easily found and fixed when you know what and where to look for. To spot a memory leak you need to follow those easy steps.


JS garbage collection

How to optimize JavaScript garbage collection

Find out how garbage collection works in JavaScript and what exactly you need to fix in order to achieve the highest performance of your application.

Javascript JS performance optimization

Test and optimize JavaScript performance

Practical steps to help you find and eliminate JS performance problems. A step-by-step guide to fixing common JavaScript performance bottlenecks in Web Apps.