How Lexical Environment Works in JavaScript

// Global lexical environment:
//   Environment Record: { greeting: "Hello", sayHi: <function> }
//   Outer: null
 
const greeting = "Hello";
 
function sayHi(name) {
  // sayHi's lexical environment:
  //   Environment Record: { name: "Alice", message: "Hello, Alice!" }
  //   Outer: -> Global lexical environment
 
  const message = `${greeting}, ${name}!`;
  console.log(message);
}
 
sayHi("Alice");

function calculate(a, b) {
  // Declarative Environment Record:
  // {
  //   a: 5,
  //   b: 3,
  //   sum: <uninitialized>, // let - in temporal dead zone until line executes
  //   multiply: <function>  // function declaration - hoisted and initialized
  // }
 
  let sum = a + b;
 
  function multiply() {
    return a * b;
  }
 
  return { sum, product: multiply() };
}
 
calculate(5, 3);

// Global Object Environment Record (browser)
var globalVar = "hello";
// globalVar is added to window: window.globalVar === "hello"
 
let blockVar = "world";
// blockVar is NOT on window -- it's in a separate declarative record

// Global lexical environment has TWO records:
// 1. Object Environment Record (for var and function declarations)
//    -> Stored on globalThis/window
// 2. Declarative Environment Record (for let and const)
//    -> NOT on globalThis/window
 
var x = 1;       // Object record -> window.x === 1
let y = 2;       // Declarative record -> window.y === undefined
const z = 3;     // Declarative record -> window.z === undefined
function foo() {} // Object record -> window.foo === foo

const global = "G";
 
function outer() {
  const outerVal = "O";
 
  function middle() {
    const middleVal = "M";
 
    function inner() {
      const innerVal = "I";
 
      // Resolving `outerVal`:
      // Step 1: Check inner's env record -> not found
      // Step 2: Follow outer reference to middle's env record -> not found
      // Step 3: Follow outer reference to outer's env record -> FOUND "O"
      console.log(outerVal);
    }
 
    inner();
  }
 
  middle();
}
 
outer();

function resolveBinding(name, lexicalEnv) {
  // Base case: reached beyond global scope
  if (lexicalEnv === null) {
    throw new ReferenceError(`${name} is not defined`);
  }
 
  // Check current environment record
  const record = lexicalEnv.environmentRecord;
  if (record.hasBinding(name)) {
    // Check if the binding is initialized (TDZ check for let/const)
    if (!record.isInitialized(name)) {
      throw new ReferenceError(
        `Cannot access '${name}' before initialization`
      );
    }
    return record.getValue(name);
  }
 
  // Not found here, check the outer environment
  return resolveBinding(name, lexicalEnv.outerReference);
}

function createMultiplier(factor) {
  // Lexical environment A: { factor: 5 }
 
  return function multiply(number) {
    // When multiply is created HERE, [[Environment]] = A
    return number * factor;
  };
}
 
const double = createMultiplier(2);
// double.[[Environment]] = { factor: 2, outer: global }
 
const triple = createMultiplier(3);
// triple.[[Environment]] = { factor: 3, outer: global }
 
// When double(10) is called:
// 1. Create new lexical environment B: { number: 10 }
// 2. Set B's outer reference = double.[[Environment]] = { factor: 2 }
// 3. Resolve `factor`: not in B -> check outer -> found 2
// 4. Return 10 * 2 = 20
console.log(double(10)); // 20
console.log(triple(10)); // 30

function makeAdder(x) {
  return (y) => x + y;
}
 
const add5 = makeAdder(5);
// Call 1: New env { x: 5 }, returned function's [[Environment]] -> this env
 
const add10 = makeAdder(10);
// Call 2: Another new env { x: 10 }, returned function's [[Environment]] -> this env
 
// add5 and add10 have DIFFERENT [[Environment]] references
console.log(add5(3));  // 8 (x=5 from Call 1's environment)
console.log(add10(3)); // 13 (x=10 from Call 2's environment)

function example() {
  // Function environment: { a: undefined (var hoisted) }
 
  var a = 1;
  let b = 2;
 
  if (true) {
    // Block environment: { c: 3, d: 4 }
    // Outer: -> Function environment
    let c = 3;
    const d = 4;
    var e = 5; // var ignores block scope, goes to function env
 
    console.log(a, b, c, d, e); // 1 2 3 4 5
  }
 
  console.log(a, b, e); // 1 2 5
  // console.log(c); // ReferenceError: c is not defined
}

for (let i = 0; i < 3; i++) {
  // Iteration 0: New block env { i: 0 }, outer -> loop env
  // Iteration 1: New block env { i: 1 }, outer -> loop env
  // Iteration 2: New block env { i: 2 }, outer -> loop env
 
  setTimeout(() => {
    // Each callback's [[Environment]] points to its iteration's block env
    console.log(i);
  }, 100);
}
// Output: 0, 1, 2 -- each closure has its own `i`

for (var i = 0; i < 3; i++) {
  // var i lives in the function/global env, NOT in a per-iteration block env
  // All callbacks share the SAME `i`
 
  setTimeout(() => {
    console.log(i);
  }, 100);
}
// Output: 3, 3, 3 -- all closures reference the same `i`

// Before any code runs, the environment record is scanned:
// {
//   greet: <function reference>  -- function declaration: fully initialized
//   name: undefined              -- var: initialized to undefined
//   age: <uninitialized>         -- let: exists but NOT initialized (TDZ)
//   PI: <uninitialized>          -- const: exists but NOT initialized (TDZ)
// }
 
console.log(greet); // [Function: greet] -- works, fully initialized
console.log(name);  // undefined -- works, but initialized to undefined
// console.log(age);  // ReferenceError: Cannot access 'age' before initialization
// console.log(PI);   // ReferenceError: Cannot access 'PI' before initialization
 
function greet() { return "Hi"; }
var name = "Alice";
let age = 30;
const PI = 3.14;

function counter() {
  // Lexical Environment A is created:
  // { count: 0 }
 
  let count = 0;
 
  return function increment() {
    // increment.[[Environment]] = A
    // Even after counter() returns, A stays alive because increment references it
    count++;
    return count;
  };
}
 
const inc = counter();
// counter()'s execution is done
// But Environment A { count: 0 } is NOT garbage collected
// because inc.[[Environment]] points to it
 
inc(); // count in A becomes 1
inc(); // count in A becomes 2
 
// If we do:
// inc = null;
// Now nothing references increment, so nothing references A
// A can be garbage collected

const obj = {
  name: "Alice",
  greet() {
    // `this` is NOT in the lexical environment
    // It's determined by how greet() is called
    console.log(this.name);
 
    const inner = function () {
      // `this` here is NOT obj -- it's window/undefined
      console.log(this.name); // undefined (strict mode) or window.name
    };
 
    const arrow = () => {
      // Arrow functions don't get their own `this`
      // They use `this` from the lexical environment (like a variable)
      console.log(this.name); // "Alice"
    };
 
    inner();
    arrow();
  }
};
 
obj.greet();