A toddlers guide to memory leaks in Javascript
Tags: javascript, beginners, webdev, performance
Published: 2018-02-05 03:17:09

---
title: A toddlers guide to memory leaks in Javascript
published: true
description: A guide to understanding memory in Javascript
tags: javascript, beginner, webdev, performance
---

In this article I will take a very simplistic approach in understanding memory leaks and I will also attempt to diagnose them.

In todays world of abundant memory, we seldom worry about memory leakages. But I hate to tell you that we live in a real world and nothing comes for free. 

### Oh my fancy functional programming

_*Disclosure: I absolutely love functional programming.*_
Functional programming is cool and with the new ES6 syntax it becomes even cooler. 

```Javascript
const arrayAddFirst = (a, b) => [a, ...b];
```
This example above looks super good. Unless you bro-program with me and I blindly put it inside a **heavy duty loop** 😎.

```Javascript
result = newData.reduce((p,r) => arrayAddFirst(r, p), []); 
```
Now I don't want you to judge me for the idiot code above. _*(virtual hug if you can guess what it does 😁)*_


```Javascript

for(var i = 0; i < newData.length; i++) {
    for(var j = 0; j < i; i++) {
        // stuff here
    }
}
```
The above code snippet is the old fashion equivalent of our example. Notice how easy it is to see it will run `n * (n+1) / 2` times, where `n` is the length of `newData`.

The main problem in the example code is that the garbage collector has to kick in frequently. The fancy `[a, ...b]` array you create every time in the `.reduce` loop **needs to be removed from memory** or else it will eventually consume all of the memory.

This example tries to shed light on the important fact that memory is not your best friend. It works in your favour 99% of the time, but when it decides to stab you,  it directly **stabs you in the eye**.

![stab](http://files.explosm.net/comics/Rob/blowdart.jpg)

### Memory Leaks ….

Generally a javascript application can freeze in two ways:

**Infinite loops**: You might have accidently written a loop which never terminates.

```Javascript
var x = 0;
while(x < 5) {
   console.log(x); // Warning! do not try this at home 
}
```

**Running out of memory**: We all know there is limited amount of memory in a computer and if we are not careful we might end up hogging all of the memory.

```javascript
var x = [ [1] ];
for(var i = 1; i < 100000; i++) {
	x.push(arrayAddFirst(i, x[i-1])); // Warning! do not try this at home 
}
```


### Alright, but what about Memory Leaks??

Ofcourse, you can easily avoid these bad behaviours by being careful. But Memory leaks are one of those nasty devils which silently sit.

Let us define a computer which has infinite resources and let's call it `Deep thought`. We will refer to `Deep thought` in this article `DT-42`  and you will soon see how we will use `DT-42` to figure out memory leaks.

### Memory Leaks

A Memory leak in simple terms is forgotten data forever waiting to be used.
Let us see an example before we jump to a scientific definition.

```javascript

function sayHi() {
	var allNames = [];
	var emoji = '👋';
	return name => {
		allNames.push(name);
		return emoji + name;
        }
} 
```

In the example, our program is becoming **fatter everytime we call it**. The garbage collector is not able to cleanup `allNames` because the function needs it to push data. It cannot figure out that allNames would never be read and hence it is futile to give it any space in memory.


**The Wikipedia says:**

> **memory leak** is a type of [resource leak](https://en.wikipedia.org/wiki/Resource_leak) that occurs when a [computer program](https://en.wikipedia.org/wiki/Computer_program) incorrectly manages [memory allocations](https://en.wikipedia.org/wiki/Memory_allocation)[[1\]](https://en.wikipedia.org/wiki/Memory_leak#cite_note-1) in such a way that memory which is no longer needed is not released.

I find it much easier to understand the concept by thinking of it as a symptom. Your program is the patient whose love for memory keeps on increasing without bound. 
![love](https://i.pinimg.com/originals/3e/53/d0/3e53d09e86eb0ece8a0351a7f2383f07.gif)
Most of the time the computer _*(Garbage Collector)*_ is good enough to spot most of data that you wouldn't be using anymore and cleans it up for you. But it is not perfect and we are far from having a garbage collector smarter than humans. _*(If we did have one, it would be writting the code and not us :P)*_

### Give me some real life leakages

The problem with our real life is that we don't encounter such trivial memory leaks and most often the leakages are lurking behind a seemingly well behaving piece of code _*(Something as innocent looking as `arrayAddFirst`)*_. Instead of throwing some real life leakages I would rather show you how to identify a memory leak.

Let us fire Chrome to help diagnose memory leaks. 

1. Open up an empty page.
2. Open the dev panel *(Command+Option+I or Control+Shift+I)*
3. Paste this example code in the console.

```javascript
function sayHi() {
	var allNames = [];
	return name => {
            allNames.push(name);
            return '👋 ' + name;
        }
}
var hello = sayHi();
hello('Gandhi');
```
Alright, we have started leaking memory already, now let us open our `memory profiler`.

You should be able to find it as a `memory` tab in the dev tools.

![image](https://user-images.githubusercontent.com/6966254/35474233-6264a034-0359-11e8-852a-165687947454.png)

For the scope of this article we will focus on `Take Heap Snapshot`. This functionality takes snapshot of the current memory usage of your program.

In my case it looks something like this:

![image](https://user-images.githubusercontent.com/6966254/35474258-c402b1f0-0359-11e8-8b1d-6a374bc4ea70.png)

Great, now we will run our innocent looking function a couple of times.

```javascript
for(var i=0; i<1000000; i++) {
	hello('Gandhi');
}
```

If you take another snapshot, you will see an increased memory usage.

![image](https://user-images.githubusercontent.com/6966254/35474314-83a13e00-035a-11e8-815d-835d3b4a0aa2.png)

In my case there is a complete **difference of 10 megabytes**. In a lot of real life cases a jump of several megabytes might be normal and you might want to take **multiple snapshots** over a span of time to rule out a leak.

You can easily compare two snapshots by clicking on the `Summary` dropdown and switching to `Comparison`. 

![image](https://user-images.githubusercontent.com/6966254/35474393-af4e122a-035b-11e8-94cc-6583b4ac01a2.png)

If you compare your new snapshot with the one you took earlier and put `#Delta` to descending, you will find a huge number in the `(string)`. This is where our memory is leaking. Click on it and you will see a lot of `Gandhi`'s.


I really hope this article helped you in understanding memory. This is just one of the several approaches one can take to diagnose a leakage.  Please check out the following links for a more advanced take on memory:

- [Memory management](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)
- [Memory Bloat in Node.js](https://tech.residebrokerage.com/debugging-node-js-memory-problems-d450787d9253)


If you ❤️ this article, please share this article to spread the words.

Reach out to me on Twitter [@kushan2020](https://twitter.com/kushan2020).