Execution Context in JavaScript

An execution context is
the environment in which JavaScript code is executed. Everything that happens in JavaScript occurs inside an execution context, which manages the code's variables, functions, and scope.

The two phases of an execution context
Every execution context is created and processed in two distinct phases:

Creation phase:

• Variable object creation: The JavaScript engine scans the code and stores function declarations and variables in memory. For var variables, it assigns the placeholder value undefined. This behavior is known as hoisting.
• Scope chain setup: The engine establishes the scope chain, which determines where variables can be accessed. A function can access variables from its own context and the contexts of its parent functions, all the way up to the global scope.
• this keyword assignment: The this keyword is assigned a value depending on how the code was called.

Execution phase:

• The JavaScript engine runs the code line by line.
• It assigns the actual values to the variables that were initially set to undefined during the creation phase.
• It invokes functions and executes the statements in the script.

Types of execution contexts
There are two main types of execution contexts:

Global Execution Context (GEC):

• The default context where code is executed. For every JavaScript file, there is only one GEC.

• It creates a global object (window in browsers or global in Node.js) and binds the this keyword to it.

• All global variables and functions are stored as properties and methods on this global object.

Function Execution Context (FEC):

• Created every time a function is called.
• Unlike the GEC, there can be many FECs in a program.
• It creates its own scope for variables and a special arguments object containing all arguments passed to the function.
• Once a function's execution is complete, its context is destroyed.

The Call Stack
The JavaScript engine uses a call stack to manage all the execution contexts.

• It operates on a Last-In, First-Out (LIFO) basis.
• When a script is first run, the GEC is pushed onto the stack.
• Whenever a function is invoked, its FEC is created and pushed onto the top of the stack, becoming the currently active context.
• When a function finishes execution, its context is popped off the stack, and control returns to the context below it.
• The program ends when the GEC is finally popped off the stack.

function funcA(m,n) {
return m * n;
}
function funcB(m,n) {
return funcA(m,n);
}
function getResult(num1, num2) {
return funcB(num1, num2)
}
var res = getResult(5,6);
console.log(res); // 30

In this example, the JS engine creates a global execution context that enters the creation phase.

First it allocates memory for funcA, funcB, the getResult function, and the res variable. Then it invokes getResult(), which will be pushed on the call stack.

Then getResult() will call funcB(). At this point, funcB's context will be stored on the top of the stack. Then it will start executing and call another function funcA(). Similarly, funcA's context will be pushed.

Once execution of each function is done, it will be removed from the call stack. The following picture depicts the entire process of the execution: