The Scope Chain: How Variables Are Resolved

What is the Scope Chain?

The scope chain is a hierarchy of scopes created by nested functions. When JavaScript needs to access a variable, it searches through this chain from the current scope outward until it finds the variable or reaches the global scope. This process ensures variables are accessed from their correct context.

let globalVar = 'global';

function outer() {
  let outerVar = 'outer';
  
  function inner() {
    let innerVar = 'inner';
    
    console.log(innerVar);   // Found immediately in local scope
    console.log(outerVar);   // Found in outer function scope
    console.log(globalVar);  // Found in global scope
  }
  
  inner();
}

outer();

Variable Lookup Process

JavaScript follows a specific order when resolving variables:

let level0 = 'global';

function level1() {
  let level1Var = 'level 1';
  
  function level2() {
    let level2Var = 'level 2';
    
    function level3() {
      let level3Var = 'level 3';
      
      // Search: level3 → level2 → level1 → global
      console.log(level3Var);  // ✓ Found in level3
      console.log(level2Var);  // ✓ Found in level2
      console.log(level1Var);  // ✓ Found in level1
      console.log(level0);     // ✓ Found in global
    }
    
    level3();
  }
  
  level2();
}

level1();

Variable Shadowing

When inner scopes declare variables with the same name as outer scopes, the inner variable shadows (hides) the outer one.

let name = 'global';

function parent() {
  let name = 'parent';
  
  function child() {
    let name = 'child';
    console.log(name); // 'child' - innermost always wins
  }
  
  child();
  console.log(name); // 'parent' - still accessible at this level
}

parent();
console.log(name); // 'global' - global still intact

Scope Chain and Closures

Closures benefit from the scope chain. A closure "remembers" its entire scope chain, allowing it to access variables from the context where it was created.

function createCounter() {
  let count = 0; // Captured in scope chain
  
  return function increment() {
    count++; // Searches scope chain, finds count
    console.log(count);
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1(); // 1 - uses counter1's scope chain
counter1(); // 2 - same closure, same count variable
counter2(); // 1 - different scope chain, different count

// WRONG - All closures share same scope chain
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 - same scope chain, i=3 by the time they run

// CORRECT - let creates new scope per iteration
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
}
// Output: 0, 1, 2 - each iteration gets its own scope chain

Important: Scope Chain vs 'this'

A common misconception is that 'this' is resolved through the scope chain. It isn't. 'this' is determined by how a function is called, not by the scope chain.

const obj = {
  name: 'Object',
  method() {
    console.log(this.name); // 'Object' - this is obj
    
    function inner() {
      console.log(this.name); // undefined - this is globalThis/undefined
    }
    
    inner();
  }
};

obj.method();

const obj = {
  name: 'Object',
  method() {
    // Arrow function captures 'this' from lexical scope
    const arrowFunc = () => {
      console.log(this.name); // 'Object' - inherits this from method
    };
    
    arrowFunc();
  }
};

obj.method(); // Output: 'Object'

Scope Chain Performance

Variable access through deep scope chains can be slower than local access, but modern engines optimize this significantly.

let global = 0;

function outer() {
  let outerVar = 0;
  
  return function inner() {
    // Fastest - local variables
    // Medium - outer scope variables (scope chain lookup)
    // Slowest - global variables (longest chain)
    
    // In tight loops, cache outer variables locally:
    const cached = outerVar;
    for (let i = 0; i < 1000000; i++) {
      let sum = cached + i; // Uses local cache, not scope chain
    }
  };
}

const func = outer();
func();

Related Topics

Frequently Asked Questions