Lesson 2 of 80

Closures

Q: What is a closure, and give an example of where you'd actually reach for one.

A strong answer covers: A function that retains access to its lexical scope after the outer function has returned; A concrete use case (debounce, counter factory, memoization, module privacy); The captured variable survives / isn't garbage-collected while the closure is reachable.

A function remembers the variables from where it was born — even after that place is gone. The idea behind debounce, counters, and React's useState.

15 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

In the debounce example, what keeps `timer` alive after debounce() has already returned?

The returned function closes over `timer`, keeping the reference alivesetTimeout stores `timer` globally`timer` is hoisted to the global scope

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Closures

What interviewers actually ask about this, and what a strong answer has to cover.

What is a closure, and give an example of where you'd actually reach for one.

A strong answer covers

A function that retains access to its lexical scope after the outer function has returned
A concrete use case (debounce, counter factory, memoization, module privacy)
The captured variable survives / isn't garbage-collected while the closure is reachable

Likely follow-ups

You said it 'remembers' the variables — does it copy them or reference them? What difference does that make?
What's the classic bug when you create closures inside a for-loop with var, and how does let fix it?
Does creating many closures cost anything? When would that actually matter?

Practice these with the AI interviewer →

The plain-language idea

A closure is a function that remembers the variables around it from where it was created, even after the outer function has finished running.

From the scope lesson: inner code can reach outward. A closure is what happens when you keep that inner function around after the outer one returns — it drags its outer variables along with it.

See it in a real thing: a debounce

A debounce says "wait until the user stops typing for 300ms, then run." Here's the core, and the closure is doing all the work:

function debounce(fn, delay) {
  let timer;                    // lives in the outer room
  return function (...args) {
    clearTimeout(timer);        // the returned fn still sees `timer`
    timer = setTimeout(() => fn(...args), delay);
  };
}

debounce returns and is gone — but the returned function still holds a live reference to timer. That surviving reference is the closure. Without it, every call would start with a fresh timer and nothing would ever get cancelled.

Closures: why the variable survivesStep 1 of 4

makeCounter() runs. It creates a variable count, and a function increment that uses it.

What people usually miss

Watch out

The classic loop bug. Using var in a for loop with an async callback captures one shared variable, so every callback sees the final value. let gives each iteration its own binding and fixes it.
Closures keep memory alive. As long as the closure is reachable, its captured variables can't be garbage-collected. Usually fine — occasionally a leak.
Each call makes a new closure. Calling debounce twice gives two independent timers; they don't interfere.

The genealogy: this is everywhere

useState in React is a closure over the component's state cell. Event handlers you pass around are closures over their surrounding variables. The module pattern hides private data in a closure. Learn this one idea, and four other things click.