What Is an Execution Context in JavaScript?

What Is an Execution Context in JavaScript?

An execution context is the environment in which JavaScript evaluates and executes code. It is created before any code runs, and it has two phases.

The Two Phases

1. Memory Allocation Phase: The engine scans the code, allocates memory for variables and functions, and assigns undefined to variables. Function declarations are stored in full.
2. Code Execution Phase: The engine runs the code line-by-line, assigning real values to variables and invoking functions.

Global Execution Context

When JS starts, a Global Execution Context is created. In a browser, it is associated with the window object and the this keyword points to it. There is only one global context.

Function Execution Context

Every time a function is invoked, a new function execution context is created. It is pushed onto the call stack. When the function returns, its context is popped and destroyed.

What an Execution Context Contains

• Variable Environment: where var, let, const, and function declarations live.
• Scope Chain: the chain of lexical environments used to resolve variables.
• Value of this: determined by how the function was called.

A Simple Example

var x = 1;
function foo() {
  var y = 2;
  console.log(x + y);
}
foo();

When the file runs, the global context is created with x = undefined and foo fully defined. During execution, x becomes 1. When foo() is called, a function context is created with y = undefined, then y becomes 2, and 3 is logged.

The Takeaway

An execution context is the runtime environment for code. It has a memory phase (allocate and hoist) and a code phase (execute). The global context is created once; function contexts are created per call.