JavaScript Garbage

JavaScript provides an efficient garbage collection for memory management. JavaScript automatically supports memory management and is invisible to us. When we create new objects, functions, primitives and variables, all these programming elements take memory. How does JavaScript manage these elements and cleans them?

In this section, we will discuss all the internal processes of memory management in JavaScript. We will focus on the following topics:

Memory life cycle in JavaScript
Memory Allocation in JavaScript
Releasing of a Memory When It is not in use
JavaScript Garbage Collection
References Concept in JavaScript Garbage Collection
Mark-and-sweep algorithm

Other programming languages, such as C, support manual memory management methods such as malloc() and free(). Comparatively, JavaScript automatically allocates the memory to the new objects and frees them when they are not used. Thus, JavaScript is one of the fastest programming languages available on the web.

Let's understand memory management in JavaScript to explore more JavaScript Garbage collection.

Memory life cycle

The memory life cycle for every programming language is pretty much similar. It works in the following manner:

It allocates the required memory for the new instance
Use the allocated memory (read, write) whenever an instance is invoked
Finally, releases the allocated memory when it is not in use anymore.

But, the second part may differ in all programming languages depending on their architecture and usage. The first and third steps are explicit in low-level languages such as C, but in high-level languages like JavaScript, it is mostly implicit.

Memory Allocation in JavaScript

Value initialisation

When the values are declared in JavaScript, they are automatically allocated memory. We do not need to allocate the memory for the created variables and objects manually.

Let's see the following example, which explains the memory allocation for different types of variables and objects:

const a = 200; // It will allocate the memory for a number type variable
const a = 'anystring'; // it will allocate the memory for a string type variable

const new_obj = {
  a: 5,
  b: null,
}; // It will allocate the memory for an object and contain values

// Just like the objects, it will also allocate memory for the array and
// contained values
const my_array = [5, null, 'anystring'];
// JavaScript also allocated memory to a function
function my_function(a) {
  return a + 5;
} // It will allocate a function (which is a callable object)
// JavaScript also allocates memory to a function expressions object
anyHtmlElement.addEventListener('click', function() {
  htmlElement.style.backgroundColor = 'green';
}, true);

From the above example, we can see JavaScript allocates value to each object, variable, and method.

Function Calls

In JavaScript, some function calls may lead to object allocation. For example, if we create a date object by calling the Date() function, then it will also allocate the memory for the Date object. Consider the below example:

const d = new Date(); // it will allocate the memory for a Date object
const e = document.createElement('div'); // It will allocate the memory for a DOM element

Some methods also take up space in the JavaScript memory.

const s1 = 'mystring';
const s2 = s1.substr(0, 2); // s2 is a new string
//In JavaScript, strings are immutable values
// In the case of a string, JavaScript may decide not to allocate memory,
// but it will store the range value, which is [0, 3].
const my_array1 = ['string1 string', 'nan nan'];
const my_array2 = ['newstring', 'nan nan'];
const my_array3 = my_array1.concat(my_array2);
// new array with 4 elements being
// the concatenation of my_array1 and my_array2 elements.

Reading and Writing Values

When the values are used in JavaScript, they are interacted with the allocated memory for reading and writing them. We can read and write the values from the allocated memory of a variable or an object property or even pass an argument to a function.

Releasing of a Memory When It is not in use

When it's time to release the allocated memory, most of the memory management issues occur at this phase. The most complicated task at this stage is to determine when the specific variable, object, or function will no longer be in need.

Low-level programming languages ask the developer to manually specify at which point they want to release the memory of an allocated instance.

But, High-level languages like JavaScript uses automatic memory management, which is known as garbage collection.

The main usage of a garbage collection is to automatically monitor and find when a specific block will not be in use and reclaim it.

However, the automatic process of memory management is completely based on approximation. So, it is a general problem to determine whether or not a specific piece of memory is still needed is undecidable. Here the JavaScript garbage collector came into the picture and managed the memory efficiently.

Now that we have discussed memory management in JavaScript. Let's continue to our main topic Garbage Collection:

JavaScript Garbage Collection

As discussed, the major issue faced by the garbage collector is the automatic finding of whether the specific memory will be utilised or not. In such a scenario, the garbage collector implements a restriction for the solution to this problem. To solve this problem, JavaScript uses the concept of references. Let's understand the concept of the reference:

References Concept in JavaScript Garbage Collection

For automatic memory management, JavaScript relies on the concept of reference. In this concept, within the memory management context, it is considered an object as a reference to another object if the other object has been accessed later in the application, whether it is implicitly or explicitly accessed. For instance, the object will have a reference to its prototype, which will be an implicit reference and to its properties values which will be an explicit reference.

In this scenario, the notion of an object will be extended to something broader than regular objects in JavaScript. It also contains the scope of the object.

Reference-counting garbage collection

The JavaScript garbage collector follows an algorithm to count the references. This algorithm determines whether or not an object will be in need to determine an object still has other objects which are referencing it. It will determine an object as garbage if it has zero references pointing to it.

Let's understand it with the below example:

let a = {
  x: {
    y: 5
  }
};
// Here, two objects are created; x and y. where x is referenced by the other y as one of its properties.
// The other is referenced by virtue of being assigned to the 'a variable.
// Here, none of the given objects can be garbage-collected.

let a = b;      // The 'b' variable is the second thing that has a reference to the object.

a = 5;          // Here, the object that was originally in 'a' will have a unique reference
                //   embodied by the 'b' variable.

let z = b.x;    // Reference to 'x' property of the object.
                //   now, z object will have two references: one as a property,
                //   the other as the 'z' variable.

b = 'chrome';  // The object that was originally in 'b' has now zero
                //   references to it. It can be garbage-collected.
                //   However its 'a' property is still referenced by
                //   the 'z' variable, so it cannot be freed.

z = null;       // The 'a' property of the object originally in a
                //   has zero references to it. It can be garbage collected.

Limitations (Circular References)

JavaScript garbage collector has limitations when it finds circular references. For example, consider the below example:
function myFunction() {
  const a = {};
  const b = {};
  a.x = b;        // a references b
  b.y = a;        // b references a
  return 'someString';
}
myFunction();

From the above example, we have created two objects having references to one another, forming a reference cycle; this situation is called circular references. When the function myFunction() completes its execution, it will go out of scope. They will not be in need at that point, but their allocated memory will be reclaimed. Thus, the garbage collector will not clean their allocations.

However, the garbage collector reference counting algorithm will not recognise them as a reclaimable objects, but each of them has a reference; that's why neither of them will be marked for garbage collection. The circular references problems are one of the reasons for the memory leaks in an application.

IE 6 and IE 7 maintain the reference counting garbage collectors, but no other modern engine uses reference counting garbage collectors to prevent memory leaks due to circular references.

Mark-and-sweep algorithm

The mark-and-sweep algorithm reduces the usage of the "an object is no longer used" algorithm; instead, it focuses on the "an object is unreachable" approach.

This approach focuses on the roots (set of objects). The root is the global object in JavaScript. In this approach, the garbage collector starts from the roots (global objects) and finds the objects pointing from these roots. It referenced all objects from these roots. Thus, it finds all the reachable and non-reachable objects.

This algorithm is an improvement of the reference-counting algorithm. It will consider an object having zero references as unreachable. So, in this algorithm, the object does not hold true if it has a circular reference.

As of 2012, all modern browsers follow the mark-and-sweep algorithm for garbage collection. All the improvements over the past years by JavaScript implement this approach, not its native approach "an object is no longer needed".

In the first example, there were no two objects referencing any resource after the function call. Thus, they will be considered unreachable by the garbage collector, and their memory can be reclaimed.

Limitations:

There may be a time in the application when it will be convenient to manual specify what memory will be released. To release the memory of an object, we need to make it explicitly unreachable manually.

We cannot trigger the JavaScript garbage collector manually.

Summary:

JavaScript provides an efficient garbage collection for memory management. JavaScript automatically supports memory management and is invisible to us. We cannot trigger the JavaScript garbage collector manually.

Next TopicJavaScript Special Characters

← prev next →