How JavaScript code is executed?

We all know that JavaScript is one of the most popular programming languages in the world, but very few of us know how it actually works. Today we are going to see what happens behind the scenes when we execute a JavaScript code.

Before diving deep into the concepts, the first most important thing to know about Js is that:

JavaScript is a Synchronous Single Threaded language.

The above statement simply means that Js can execute only one command at a time and that too in a specific order.

The specific order plays a huge role here as it is something responsible for what is to be executed at what particular time.

So, now let's talk about what happens when we run a piece of code.

Everything in JavaScript happens inside an imaginary big box or container. The creation of this container or box is the first step that takes place behind the scenes.

This imaginary big box or container is known as the Execution Context.

The Execution Context contains two portions, one is the Memory Component which is also known as Variable Environment, and the second portion is the Code Component which is also known as the Thread of Execution.

The above diagram depicts the Execution Context. Now let us understand in-depth the formation of the Execution Context and the components present in it.

Step 1 : A global execution context is formed, which has two components namely Memory Component and the Code Component as we can see in the diagram above.

Step 2 : Execution Context is created in two phases.

• Memory creation phase

• Code Execution phase

Let's discuss both the phases in detail.

Memory Creation Phase:

During the memory creation phase, Js allocates memory to all the variables and functions. Initially, the variables are given a special value called 'undefined'.

For the functions, the entire function code is copied and pasted in the memory component.

Code Execution Phase :

The second task is now the Code execution phase, during this phase, Js code is executed line by line and now the original values of the variables are assigned to them, present inside the memory component replacing 'undefined'.

But when a function is encountered an interesting thing happens! In the case of a function, A local Execution Context is formed for that particular function and the exact same process of execution context creation is carried out i.e. Memory creation phase and Code execution phase. This can go on even further in the exact same way if nested functions are present inside a function.

Let's understand the concept deeply with the help of an example below:

var n = 2;  
function square(num) {  
var res = num * num;  
return res;  
}  
var result = square(n);

So, in the case of the above example, a Global Execution Context is formed even before the code is executed and the memory is allocated to the variables and functions present in the code

1. Memory Creation Phase: Memory is allocated to all the variables and functions present as shown below:

2. Code Execution Phase:

Now Js goes through our program line by line and the code is executed now. The actual value of the variables are assigned to them and the local execution contexts for the functions are created following the same process for the nested functions as shown below:

This was all about a simple snippet of what we took as an example, but imagine how Js manages to handle all of this in the case of complex code containing a number of variables and functions nested inside functions and returning complex results, this is where Call Stack comes into the picture.

Call Stack: A Call Stack maintains and manages the order of execution of the Execution Contexts.

• Every execution context is pushed into the Call Stack and popped out once its work is done.

Call Stack is known by many names such as Execution Stack, Program Stack, Control Stack, Runtime Stack, Machine Stack

So, this is a basic understanding of how JavaScript works behind the scenes. I hope that this concise and simple explanation was at least a bit helpful.

Happy Coding! 😊