Execution Context

In JavaScript, the execution context is the environment within which code is executed. It determines what variables and functions are accessible at any given point during code execution. There are two primary types of execution contexts:

1. Global Execution Context (GEC): This is the default context where all JavaScript code that isn't inside a function executes. It sets up the global object (window in browsers) and binds the this keyword to this global object.

2. Function Execution Context (FEC): Each time a function is invoked, a new execution context is created for that function. This context handles the function's local variables, parameters, and the specific value of this within that function.

Phases of Execution Context Creation

The creation of an execution context occurs in two main phases:

1. Creation Phase

During this phase, the JavaScript engine sets up the environment for the code to be executed. It involves:

• Variable Object (VO) Creation: The engine allocates memory for variables and functions. Variables declared with var are initialized to undefined, while function declarations are stored in memory, making them accessible before the code execution begins. This behavior is known as hoisting.

• Scope Chain Establishment: The scope chain is created to manage variable access. It ensures that functions have access to variables from their own scope and any outer scopes, enabling lexical scoping.

• this Binding: The value of the this keyword is determined during this phase. In the global context, this refers to the global object. Within functions, the value of this depends on how the function is called.

2. Execution Phase

In this phase, the JavaScript engine executes the code line by line:

• Variable Assignment: Variables are assigned their actual values based on the code logic.

• Function Execution: Functions are invoked, and if a function is called, a new Function Execution Context is created and pushed onto the call stack.

• Call Stack Management: The call stack keeps track of the execution contexts in a Last-In-First-Out (LIFO) order. When a function is invoked, its execution context is added to the top of the stack. Once the function completes, its context is popped off, and control returns to the previous context.

Understanding these phases is crucial for grasping concepts like hoisting, scope, and the behavior of the this keyword in JavaScript.

For a visual explanation, you might find this video helpful:

JavaScript Visualized - Execution Contexts↗