setTimeout and Closures: The Interview Classic

Key Words In Plain English

• Closure is a function that remembers the variables from the place where it was created and keeps using them later (Lesson 10).
• setTimeout is a built-in function that runs a function once, after a delay in milliseconds. It does not wait. It schedules the work and returns at once.
• Callback is a function you give to other code so that it can call it later. The function you pass to setTimeout is a callback.
• Arrow function is a short way to write a function: () => console.log(i).
• Synchronous code is code that runs line by line, each line finishing before the next starts. A timer callback is not part of it. It runs later.
• Call stack is the list of function calls running right now. The engine runs one thing at a time, from the top of the stack.
• Event loop is the part of the runtime that waits until the call stack is empty and then moves the next waiting callback onto it. Lesson 14 explains it.
• Block scope means a variable exists only inside the nearest pair of braces. Function scope means it exists in the whole function. let is block scoped and var is function scoped (Lesson 9).
• Binding is the link between a variable name and its storage. With let in a loop head, each pass of the loop gets its own binding.
• IIFE (Immediately Invoked Function Expression) is a function that is defined and called in the same step: (function () { ... })().
• .bind() is a function method that returns a new function with some arguments already filled in. f.bind(null, 5) is a copy of f that always gets 5 as its first argument. The first value (null here) sets this, and console.log does not need it.
• Variable Environment is the engine's record of the variables made by one function call. Every call gets its own new record (Lesson 4).

The Problem, Stated Precisely

Print the numbers 1 through 5, one per second — 1 after 1 second, 2 after 2 seconds, and so on — using a loop and setTimeout. It sounds trivial. The obvious first attempt is wrong, and understanding exactly why it's wrong is what makes this question worth asking.

The Wake-Up Call Sheet — An Analogy

The Naive Attempt — And Why It Fails

for (var i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}

// Expected: 1, 2, 3, 4, 5 (one per second)
// Actual:   6, 6, 6, 6, 6

Tracing It, Step By Step

1for (var i = 1; i <= 5; i++) {
2  setTimeout(() => {
3    console.log(i);
4  }, i * 1000);
5}
6// 6, 6, 6, 6, 6

1. The loop runs to completion immediately

   setTimeout doesn't pause the loop — it just hands each callback off to be run later, and the loop moves straight on to the next iteration. All five setTimeout calls happen within a few milliseconds of each other.

2. i keeps incrementing, in the same shared spot

   By the time the loop's condition i <= 5 finally fails, i has been incremented one last time — to 6 — and the loop exits.

3. All five callbacks were closures over that one i

   None of the five arrow functions got their own copy of i. Each one just closed over the single, shared i variable — the same one the loop itself was using.

4. A second (or more) later, each callback finally runs

   By now i is 6 and will never change again. Every callback reads the same, final, shared value — five wake-up calls, one overwritten sticky note.

Fix 1 — Swap var For let

for (let i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}
// 1, 2, 3, 4, 5 — one per second

Covered in full in Lesson 10: let creates a brand-new binding of i for every iteration of the loop. Five iterations, five completely independent i variables, five separate closures — each one permanently capturing its own value. This is the modern, default answer, and in real code it's the one you should actually use.

1for (let i = 1; i <= 5; i++) {
2  setTimeout(() => {
3    console.log(i);
4  }, i * 1000);
5}
6// 1, 2, 3, 4, 5

Fix 2 — Wrap It In A Closure (IIFE)

Before let existed, this was the standard interview answer, and it still shows up when someone asks “solve it without changing var.” An IIFE (Immediately Invoked Function Expression) creates a brand-new function scope on every iteration, and that new scope is where the closure actually forms:

for (var i = 1; i <= 5; i++) {
  (function (capturedI) {
    setTimeout(() => {
      console.log(capturedI);
    }, capturedI * 1000);
  })(i);
}
// 1, 2, 3, 4, 5

The IIFE runs immediately, on every single iteration, taking the current value of i as its parameter capturedI right then and there. Each of the five IIFE calls gets its own private Variable Environment (Lesson 4) — its own separate capturedI — and the inner setTimeout callback closes over that private copy instead of the shared, looping i.

1for (var i = 1; i <= 5; i++) {
2  (function (capturedI) {
3    setTimeout(() => {
4      console.log(capturedI);
5    }, capturedI * 1000);
6  })(i);
7}
8// 1, 2, 3, 4, 5

Fix 3 — Pass i As A Function Parameter

function scheduleLog(n) {
  setTimeout(() => {
    console.log(n);
  }, n * 1000);
}

for (var i = 1; i <= 5; i++) {
  scheduleLog(i);
}
// 1, 2, 3, 4, 5

Same underlying idea as the IIFE, just cleaner: every call to scheduleLog(i) creates a brand-new function call, and every function call gets its own fresh Variable Environment (Lesson 4) — including its own private copy of the parameter n. Five calls, five independent ns, five correct closures.

1function scheduleLog(n) {
2  setTimeout(() => {
3    console.log(n);
4  }, n * 1000);
5}
6 
7for (var i = 1; i <= 5; i++) {
8  scheduleLog(i);
9}
10// 1, 2, 3, 4, 5

Fix 4 — Pre-Bind The Argument

for (var i = 1; i <= 5; i++) {
  setTimeout(
    console.log.bind(null, i),
    i * 1000
  );
}
// 1, 2, 3, 4, 5

.bind() creates a new function with i's current value permanently locked in as an argument, right at the moment .bind() is called — not read later when the timer fires. It sidesteps closures entirely by baking the value in up front, rather than relying on scope at all.

1for (var i = 1; i <= 5; i++) {
2  setTimeout(
3    console.log.bind(null, i),
4    i * 1000
5  );
6}
7// 1, 2, 3, 4, 5

All Four, Side By Side

All four are legitimate, correct answers. In real code, reach for let — it's simpler and it's what it was designed for. The other three are worth knowing because interviewers often specifically ask you to solve it without touching var.

A Note On setTimeout's Timing

See It Live — DevTools

1. Paste the naive var version

   Run it in the console and watch the logs arrive one per second, each one showing 6. (The delays use the value of i at the moment each setTimeout is called, so they are still 1, 2, 3, 4 and 5 seconds.)

2. Set a breakpoint inside the arrow function

   On the console.log(i) line, then re-run.

3. Check the Closure section each time it pauses

   All five pauses will show the exact same i, already at 6, in the Global scope (it would be a Closure entry named after the function if the loop were inside a function).

4. Repeat with the let version

   This time each pause shows a different i (1, then 2, and so on) in its own Closure entry — a fresh i per iteration, exactly as Lesson 10 described.

Common Misconceptions

Interview Questions