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:

Variable Environment — bindings for variables and functions
Lexical Environment — the same + outer reference (scope chain)
this binding — what this refers to in this context

There are three types:

Global Execution Context (GEC) — created when the script starts
Function Execution Context (FEC) — created for each function call
Eval Execution Context — created by eval() (avoid this)

The Call Stack

Execution contexts are managed in a stack (LIFO):

hljs javascript

function greet(name) {        // FEC created
  const message = "Hello, " + name;
  return message;
}

function main() {              // FEC created
  const result = greet("Alice"); // push FEC(greet)
  console.log(result);           // pop FEC(greet)
}

main(); // push FEC(main)
// GEC is always at the bottom

Call stack states:

[GEC]              → script starts
[GEC, FEC(main)]   → main() called
[GEC, FEC(main), FEC(greet)] → greet() called
[GEC, FEC(main)]   → greet() returns
[GEC]              → main() returns

Execution Context Phases

Every execution context goes through two phases:

Phase 1: Creation Phase

Before any code runs, JavaScript:

Creates the this binding
Creates the Lexical Environment (LexEnv) and Variable Environment (VarEnv)
Allocates memory for variables and functions — this is hoisting

What happens during creation:

Function declarations → stored with their full function body
var variables → stored as undefined
let/const → stored but uninitialized (Temporal Dead Zone)

hljs javascript

// What the engine "prepares" before running this code:
console.log(myVar);    // undefined — var was hoisted and set to undefined
console.log(myFunc()); // "hello" — function declaration fully hoisted

var myVar = "world";

function myFunc() {
  return "hello";
}

Phase 2: Execution Phase

Code runs line by line. Variables get assigned their actual values.

The Lexical Environment

A lexical environment is a data structure that maps identifier names to their values. Each context has:

Environment Record — the actual bindings
Outer Reference — pointer to the parent lexical environment

This outer reference is what creates the scope chain:

hljs javascript

const global = "I'm global";

function outer() {
  const outerVar = "I'm outer";

  function inner() {
    const innerVar = "I'm inner";
    // inner's outer reference → outer's LexEnv
    // outer's outer reference → global LexEnv
    console.log(innerVar, outerVar, global); // all accessible
  }

  inner();
}

Variable Environment vs Lexical Environment

In early spec, these were the same. Today the distinction is:

Variable Environment — handles var bindings (function-scoped)
Lexical Environment — handles let, const, function declarations (block-scoped)

hljs javascript

function example() {
  var a = 1;  // in VariableEnvironment
  let b = 2;  // in LexicalEnvironment

  if (true) {
    var c = 3;  // also in VariableEnvironment (function-scoped)
    let d = 4;  // new LexicalEnvironment for the block
    console.log(a, b, c, d); // all accessible
  }

  console.log(a, b, c); // accessible
  // console.log(d); // ReferenceError — d's LexEnv is the block above
}

Closures Through Execution Contexts

When a function is created, it stores a reference to its current lexical environment. This is the closure:

hljs javascript

function makeAdder(x) {
  // FEC(makeAdder) created
  // LexEnv: { x: 5 }  (after execution)

  return function(y) {
    // This inner function stores a reference to makeAdder's LexEnv
    return x + y; // x is found in the outer LexEnv
  };
}

const add5 = makeAdder(5);
// FEC(makeAdder) is gone from the call stack
// BUT: the inner function still holds a reference to LexEnv { x: 5 }
// The LexEnv stays in memory because add5 references it

console.log(add5(3)); // 8 — x found via the closure reference

`this` Binding in Execution Contexts

The this binding is determined at context creation:

hljs javascript

// Global context
// In browser: this = window
// In Node.js module: this = module.exports (or {} in CJS)
// In ES module: this = undefined

function regularFn() {
  // this is determined by HOW this function is called
  console.log(this);
}

const obj = {
  method: regularFn // when called as obj.method(), this = obj
};

const arrow = () => {
  // Arrow: no own this — captured from creation context
  console.log(this);
};

Scope Chain Resolution

When a variable is referenced, JavaScript walks the scope chain:

hljs javascript

const x = "global x";

function level1() {
  const x = "level1 x"; // shadows global x

  function level2() {
    // no x here
    function level3() {
      console.log(x); // found in level1's LexEnv: "level1 x"
    }
    level3();
  }
  level2();
}

level1();

Resolution order: current context → parent → parent's parent → ... → global → ReferenceError.

Execution Context in Practice

Understanding execution contexts explains several behaviors:

hljs javascript

// 1. Hoisting
function hoistingExample() {
  console.log(a); // undefined (var hoisted)
  var a = 5;
  console.log(a); // 5
}

// 2. TDZ
function tdz() {
  // console.log(b); // ReferenceError (let in TDZ)
  let b = 5;
  console.log(b);   // 5
}

// 3. Closure preserving environment
function outer() {
  let count = 0;
  return () => count++;
}
const increment = outer();
increment(); increment(); increment();
// count is preserved in outer's LexEnv

// 4. this binding
const obj = {
  value: 42,
  getValue() {
    // FEC created with this = obj (method call)
    return this.value;
  }
};

▶Try it yourself

Key Takeaways

Every execution context has a Variable Environment, Lexical Environment, and this binding
Creation phase: variables and functions are "prepared" (hoisting happens here)
Execution phase: code runs line by line, variables get their values
The scope chain is built from outer references in lexical environments
Closures work by storing a reference to the lexical environment at creation time
this binding is set during execution context creation

What is an Execution Context?

The Call Stack

Execution Context Phases

Phase 1: Creation Phase

Phase 2: Execution Phase

The Lexical Environment

Variable Environment vs Lexical Environment

Closures Through Execution Contexts

this Binding in Execution Contexts

Scope Chain Resolution

Execution Context in Practice

Key Takeaways

`this` Binding in Execution Contexts