Scope Chains and Lexical Scope

Where Does a Variable Live?

When JavaScript encounters a variable name, it needs to find where that variable was defined. This lookup process isn't random — it follows a rigid chain of lexical environments, determined entirely by where you wrote the code, not where it runs. This is called lexical scoping, and mastering it unlocks your understanding of closures, hoisting, and module patterns.

Types of Scope

JavaScript has three types of scope:

Global Scope

Variables declared at the top level. In browsers, they live on window. In Node, they live in the module scope (not truly global).

var x = 1;      // global scope (window.x in browsers)
let y = 2;      // global scope but NOT on window
const z = 3;    // global scope but NOT on window

Function Scope

var declarations are scoped to their containing function, not their containing block:

function example() {
  if (true) {
    var x = 10;  // scoped to example(), not the if-block
  }
  console.log(x); // 10 — var ignores block boundaries
}

Block Scope

let and const are scoped to the nearest {} block:

function example() {
  if (true) {
    let x = 10;   // scoped to the if-block
    const y = 20;  // scoped to the if-block
  }
  console.log(x); // ReferenceError: x is not defined
}

The Scope Chain — How Variable Resolution Works

Every execution context has a reference to its outer lexical environment. This creates a chain:

const global = "I'm global";

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

  function middle() {
    const middleVar = "I'm middle";

    function inner() {
      const innerVar = "I'm inner";
      // Scope chain for inner():
      // inner scope → middle scope → outer scope → global scope
      console.log(innerVar);   // found in inner scope
      console.log(middleVar);  // found in middle scope
      console.log(outerVar);   // found in outer scope
      console.log(global);     // found in global scope
    }
    inner();
  }
  middle();
}
outer();

Lexical vs Dynamic Scoping

JavaScript uses lexical (static) scoping. The scope chain is determined by where the function is defined in the source code, not where it's called:

const x = "global";

function printX() {
  console.log(x); // Which x?
}

function wrapper() {
  const x = "local";
  printX(); // "global" — not "local"!
}

wrapper();

printX was defined in the global scope, so its outer scope is global. It doesn't matter that wrapper called it from a scope where x is "local".

Variable Shadowing

When an inner scope declares a variable with the same name as an outer scope, the inner one shadows the outer:

const x = "outer";

function demo() {
  const x = "inner"; // shadows the outer x
  console.log(x);    // "inner"
}

demo();
console.log(x); // "outer" — unaffected

Shadowing is not reassignment. The outer variable still exists and is untouched. The inner scope simply has its own binding with the same name, so the lookup finds it first and stops.

Production Scenario: Accidental Global Variables

function processData(items) {
  for (i = 0; i < items.length; i++) { // Bug: missing var/let/const
    transform(items[i]);
  }
}

// i is now a global variable (window.i in browsers)
// If another function also uses an undeclared i, they collide
// In strict mode, this throws ReferenceError instead

This is why "use strict" (or ESM modules, which are strict by default) matters. Without it, assigning to an undeclared variable silently creates a global.

"use strict";
function processData(items) {
  for (i = 0; i < items.length; i++) {
    // ReferenceError: i is not defined
    // Bug caught immediately
  }
}