JS Execution Context Deep Dive: Full Tutorial

// --- Global Execution Context starts here ---
const appName = "MyApp";
 
function initialize() {
  // --- Function Execution Context for initialize() ---
  const config = { debug: true };
 
  function loadModules() {
    // --- Function Execution Context for loadModules() ---
    console.log(`Loading modules for ${appName}`);
  }
 
  loadModules();
}
 
initialize();

function demo() {
  // CREATION PHASE scans this function and builds:
  // LexicalEnvironment: {
  //   multiply: <function reference>  -- function declaration, fully initialized
  //   result: <uninitialized>         -- let, in temporal dead zone
  // }
  // VariableEnvironment: {
  //   count: undefined                -- var, initialized to undefined
  // }
  // ThisBinding: depends on how demo() was called
 
  console.log(count);     // undefined (var is hoisted with value undefined)
  console.log(multiply);  // [Function: multiply] (fully hoisted)
  // console.log(result); // ReferenceError (let is in TDZ)
 
  var count = 5;
  let result = count * 2;
 
  function multiply(a, b) {
    return a * b;
  }
}

function demo() {
  // --- Execution Phase ---
  // Line 1: count is already undefined from creation phase
  var count = 5;
  // Now: count = 5
 
  let result = count * 2;
  // Now: result = 10 (TDZ is over for result)
 
  function multiply(a, b) {
    return a * b;
  }
  // multiply was already available from creation phase
 
  console.log(count);           // 5
  console.log(result);          // 10
  console.log(multiply(3, 4));  // 12
}
 
demo();

function example() {
  // Both LexicalEnv and VariableEnv point to the function environment
  // VariableEnv: { x: undefined }
  // LexicalEnv: { y: <uninitialized> }
 
  var x = 1;
  let y = 2;
 
  if (true) {
    // A new LexicalEnv is created for this block
    // New LexicalEnv: { z: <uninitialized>, w: <uninitialized> }
    // VariableEnv: still points to function env { x: 1, v: undefined }
 
    let z = 3;
    const w = 4;
    var v = 5; // var goes to VariableEnv (function level)
 
    console.log(x, y, z, w, v); // 1 2 3 4 5
  }
 
  // Back to function-level LexicalEnv
  console.log(x, y, v); // 1 2 5
  // console.log(z);     // ReferenceError
}

// Global context: this = globalThis (window in browsers)
console.log(this === globalThis); // true (in non-strict mode)
 
const obj = {
  name: "Alice",
  greet() {
    // Method call: this = obj (the object before the dot)
    console.log(this.name); // "Alice"
  },
  greetArrow: () => {
    // Arrow function: this = outer this (global)
    console.log(this.name); // undefined
  }
};
 
obj.greet();       // "Alice"
obj.greetArrow();  // undefined
 
function standalone() {
  // Regular function call: this = globalThis (or undefined in strict mode)
  console.log(this);
}
 
standalone(); // globalThis or undefined

const name = "Global";
 
function first() {
  const name = "First";
 
  function second() {
    const name = "Second";
    console.log(name); // "Second"
  }
 
  second();
  console.log(name); // "First"
}
 
first();
console.log(name); // "Global"

function makeCounter() {
  // EC for makeCounter:
  //   LexicalEnv: { count: 0 }
  //   Outer: Global LexicalEnv
 
  let count = 0;
 
  return function increment() {
    // increment.[[Environment]] = makeCounter's LexicalEnv
    count++;
    return count;
  };
}
 
const counter = makeCounter();
// makeCounter's EC is popped from the stack
// But makeCounter's LexicalEnv is NOT destroyed
// because counter (increment) holds a reference to it
 
counter(); // 1 -- creates new EC for increment, resolves count via [[Environment]]
counter(); // 2 -- new EC, same [[Environment]], count is now 2

// Global Execution Context:
// {
//   LexicalEnvironment: {
//     EnvironmentRecord: {
//       // Object Environment Record (var + function declarations)
//       ObjectRecord: { /* bound to globalThis */ },
//       // Declarative Environment Record (let + const)
//       DeclarativeRecord: { /* NOT on globalThis */ }
//     },
//     OuterEnv: null
//   },
//   VariableEnvironment: {
//     // Points to the Object Environment Record
//   },
//   ThisBinding: globalThis
// }
 
var a = 1;       // -> ObjectRecord -> window.a = 1
let b = 2;       // -> DeclarativeRecord (NOT on window)
function c() {}  // -> ObjectRecord -> window.c = c
 
console.log(window.a); // 1
console.log(window.b); // undefined (b is not on window, let uses DeclarativeRecord)
console.log(window.c); // [Function: c]

function outer(x) {
  function middle(y) {
    function inner(z) {
      return x + y + z;
    }
    return inner(3);
  }
  return middle(2);
}
 
const result = outer(1); // 6

"use strict";
 
function strictDemo() {
  // In strict mode:
  // - this is undefined for regular function calls (not globalThis)
  // - Assigning to undeclared variables throws ReferenceError
  // - eval gets its own execution context (cannot modify calling context)
 
  console.log(this); // undefined (NOT globalThis)
 
  // x = 10; // ReferenceError: x is not defined (no implicit global)
}
 
strictDemo();