Execution Context is an abstract concept in JavaScript that is responsible for executing the code. Whenever JavaScript code is executed, an Execution Context is created that contains information about the environment in which the code is executed.

For example, consider the following code:

let a = 10;

function myFunction() {
  let b = 20;
  console.log(a + b);
}

myFunction();

When this code is executed, a Global Execution Context is created first, which contains information about the global environment, including variables, functions, and other global objects.

Then, when the myFunction() function is called, a new Function Execution Context is created on top of the Global Execution Context. This Function Execution Context contains information about the function itself, such as the function arguments and local variables.

During the execution of the myFunction() function, the code first tries to access the value of variable a. Since a is not defined in the local scope of myFunction(), the JavaScript engine looks up the Scope Chain of the Function Execution Context and finds a in the Global Execution Context. The value of a is then added to the local variable b and the result is printed to the console.

In this example, Execution Context plays an important role in executing the code correctly by keeping track of variable values, function calls, and the Scope Chain. Understanding Execution Context is crucial for writing efficient and bug-free JavaScript code.

Creation of Execution Context

When JavaScript code is executed, the JavaScript engine creates an Execution Context for each function call. The Execution Context contains important information about the function call, including:

1. Variable Environment The Variable Environment contains all of the variables declared within the current scope, including function arguments and local variables. This information is stored as a collection of key-value pairs.

2. Scope Chain The Scope Chain is a reference to the outer lexical environment, which is used to resolve variable names. The Scope Chain is created by linking together the Variable Environments of all of the parent scopes, all the way up to the global scope.

3. This Binding This Binding refers to the value of the this keyword within the function. The value of this is determined by how the function is called, and it can be affected by a number of factors, such as the way the function is called and whether the function is called in strict mode.

Execution Stack and how it works with Execution Context

The Execution Stack is a fundamental concept in JavaScript that is used to manage the execution of code. It is also known as the Call Stack or the Execution Context Stack.

Every time a function is called in JavaScript, a new Execution Context is created and added to the top of the Execution Stack. The Execution Stack operates on a last-in, first-out (LIFO) basis, which means that the most recently added Execution Context is the first one to be removed from the stack when the function has finished executing. This process continues until all the Execution Contexts have been removed from the stack, and the program has completed its execution.

In summary, the Execution Stack is a data structure that manages the execution of code in JavaScript. It uses Execution Contexts to keep track of the state of the code being executed and follows a LIFO order. Each Execution Context contains the Variable Environment, the Scope Chain, and the this keyword, which are used to manage the state of the code being executed.