Skip to main content

What is an execution context made of?

JavaScriptSenior~1 min read
Suggest an edit

An execution context in JavaScript consists of three main components - internal structures the engine creates to run your code.

The structure of an execution context

Every context (global or a function's) includes:

  1. Variable Environment (VE)
  2. Lexical Environment (LE)
  3. This Binding

1. Variable Environment

Holds variables and functions declared with var and function (not let/const!).

  • It's set up when the context is created.
  • Used to initialize variables and functions.
  • Available only within the current context.

Example:

javascript
function test() { var a = 10; function inner() {} }

Here, a and inner are part of test's Variable Environment.

2. Lexical Environment

Handles variable lookup and closures. It holds:

  • variables declared with let and const;
  • references to outer environments (the outer lexical environment reference);
  • the function as a "lexical environment".

You can picture it as a "scope chain".

Example:

javascript
let x = 10; function outer() { let y = 20; function inner() { let z = 30; console.log(x, y, z); } inner(); } outer();

The Lexical Environment of inner() contains:

  • its own variable z
  • a reference to outer()'s environment (where y is)
  • and a reference to the global environment (where x is)

It is exactly this Lexical Environment that makes closures possible.

3. This Binding

Determines which object this refers to in a given context.

It depends on how the function is called:

Way of callingValue of this
Globally (in the browser)window
In a function (strict mode)undefined
In an object's methodthe object itself
Via call, apply, bindthe value passed manually
In an arrow functiontaken from the outer context

Example:

javascript
const obj = { name: "Tim", show() { console.log(this.name); } }; obj.show(); // this = obj -> "Tim"

Summary structure

Every execution context looks roughly like this:

javascript
Execution Context { LexicalEnvironment: { EnvironmentRecord: { let, const }, OuterEnvironmentReference: <reference to the outer LE> }, VariableEnvironment: { EnvironmentRecord: { var, function }, OuterEnvironmentReference: <reference to the outer LE> }, ThisBinding: <value of this> }

A visual example

javascript
let a = 1; function outer() { var b = 2; function inner() { let c = 3; console.log(a, b, c); } inner(); } outer();

When inner() is called:

  • A new Execution Context is created, containing:
    • Variable Environment: []
    • Lexical Environment: { c: 3 }
    • This Binding: undefined (strict mode)
  • It has an Outer Environment Reference -> outer -> global, which lets it find b and a.

Short Answer

Interview ready
Premium

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

Suggest an edit