Execution Context and Call Stack in JavaScript

The JavaScript is a very popular programming language but in comparison to other programming languages the functioning of the JavaScript is quite different and unique.
In this article we are going to understand the execution context or in simpler word we can say that we are going to learn about the flow of execution of a JavaScript code.

Synchronous Single Threaded Programming Language

The very first thing to which we have to keep in mind is that the JavaScript is a Synchronous Single Threaded Programming Language which means the JavaScript engine executes the code from top to bottom line be line. The next line of code will be executed only when the previous line of code is being executed by the engine.

Let's just take an example of the given code:-

var a = 10;
var b = 20;

There is two lines of code, so the second line will only execute after the execution of the first line is completed.

Execution Context

Execution Context is defined as the environment in which the JavaScript Code is executed . Whenever a JavaScript code is executed the execution context is created.
There can be mainly two types of Execution Context:-

1. Global Execution Context (GEC)

Global Execution Context is the default execution context in which the JS code starts it's execution when the program is run or the file is being loaded in the browser. The whole JS code comes under the GEC which is available in the file.

There is always only one global execution context when a file runs or loads in a browser.

2. Functional Execution Context (FEC)

The functional execution context is defined as the context created by the JS engine when a function is invoked or called. Each function call has it's own execution context. It has access of it's global execution context.

There can be one or more than one functional execution context which is created over a function call.

Example of Execution Context

Let's take the example of given code and understand the execution of it line by line:-

// Example to understand execution context
var a = 10;
var b = 20;
function sum(c, d){
      return c+d;
}
var sum1 = sum(a, b);

There are two phases in the JS to complete the execution of code, which are:-

a. Scanning or Creation Phase

In this phase the JS engine will scan the whole code and will assign the memory to the variables and function which we will see in detail later.

b. Execution Phase

In this phase the actual execution of code will happen and the variables original value and calculation will be assigned to their respective variables to which we will se in detail leter.

Explanation of Example Code

// Example to understand execution context
var a = 10;
var b = 20;
function sum(c, d){
      return c+d;
}
var sum1 = sum(a, b);

Step 1:- When the JS engine run the given code then a global execution context is created having two parts, memory and code we do not have to bother about the many fancy names.

Step 2:- After the program is being run the JS Engine will scan the whole code at put all the variables and function in the memory block in the form of key and value pairs.

The whole functions are copied and pasted in the memory block as it is, without any modification.

All the variable will be assigned with the value of undefined in the memory at the time of scanning.

Step 3:- As the scanning part is done now, then the JavaScript engine will start executing the code line by line.

Step 4:- Now the first line of code will be executed and the value of "a" will be assigned in the memory. Step 5:- The same step of 4 will be repeated for the line number 2 and the value of "b" will also be assigned in the memory. Step 6:- From the third line of code to the fifth line of code there is the function definition which will not be executed because the function is not being invoked or called.

Step 7:- Now the last line of code will be executed which will call or invoke the function sum to get the result therefore there will be a new functional execution context which will be created and the code within the function body will get scanned and then executed after that. Step 8:- Now the parameter of sum function i.e "a" and "b" will be replaced by the value in the memory and there is no function or variables are available there therefore it will simply perform the addition operation and will return that value to the variable sum1.

Step 9:- Now the calculated value is returned and will be stored in the memory of the sum1 variable. The functional execution context of the sum function will be out of memory as it has performed it's operation. Step 10:- Now all the line of codes is being executed therefore the global execution context will also be popped out and program will stop it's execution process.

Note:- This was the step-by-step execution steps of how a JavaScript program get's executed.

Call Stack

Many of us will think that there can be more than hundred function in a JavaScript program, then how the JS will manage every global and functional execution context, so to deal with this there comes the concept of the Call Stack in the JS.

Note:- Stack is nothing but a data structure about which you do not have to worry.

Let's take the example of the same code to which we used to understand the concept of the Execution Context.

// Example to understand execution context
var a = 10;
var b = 20;
function sum(c, d){
      return c+d;
}
var sum1 = sum(a, b);

Step 1:- First of all there will be a blank stack before the code starts it's execution. Step 2:- As soon as the code starts to execute then there will be a global execution context which will come in the stack. Step 3:- When the sum1 will invoke the function sum then the functional execution context of the function will get in the stack. Step 4:- Now the function sum will get executed and will be popped out of stack. Step 5:- Now the every other lines will be executed and program will end and then the global execution context will also be popped out of the stack and the stack will be empty and program will ends it's execution.

Note:- If there is another function or nesting of function is there then the functions will come to the stack and after performing their operations they will be out of the memory. By this the JS takes cares of every function by maintaining their record in the stack to perform the operation in it.

I hope this article was helpful for you and if so then please upvote it and let me know in the comment.