Memory Management in JavaScript

In programming, memory life cycles are almost always the same regardless of which language you are using. Memory management, however, is different between languages. There are other languages that have manual memory management methods, such as C and C++. In JavaScript though, memory is automatically allocated when data types are created, and disposes of them when they aren't needed or used anymore, hence the term garbage collector. There are other languages besides JavaScript that also fall under the garbage collector term like Java, Python and Ruby.

Garbage collecting is a form of automatic memory management which monitors all data types that are created and removes the ones that have become unreachable. Let's look at this snippet as an example.

let edmArr = [];
function addObj() {
   let dubstep = {genre: 'Dubstep'}
   edmArr.push(dubstep)
}
addObj()
console.log(edmArr[0])

In this example, an empty array is initialized and a function that simply adds an object to that array. When we console.log(edmArr[0]) after the function call, the output is {genre: 'Dubstep'}. Even though dubstep isn't in scope, we are still able to access it through the edmArr, which means that it needs to say in memory until the reference isn't there (unreachable) anymore. If we were to remove the object from the array, the value of dubstep won't be needed and will be garbage collected.

How is garbage collection actually "collecting the garbage"?

Garbage collection is mainly based on two algorithms, one called mark-and-sweep and another called reference-counting. The reference-counting algorithm reduces the problem of seeing whether an object is still needed to determine if an object has any other data types referencing it.

let x = {
  animal: 'cat'
}

let y = x

x = "Hello, World!"

console.log('X:', x, 'Y:', y)

If you run this example, you'll see X: 'Hello, World!' Y: {animal: 'cat'}. Since the value of x is no longer an object, y is still a reference to it, so there's no need for garbage collecting. If we were to change the value of y though, the object would then be collected because it wouldn't be reachable anymore. The 'garbage' will only be collected if there are zero references pointing to it. This collection algorithm isn't preferred in modern browsers today because it has a limitation when it comes to circular referencing. If two objects reference each other, it creates a cycle and the algorithm won't really consider them being unneeded because each object has at least one reference pointing to them. This leads to neither of them being collected as "garbage" and is a common cause to memory leaks.

The mark-and-sweep algorithm reduces the definition of "an object no longer needed" to "an object that is unreachable". This algorithm finds the root (global object) and then finds all the references from that root, and then the references of those, etc. It finds all the reachable objects, and collects the ones that are unreachable. This algorithm is used in browsers, other garbage collecting languages today because it handles cycles and cyclic dependencies with improvements that have been made on it over time.

Here are some documentations that go more in depth into memory cycles and management. Happy coding!

MDN Web Docs

JavaScript.info