How JavaScript handles Memory Management

Understanding how JavaScript handles memory is crucial for both JavaScript and React developers. This will help us to write bug free code. In this post, we will explore how JavaScript manages memory, focusing on key concepts that every developer should know.

JavaScript engine has two places to store data inside memory, one is called Call Stack and another one is Heap. First let’s understand Stack. Then we will understand Heap. By understanding those we will understand how JavaScript handles memory.

Stack

A Stack is a Data Structure that is used to store Static Data. What does Static Data mean? It means the size of the data is known or fixed by the engine at compile time. Stack or Call Stack handles the Execution of Program.

Let’s understand through an example, we wrote a JS script.

function doSomething() {
  let name = "unknown";
  let age = 30;
  console.log(name);
}

When we as developer execute or invoke this script a new Execution Context is created. Execution Context helps to track information like variable declaration, function declaration etc.

This is not the accurate image of Execution Context, it is just to understand that Execution Context tracks information like variable declaration, function declaration etc.

Once the Execution Context is created for the above script, then it will push on the Stack or Call Stack.

Then the Call Stack start execution of it. First it will handle the function declaration called doSomething.

Inside the doSomething function we declare two variables, name and age. These variables are managed within the Function Execution Context, specifically in the Variable Environment or Lexical Environment, but they don’t get pushed or popped from the Call Stack individually.

Then we have console statement. Console statement executes within Function Execution Context. The Execution Context will push the console statement to Call Stack.

Call Stack executes the console statement, and once it is finished, it pops out from Call Stack. Now the Call Stack will look like this.

As the execution of the console statement is finished and the doSomething function has nothing to do, doSomething will be removed from the Call Stack.

Since the Call Stack is now empty which means there is nothing to execute.

Heap

It is a place inside memory, which is used for Dynamic Memory Allocation. That means the size of the Heap can be change during runtime.

It is designed(for array and object) to handle allocation to the heap and then remove from heap, during the execution of program. Let’s say for example, you declare an object.

let info = {
  name: "Lahin",
  age: 30
}

When the execution of the program starts, the Call Stack will execute the object but since this is an object(same goes for array) type property, the value of it, will store inside the HEAP and there will be a connector or reference.

After the execution is finished, info will be removed from the Call Stack. Then none referenced { name: “Lahin”, age: 30 } in the Heap.

So with the help of Garbage Collector, { name: “Lahin”, age: 30 } will be removed from the HEAP. So now the Call Stack and Heap is empty.

One thing to note is that you can create more than one object or array, every array and object will be pushed to a separate heap location. So even if you declare two objects { name: “Lahin”, age: 30 } looking like this, they will store separate locations in Heap.

This is how JavaScript handles memory.