All JavaScript code needs to be hosted and run in some kind of environment. In most cases, that environment would be a web browser. The browser's JavaScript engine then creates a special environment to handle the transformation and execution of this JavaScript code. This environment is known as the Execution Context.

The Execution Context contains the code that's currently running and everything that aids in its execution. During the Execution Context run-time, the specific code gets parsed by a parser, the variables and functions are stored in memory, executable byte-code gets generated, and the code gets executed.

Types of Execution Context in JavaScript

1. Global Execution Context (GEC) :

   GEC / Global Execution Context is also called the base/default execution. Any JavaScript code which does not reside in any function will be present in the global execution context. The reason behind its name 'default execution context' where the code begins its execution when the file first loads in the web browser.

   For every JavaScript file, there can only be one GEC because the JS engine is single-threaded, and thus, only one global environment is possible for executing the JavaScript code.

   • Firstly, it creates a global object where it is for Node.js and Window object for the browsers.

   • Secondly, reference the Windows object to 'this' keyword.

   • Create a memory heap to store variables and function references.

   • Then it stores all the functions declarations in the memory heap area and the variables in the GEC with initial values as 'undefined'.

2. Function Execution Context (FEC)

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

   Also, FEC can access the entire code of the GEC, but GEC can't access all the code of the FEC. During the GEC code execution, a function call is initiated, and when found by the JS engine, it creates a new FEC for that specific function. Since every function call gets its own FEC, there can be more than one FEC in the run-time of a script.

JavaScript Execution Stack

The Execution Stack, also known as the Call Stack, keeps track of all the Execution Contexts created during the life cycle of a script.

JavaScript is a single-threaded language, which means that it is capable of only executing a single task at a time. Thus, when other actions, functions, and events occur, an Execution Context is created for each of these events. Due to the single-threaded nature of JavaScript, a stack of piled-up execution contexts to be executed is created, known as the Execution Stack.

To understand the working process of the execution stack, consider the code example below:

let x = 'Hello World!';  
function first() {  
  console.log('It is the first function');  
function second() {  
  console.log('It is the second function');  
}  
second();  
}  
first();  
console.log('It is GEC);

Step by Step Explanation:

• First, the script is loaded into the JS engine.

• After it, the JS engine creates the GEC and places it at the base of the execution stack.

  

• When the JS engine encounters the first function call, a new FEC is created for it. This new context is placed on top of the current context, forming the so-called Execution Stack

  

• Then we can see that it is the invocation of the second function within the first function. Therefore JS engine set up a new FEC for the second function and insert it to the top of the stack.

  

• When the second function is completed, the execution function is popped out of the stack, and controls move to the next execution context present in the stack, which is the first function execution context only.

  

• When the first function gets executed completely, the execution stack of the first function popped out from the stack. Hence, the control reaches back to the GEC of the code.

  

• At last, when the execution of the entire code gets completed, the JS engine removes the GEC from the current stack.

Creating an Execution Context

An execution context is created first, and then it is managed. The creation of the execution context is performed in two approaches:

1. Creation Phase

   In the creation phase, the Execution Context is first associated with an Execution Context Object (ECO). The Execution Context Object stores a lot of important data which the code in the Execution Context uses during its run-time.

   The creation phase occurs in 3 stages, during which the properties of the Execution Context Object are defined and set. These stages are:

   1. Creation of the Variable Object (VO)

   2. Creation of the Scope Chain

   3. Setting the value of the this keyword

2. Execution Phase

   Finally, right after the creation phase of an Execution Context comes the execution phase. This is the stage where the actual code execution begins.

   Up until this point, the VO contained variables with the values of undefined. If the code is run at this point it is bound to return errors, as we can't work with undefined values.

   At this stage, the JavaScript engine reads the code in the current Execution Context once more, then updates the VO with the actual values of these variables. Then the code is parsed by a parser, gets transpired to executable byte code, and finally gets executed.

Difference b/w GEC Vs. FEC

Conclusion

The Execution Context (GEC and FEC), and the call stack are the processes carried out under the hood by the JS engine that lets our code run.

Hope you found this article helpful. Feedback and suggestions are highly welcomed.

References:

Javatpoint

Mdn Docs