What Are Closures in JavaScript? Explained for AI-Assisted Developers

Closures show up in almost every piece of JavaScript AI generates. Once you see what they are, you'll spot them everywhere.

Why AI Coders Need to Know This

You ask Cursor to add a click counter button. The code works. Then you ask it to add three independent counters — and all three share the same count. Or you ask Claude to build a timer, and it reads a value that never updates. These are closure bugs.

Closures are one of those concepts that seem abstract until you hit the bug. Once you understand what a closure is, you can:

• Explain to the AI exactly what's wrong ("the callback has a stale closure over count")
• Read generated code and understand why it's structured the way it is
• Fix the "stale closure" bug that trips up almost every React developer
• Write better prompts that produce non-buggy closures the first time

Real Scenario

This is a classic closure use case. The AI needs to create a function that returns another function — and that returned function needs to remember a private counter that no outside code can touch.

What AI Generated

// Factory function — creates an independent counter
function makeCounter(initialValue = 0) {
  // This variable is "closed over" by the returned function
  let count = initialValue;

  return function increment() {
    count += 1;
    console.log(`Count is now: ${count}`);
    return count;
  };
}

// Create two completely independent counters
const counterA = makeCounter();
const counterB = makeCounter(10); // starts at 10

counterA(); // Count is now: 1
counterA(); // Count is now: 2
counterB(); // Count is now: 11
counterA(); // Count is now: 3  (counterA is unaffected by counterB)
counterB(); // Count is now: 12

Understanding Each Part

The outer function: makeCounter

makeCounter is a factory function — it creates and returns something. When it runs, it creates a local variable count. Normally, local variables disappear when their function returns. But there's a catch...

The inner function: increment

The increment function is defined inside makeCounter. It uses count — a variable from its outer scope. JavaScript says: "since this function references count, I'll keep count alive even after makeCounter returns." That's the closure — increment closes over count.

Why counterA and counterB are independent

Each call to makeCounter() creates a brand new execution context with its own count variable. counterA closes over one count; counterB closes over a different count. They never interfere. This is one of closures' most powerful features: private, isolated state.

The mental model

Think of a closure as a function with a backpack. The backpack contains all the variables from the outer scope when the function was created. Wherever the function goes — passed to another function, returned, stored in an array — its backpack comes with it.

Closures in React hooks

React's useState and useEffect are built on closures. When you write:

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count); // This closes over the 'count' value from this render
  }, 1000);
  return () => clearInterval(timer);
}, []); // Empty deps: the closure captures count = 0 and never updates

The callback inside setInterval closes over the count value from the first render (0). Even if count changes later, the callback still reads 0. This is the infamous stale closure bug.

What AI Gets Wrong

// Bug: all buttons log 5
for (var i = 0; i < 5; i++) {
  button.addEventListener('click', () => console.log(i));
}

// Fix: use let
for (let i = 0; i < 5; i++) {
  button.addEventListener('click', () => console.log(i));
}

How to Debug with AI

Diagnosing a stale closure

Symptom: A value inside a callback always shows the initial value, not the current one.

Debugging prompt: "My useEffect callback reads count as 0 even when it's changed. I think this is a stale closure. The effect has an empty dependency array. How do I fix this so it always reads the current count?"

Diagnosing loop closure bugs

Symptom: All event handlers show the same index number.

Debugging prompt: "All my buttons log '5' instead of their own index. The loop uses var. Is this a closure bug, and should I change var to let to fix it?"

Tool-specific tips

• Cursor: Ask it to add console.log statements at the point of closure capture to verify which value is being closed over.
• Claude Code: Paste the buggy code and ask: "Identify which variables are closed over by each function and whether any of them might be stale."
• Windsurf: Ask it to refactor loop closures to use let and to add cleanup returns to all useEffect hooks.

What to Learn Next

Closures build on scope and connect directly to how React state works:

• What Is Scope in JavaScript? — Closures are defined by scope rules. Understanding scope makes closures click.
• What Is a Function? — Functions are the building blocks of closures.
• What Is React? — React hooks are deeply closure-dependent. Understanding closures makes hooks make sense.
• What Are Event Listeners? — Your event handler callbacks are closures in action.
• What Are map, filter, reduce? — The callback functions you pass to array methods are closures too.

FAQ