JavaScript Closure Interview Questions

Why closures exist

JavaScript uses lexical scoping — a function's scope is determined by where it's written in the code, not where it's called from. Closures are the natural consequence of this combined with first-class functions.

function outer() {
  const message = 'I am in the backpack'

  return function inner() {
    console.log(message) // works even after outer() is gone
  }
}

const fn = outer()  // outer() runs and returns — 'message' should be gone…
fn()                // 'I am in the backpack' — but it's not. Closure.

Example 1 — Counter (closures as private state)

The most common real pattern. count is completely private — no way to set it or read it from outside except through the methods you expose.

function createCounter() {
  let count = 0  // private — nobody outside can touch this

  return {
    increment() { count++ },
    decrement() { count-- },
    value()     { return count }
  }
}

const counter = createCounter()
counter.increment()
counter.increment()
counter.decrement()
console.log(counter.value()) // 1

console.log(count) // ReferenceError — count doesn't exist out here

Example 2 — Function factory (closures generating functions)

Each call to multiplier() creates a new closure with a different factor in its backpack. They're independent — changing one doesn't affect the others.

function multiplier(factor) {
  return function(number) {
    return number * factor  // 'factor' is in the backpack
  }
}

const double = multiplier(2)
const triple = multiplier(3)

console.log(double(5))  // 10
console.log(triple(5))  // 15

The classic gotcha — the loop problem

This trips up experienced developers. Every interviewer uses it.

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

// Most people expect: 0, 1, 2
// What actually prints: 3, 3, 3

Why: var is function-scoped — there's only one i variable for the whole loop. All three closures point to the same i. By the time setTimeout fires, the loop is done and i is 3.

// Fix 1 — use let (creates a new binding per iteration)
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i)  // 0, 1, 2 ✓
  }, 1000)
}

// Fix 2 — IIFE (manually create a new scope)
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j)  // 0, 1, 2 ✓
    }, 1000)
  })(i)
}

The junior vs senior answer

A junior answer quotes the definition: "A closure is when a function has access to its outer scope's variables even after the outer function has returned." Technically correct. Not memorable.

A senior answer explains the backpack analogy, demonstrates the loop problem without being asked, and mentions React hooks or the module pattern as real-world usage. That's what gets you hired.