1. Introduction

In JavaScript, code is executed and is related to two main types of executions contexts. In this tutorial, we’ll discuss these two execution contexts:

• Global execution contexts
• Function execution contexts

There is third type of execution context that is created for the code inside the eval function. Since the use of eval function is discouraged due to security concerns, we’ll not discuss this third execution context.

2. Global Execution Context

The global execution context is the base context created whenever JavaScript code is loaded for execution. Any code which is not inside a function, is executed inside a global execution context.

The global execution context contains the following:

• the global variables
• functions
• value for this
• reference to the outer environment. In case of the global context, is null.

3. Function Execution Context

Every time a JavaScript function is called, a new execution context is created for the execution of that function. The function execution context, contains the following:

• The variables and functions are declared inside the function.
• The value of this inside the function for the current function call.
• A reference to the outer environment.
• the arguments passed to the function

4. Execution Context Phases

Execution contexts have following two phases:

1. Creation phase
2. Execution phase

4.1 Creation Phase

The global execution context and function execution context are created during the creation phase. During this phase, the variable declarations and references to functions are saved as key-value pairs inside the execution context.

During this phase, the value of this and a reference to the outer environment are also established. Variables declared using var are assigned undefined as their value during this phase, while variables declared using let or constants declared using const are left uninitialized.
In a global context, there is no outer environment, so the reference to it is set to null. However, in a function context, the value of this depends on how the function is called, and is therefore set accordingly.

4.2 Lexical and Variable Environment

During the creation phase, the following two components are created:

• Lexical environment
• Variable environment

Lexical and Variable environments are internal structures used to store key-value mappings of variables and functions, the reference to the outer environment, and the value of this.
The difference between lexical and variable environments is that the variable environment only holds key-value mappings of variables declared with the var keyword, whereas function declarations and variables declared with let or constants declared using const are stored in the lexical environment.

Consider the following code:

let name = "Jane Doe";
var age = 20;

function message(name, age) {
	console.log("Name: " + name + " ,Age: " + age);
}

The execution context for this code can be visualized as:

4.3 Execution Phase

In the execution phase, variables are assigned their respective values and the code is executed.

A call stack is an internal structure used by the JavaScript engine to keep track of the currently executing piece of code. You can also think of a call stack in JavaScript as a collection of execution contexts. Before executing any JavaScript code, a global execution context is created and pushed on the call stack. For every function call, a new entry is added to the call stack before that function starts executing, and as soon as the function execution ends, that entry is popped off the stack.

5. Conclusion

Understanding the execution context in JavaScript is crucial for mastering the language. It dictates how functions are invoked, how variables and objects are managed, and how the code is executed.