Search intent this article targets

Closure searches are evergreen. Developers repeatedly search for "JavaScript closure example", "closures interview questions", "closures in loops", "closure memory leak", and "React stale closure". That makes this topic valuable for long-term SEO and learner trust.

• Beginners trying to understand lexical scope.
• Interview candidates practicing output questions.
• React developers debugging stale state in callbacks.
• Backend developers building factories, middleware, and private state helpers.

The precise definition

A closure is created when a function is bundled with references to variables from its lexical environment. The inner function can access those variables even after the outer function has finished executing.

function createCounter() {
  let count = 0;

  return function increment() {
    count += 1;
    return count;
  };
}

const counter = createCounter();

counter(); // 1
counter(); // 2
counter(); // 3

The variable count does not disappear when createCounter returns because increment still references it.

Lexical scope is the foundation

JavaScript decides what variables a function can access based on where the function is written, not where it is called. This is lexical scope. Closures preserve access to that lexical environment.

const label = 'global';

function outer() {
  const label = 'outer';

  return function inner() {
    return label;
  };
}

const readLabel = outer();
console.log(readLabel()); // outer

inner was written inside outer, so it closes over outer's label. The call location does not change that.

Private state without classes

Closures can hide implementation details. This is useful for factories, modules, middleware, and utilities where callers should interact through methods instead of directly mutating internal state.

function createRateLimiter(limit) {
  let used = 0;

  return {
    canRun() {
      return used < limit;
    },
    record() {
      if (used >= limit) return false;
      used += 1;
      return true;
    },
  };
}

The variable used is private because only the returned methods can access it.

The classic loop question

Older closure interview questions often use var because var is function-scoped, not block-scoped. Each callback closes over the same i variable, so the final value appears in every callback.

for (var i = 0; i < 3; i += 1) {
  setTimeout(() => console.log(i), 0);
}

// 3
// 3
// 3

for (let j = 0; j < 3; j += 1) {
  setTimeout(() => console.log(j), 0);
}

// 0
// 1
// 2

let creates a fresh binding for each iteration, which is why the second loop behaves as most developers expect.

Closures and memory

Closures keep referenced variables alive. That is useful, but it also means large objects can remain in memory if a long-lived callback still references them. This matters in event listeners, caches, intervals, and UI components.

function attachHandler(button, largeData) {
  function onClick() {
    console.log(largeData.id);
  }

  button.addEventListener('click', onClick);

  return () => button.removeEventListener('click', onClick);
}

Cleanup matters. If the button or handler lives longer than expected, the closed-over data can live longer too.

React stale closures

React developers often meet closures through stale state bugs. A callback captures values from the render in which it was created. If an effect or interval does not update its callback correctly, it may keep reading old values.

useEffect(() => {
  const id = setInterval(() => {
    console.log(count);
  }, 1000);

  return () => clearInterval(id);
}, [count]);

The dependency array tells React when to create a fresh closure. Understanding closures makes hook behavior much less mysterious.

Interview explanation

A strong answer: a closure is a function plus access to variables from its lexical scope, even after the outer function returns. Closures enable private state, factories, callbacks, and module patterns. They can also keep memory alive, so long-lived callbacks should be cleaned up and designed carefully.

Quick FAQ

Is every JavaScript function a closure?

Every function has a lexical environment, but we usually talk about closures when a function uses variables from an outer scope after that outer scope would otherwise be gone.

Do closures cause memory leaks?

Closures do not automatically leak memory, but they can keep referenced data alive longer than intended if callbacks, listeners, or intervals are not cleaned up.

Why are closures important in React?

React callbacks and effects capture values from renders. Many stale state bugs are closure bugs, so understanding closures makes hooks easier to reason about.

Official references

• MDN: Closures