HashTag JavaScript: Execution Context and Call Stack

Hey Folks, In this article we will discuss how an Execution Context works behind the scene inside the JavaScript Engine and how JavaScript manage the whole process. As we have already discussed the basics of JavaScript in the previous article and if not read yet then please refer to the below link and read the previous article first for better understanding.

HashTag JavaScript: How JavaScript works? & Execution Context?…

Topic’s to be discussed in this article-

1. Execution Context
2. Call Stack

Execution Context:

You can assume that an Execution Context is a box or a container in which the whole JavaScript code is executed.

Let’s first understand what happens when you run JavaScript Code?
Whenever we run our JavaScript code a Global Execution Context is created behind the scene inside the JavaScript Engine even before a single line of code gets executed.

So you might be thinking about how an Execution Context looks like? Right! don’t worry refer to the below picture-

1. Execution Context

So let’s understand how Execution Context works with the help of an example-

2. Program to find cube of a number

As you can see from the above picture, the program is mainly focused to calculate the cube of a given number. So let’s understand the working of Execution Context.
An Execution context execute our code in two phases listed below-
1. Memory Creation Phase
2. Code Execution Phase

So let’s understand the above-mentioned two-phase one by one.

Memory Creation Phase:

Firstly, whenever we run our JS code it creates a global execution context and allocates memory to all the variables and functions, even before a single line of code gets executed in the Memory creation phase.

So in this phase, all the variables assigned memory with the special value which is undefined (JavaScript pre-defined keyword) and in the case of a function, the whole function block is copied to memory space.

So let’s start the memory allocation for the variable and function declared in the second picture and after allocation, it looks like-

Memory Execution Phase

So as you can see in the above picture, all the variables assigned with undefined value and the function blocked copied as it’s present in the code, even before a single line of code gets executed.

Code Execution Phase:

In this phase, the whole code gets started with the execution of statements one line at a time in sequential order. so let’s understand with the help of an example-

Step 1: After running the code when the pointer points to line no. 1 then variable x assigned with value 2 in the code execution phase and in the memory component the undefined value gets replaced with 2. As shown below-

Step 2: When the pointer points to line no. 2 then it will not perform or execute the function code block because at that time it’s not invoked.

Step 3: When the pointer points to line no. 7 then it will invoke the cube function.
Note: Here one point that is important to remember is that when the function invoked then a new Execution Context created altogether.
As shown below-

So after the execution of the cube function, the num assigned with value 2 and ans assigned with value 8, and when the return keyword encountered the whole control goes back to global execution context, and cube2 assigned with value 8.

Note: After the execution of the function execution context, the whole thing will be deleted.

Step 4: In this step, when the pointer points to line no. 8 then the whole process repeats because in this the cube function again invoked as we have done above.

Note: After successful execution of the whole program, the global execution context will also be deleted.

Call Stack:

Call Stack maintains the order of execution of an Execution Context.

Whenever we run our program a Global Execution Context is created and pushed into the call stack. When any function invoked, execution context created and pushed into the call stack. After completion of the function, it will be popped up or deleted from the call stack. After completion of the program, the call stack will also be empty and a global execution context will be deleted from the call stack. Refer below image for example-

Call Stack

Kudos to all…, we have done with an understanding of how an Execution Context works, and how JavaScript manages the whole process with the help of the Call Stack.

It might be confusing at the first time but keep reading these topics from other resources which are available on the internet which help you in long run.

So Let’s meet with another upcoming article next week and for the time being keep learning, keep safe and stay at home.