JavaScript's Memory Management Explained | Felix Gerschau

This article is the second part of my post series, where I explain how JavaScript works in the browser. To get my latest articles to your inbox, subscribe to my newsletter.

• Part 2: JavaScript's Memory Management: Heap And Garbage Collection Explained

Memory life cycle

• Allocate memory
JavaScript takes care of this for us: It allocates the memory that we will need for the object we created.

• Use memory
Using memory is something we do explicitly in our code: Reading and writing to memory is nothing else than reading or writing from or to a variable.

• Release memory
This step is handled as well by the JavaScript engine. Once the allocated memory is released, it can be used for a new purpose.

"Objects" in the context of memory management doesn't only include JS objects but also functions and function scopes.

The memory heap and stack

Stack: Static memory allocation

You might know the stack from the first part of this series on the call stack and event loop, where I focused on how it's used to keep track of the functions that the JS interpreter needs to call.

Heap: Dynamic memory allocation

const hobbies = ['hiking', 'reading'];

let name = 'John'; // allocates memory for a string
const age = 24; // allocates memory for a number

name = 'John Doe'; // allocates memory for a new string
const firstName = name.slice(0,4); // allocates memory for a new string

Remember that JavaScript stores objects and functions in the heap. Primitive values and references are stored in the stack.

References are a core concept of how JavaScript works. Going more into detail here would be out of the scope of this article, but if you want to learn more about it, let me know in the comments and subscribe to my newsletter.

Reference-counting garbage collection

let son = {
  name: 'John',
};

let dad = {
  name: 'Johnson',
}

son.dad = dad;
dad.son = son;

son = null;
dad = null;

Mark-and-sweep algorithm

Trade-offs

window.users = null;

I want to make this article as easy to understand as possible. If you have any open questions, please send me an email or leave a comment. I will try to help you and improve the article with your feedback.

Forgotten timers and callbacks

const object = {};
const intervalId = setInterval(function() {
  // everything used in here can't be collected
  // until the interval is cleared
  doSomething(object);
}, 2000);

clearInterval(intervalId);

const element = document.getElementById('button');
const onClick = () => alert('hi');

element.addEventListener('click', onClick);

element.removeEventListener('click', onClick);
element.parentNode.removeChild(element);

const elements = [];
const element = document.getElementById('button');
elements.push(element);

function removeAllElements() {
  elements.forEach((item) => {
    document.body.removeChild(document.getElementById(item.id))
  });
}

const elements = [];
const element = document.getElementById('button');
elements.push(element);

function removeAllElements() {
  elements.forEach((item, index) => {
    document.body.removeChild(document.getElementById(item.id));
  });
}

Conclusion

• Memory Management - MDN Web Docs
A great resource to read up on this topic again.

• This article goes more into the details of how the V8 engine works. I found this very interesting.

• In the first part of this blog series, I explain why you can do things concurrently in the browser, even though JavaScript is a single-threaded language.

• My 9 favorite topics of "The Pragmatic Programmer"
Reading is a great way of improving your programming skills. In this article, I share my key takeaways from my favorite programming book.

• This article is closely related to this one as it describes what you can do about your Node.js app running out of memory.