Back to library

🔒JavaScript Closures Demystified

Build one mental model for closures that covers the setTimeout loop bug, private state, and React hooks — then ship a tiny state container using nothing but functions and lexical scope.

Applied14 drops~2-week path · 5–8 min/daytechnology

Phase 1Lexical Scope and Captured Environments

Build intuition for lexical scope and captured variables

4 drops
  1. A function remembers where it was born

    6 min

    A function remembers where it was born

  2. Variables are looked up, not copied

    6 min

    Variables are looked up, not copied

  3. let creates a new room every time

    6 min

    let creates a new room every time

  4. Returning a function is returning its scope

    7 min

    Returning a function is returning its scope

Phase 2Fixing the Classic Loop Bug

Solve the setTimeout loop bug and IIFE variations

5 drops
  1. Why setTimeout prints the last number

    7 min

    Why setTimeout prints the last number

  2. The one-word fix that changes everything

    6 min

    The one-word fix that changes everything

  3. Methods that hide the scope fix for you

    6 min

    Methods that hide the scope fix for you

  4. The same bug, wearing an event handler

    7 min

    The same bug, wearing an event handler

  5. Snapshots using function parameters

    7 min

    Snapshots using function parameters

Phase 3Modules, Private State, and Hooks

See closures behind modules, private state, and hooks

4 drops
  1. Pre-class JavaScript already had private fields

    7 min

    Pre-class JavaScript already had private fields

  2. useState is a closure in disguise

    8 min

    useState is a closure in disguise

  3. A one-line cache using captured scope

    7 min

    A one-line cache using captured scope

  4. Subscribers live in their parent's scope

    7 min

    Subscribers live in their parent's scope

Phase 4Build a Closure-Only State Container

Ship a tiny state container built from closures only

1 drop
  1. Build a Redux-style store from scratch

    20 min

    Build a Redux-style store from scratch

Frequently asked questions

What exactly is a closure in JavaScript?
This is covered in the “JavaScript Closures Demystified” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
Why does the setTimeout-in-a-loop bug happen with var?
This is covered in the “JavaScript Closures Demystified” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
How do closures create private state without classes?
This is covered in the “JavaScript Closures Demystified” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
Why does React's useState rely on closures?
This is covered in the “JavaScript Closures Demystified” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
Do closures leak memory in JavaScript?
This is covered in the “JavaScript Closures Demystified” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.