JS Scope

JavaScript Scope: Lexical Visibility and Closures

JavaScript scope determines where variables and functions are visible and accessible in your code. JavaScript uses lexical scoping, meaning inner blocks and functions can read variables defined in outer scopes based on where the code is written.

The Three Scopes and the Scope Chain

1. Global / Module scope: Top-level bindings accessible throughout a script or ES module.
2. Function scope: Variables declared inside a function (including var, let, const, and parameters) are private to that function.
3. Block scope: let and const bindings declared inside { ... } blocks such as if, for, or while stay hidden outside those braces.

flowchart TD
    Inner["Inner Function (localVar)"] -- "Not found locally, look up" --> Outer["Outer Function (outerVar)"]
    Outer -- "Not found here, look up" --> Global["Module / Global Scope (config)"]

How Closures Use Lexical Scope

A closure happens when an inner function remembers and keeps access to variables from its outer function even after that outer function has finished running.

function createCounter(startValue = 0) {
  let count = startValue; // Private via closure

  return {
    increment() {
      count += 1;
      return count;
    },
    getValue() {
      return count;
    },
  };
}

const pageViews = createCounter(10);
console.log("Next view:", pageViews.increment()); // 11
console.log("Current:", pageViews.getValue());    // 11

Common Mistakes to Avoid

• Polluting global scope: Attaching temporary data to window creates name collisions across scripts. Keep modules isolated and declare variables in the smallest scope needed.
• Accidental variable shadowing: Naming a local let user identically to an outer const user hides the outer variable inside that inner block.
• Holding large arrays inside long-lived closures: Because closures keep referenced outer variables alive in memory, avoid capturing giant DOM nodes or buffers you no longer need.

Frequently Asked Questions

What is the difference between lexical scope and dynamic scope?

Lexical scope depends on where a function is defined in source code, whereas dynamic scope depends on where it is called. JavaScript uses lexical scope (except for this, which depends on call site).

Can an outer function read a variable declared inside an inner function?

No, the scope chain flows outward only. Outer code cannot reach inward to inspect local function variables.

Why are closures useful in real projects?

Closures power private state, event handlers, debounced search inputs, factory functions, and React hooks.