Flow Of Code Execution in JavaScript

Introduction:

JavaScript is a synchronous and single-threaded language. To know how javascript code gets executed internally behind the scenes, we have to know something called Execution Context

Execution Context:

Everything in javascript is wrapped inside the execution context. It can be called a container because it holds the whole information about the environment in which the current JS code will be executed.

There are two kinds of Execution Context in JavaScript:

• Global Execution Context (GEC)

• Function Execution Context (FEC)

Global Execution Context:

Whenever the JavaScript engine receives a source file, it first creates a default Execution Context known as the Global Execution Context(GEC). It represents the environment in which the top-level code is executed. It will always create even with an empty file.

Function Execution Context:

Whenever a function is called, the JavaScript engine creates another type of Execution Context known as a Function Execution Context (FEC) on top of the GEC to evaluate and execute the code within that function.

An Execution Context has two components and JavaScript code gets executed in two phases:

1. Memory Allocation Phase: In this phase variables and functions get stored as key-value pairs in the memory component of the execution context. Variables are assigned as undefined into the memory block but functions are stored fully in the memory component.

2. Code Execution Phase: In this phase, JavaScript code is executed line by line because it is single-threaded.

For example:

var value = 2;
function add(n){
  var result = n+n;
  return result; 
}
var newValue = add(4);

In the above example, there are two variable "value" and "newValue" and 1 function called "add" which do the addition of two numbers. So whenever code will run a global execution context is created.

So as the first step is memory allocation, so in the first step memory will be allocated to the variables and function.

After memory allocation, We know that JavaScript is single threaded so the code will be executed line by line and the value of the variable and function will be updated so,whenever a function will be called then a new execution context will be created inside the global execution context.

So again in the code execution phase the newly created execution context, the global execution context will look like the following.

As we can see that after the line-by-line code execution, the value is assigned to variables.After the return statement of the invoked function, the returned value is assigned at the place of undefined in memory allocation. After this process, the new execution context will be deleted.

After the execution of the first function call, when we again call the function at that time same process will be repeated and a new execution context will be created. In the end, the global execution context will be deleted like the execution context.

Call stack:

The JS call stack is a data structure that keeps track of information on the functions being called and executed. When a function is called from the script it gets added to the call stack. If another function is called from inside that function it gets added on top of the current function. This stacking of functions goes on until there is no function call left. Once the function is executed then it is popped out from the stack and execution continues from where it was left. It follows the LIFO, i.e.(Last In First Out)principle. It is used to maintain the Order of execution contexts.

Hope you liked this article!!

Thank you for reading!!

Happy Learning!!

Resources:

• GreeksForGreeks