Scope

1What Scope Controls

Scope determines where a variable is visible and accessible in your code. JavaScript resolves variable lookups using lexical (static) scoping: visibility is determined by where code is written, not where it's called from.

2The Three Kinds of Scope

let global = "visible everywhere";

function outer() {
  let functionScoped = "visible anywhere inside outer()";

  if (true) {
    let blockScoped = "visible only inside this if-block";
    var notBlockScoped = "visible anywhere inside outer(), NOT just this block";
  }

  console.log(notBlockScoped); // works — var ignores block boundaries
  // console.log(blockScoped);  // ReferenceError
}

3The Scope Chain

When a variable is referenced, the engine searches outward: current scope → enclosing scope → ... → global scope. The first match wins. If nothing matches, JavaScript throws a ReferenceError (in strict mode) or creates an accidental global (in non-strict mode, var/undeclared only).

let a = "outer";

function level1() {
  let b = "level1";

  function level2() {
    let c = "level2";
    console.log(a, b, c); // "outer level1 level2" — all reachable via the chain
  }
  level2();
}
level1();

Scope chains are one-directional: inner scopes see outer variables, but outer scopes cannot see inner variables.

4Shadowing

An inner scope can declare a variable with the same name as an outer one. The inner variable shadows (hides) the outer one for the rest of that inner scope.

let x = "outer";
function shadow() {
  let x = "inner";
  console.log(x); // "inner" — the outer x is inaccessible here
}
shadow();
console.log(x); // "outer" — unaffected

5Lexical Scoping vs Dynamic Scoping

JavaScript is lexically scoped: a function's access to variables is determined by where the function is defined, not where it's called.

let value = "global";

function printValue() {
  console.log(value); // always looks up `value` from where printValue was DEFINED
}

function wrapper() {
  let value = "local to wrapper";
  printValue(); // still prints "global" — not "local to wrapper"
}
wrapper();

This is the mechanism that makes closures possible (see the Closures topic).

6Module Scope

Each ES module (.mjs, or .js with "type": "module") has its own top-level scope. Top-level let/const/var/function declarations are not added to the global object and are invisible to other modules unless explicitly exported.

function outer() {
  let uncaptured = "fast";      // stays a stack slot — outer() returning discards it immediately
  let captured = "slow-ish";     // promoted to a Context object — an inner function needs it later

  return function inner() {
    return captured;              // this closure forces `captured` (and ONLY `captured`) onto the heap
  };
}

Context(level2) --parent--> Context(level1) --parent--> Context(global)
   [c]                          [b]                          [a]

⚠️ Common Pitfalls

1. var inside loops — a single var binding is shared across all iterations, which breaks closures capturing the loop variable (see Closures exercises).
2. Accidental globals — assigning to an undeclared variable in non-strict mode silently creates a global. Always use "use strict" or ES modules (strict by default).
3. Confusing function scope with block scope — a var declared inside a for loop is visible outside the loop entirely.
4. Shadowing bugs — redeclaring a parameter name or an outer variable name inside a nested function can silently hide the outer value.

📋 Quick Reference

Global scope
 └─ Function scope (created per function call)
     └─ Block scope (created per { }, let/const only)

🎤 Interview Q&A

🛠️ Practice exercises

Each exercise is a file in this topic folder. Code exercises are self-checking: run them and make the checks pass.

Source: js_scope_theory.md · generated by tools/build_lessons.py