Execution context in JavaScript

What is an Execution Context?

An execution context is the environment in which JavaScript code is evaluated and executed. It contains all the information needed to run the code: variables, this, scope chain, and more.

Types of Execution Context

Type	Description
Global Execution Context	Created when the script starts. Only one exists. Creates the global object (`window`/`globalThis`) and sets `this` to it.
Function Execution Context	Created each time a function is invoked. Each function gets its own context.
Eval Execution Context	Created inside an `eval()` call (rarely used).

Execution Context Phases

Every execution context goes through two phases:

1. Creation Phase

Creates the Lexical Environment (stores let/const, functions)
Creates the Variable Environment (stores var declarations)
Sets up this binding
Creates the scope chain (reference to outer environment)
Variables declared with var are initialized to undefined (hoisting)
Variables declared with let/const are in the Temporal Dead Zone
Function declarations are fully hoisted (available before their line)

2. Execution Phase

Code is executed line by line
Variables are assigned their values
Functions are called, creating new execution contexts

The Call Stack

The call stack (execution context stack) is a LIFO (Last In, First Out) structure that tracks the currently executing context:

javascript

function first() {
  console.log("first");
  second();
  console.log("first end");
}

function second() {
  console.log("second");
  third();
}

function third() {
  console.log("third");
}

first();

Call stack progression:

[Global]
[Global] → [first()]
[Global] → [first()] → [second()]
[Global] → [first()] → [second()] → [third()]
[Global] → [first()] → [second()]  // third() pops
[Global] → [first()]               // second() pops
[Global]                            // first() pops

What's Inside an Execution Context

ExecutionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      // let, const, function declarations
    },
    outer: <reference to parent Lexical Environment>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      // var declarations
    },
    outer: <reference to parent>
  },
  ThisBinding: <value of this>
}

Practical Example

javascript

var x = 10;
let y = 20;

function add(a, b) {
  var result = a + b;
  return result;
}

const sum = add(x, y);

Creation phase (Global):

x = undefined (var hoisted)
y = TDZ (let — temporal dead zone)
add = function (fully hoisted)
sum = TDZ (const)

Execution phase (Global):

x = 10
y = 20
add(10, 20) is called → new Function Execution Context

Creation phase (add):

a = 10, b = 20 (parameters)
result = undefined (var hoisted)

Execution phase (add):

result = 30
Returns 30

Understanding execution context explains hoisting, scope, closures, and this binding. Every function call creates a new context on the call stack. The engine uses creation and execution phases to set up variables before running code.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems