Think You're a JavaScript Pro? Try Solving This Puzzle!

function createLoggers() {
  var loggers = [];

  for (var i = 0; i < 3; i++) {
    loggers.push(function () {
      console.log(i);
    });
  }

  return loggers;
}

const myLoggers = createLoggers();

myLoggers[0](); // ?
myLoggers[1](); // ?
myLoggers[2](); // ?

What do you think the output will be?
Take 30 seconds. Think about how JavaScript handles var, closures, and loops.

What’s Your Answer?

Here are some common guesses:

• 0, 1, 2 — seems intuitive, right?

• undefined, undefined, undefined — maybe it's an error?

• 3, 3, 3 — wait, what?

Drop your guess in the comments — no cheating!

This kind of question is exactly the kind of logic trap that shows up in interviews, code reviews, and debugging sessions. The syntax is simple, but the behavior? Sneaky.

Common Developer Reactions

Many developers assume each function "remembers" its own i value at the time it was created. But with var, that’s not how JavaScript works.

We’ve seen even senior engineers confidently predict 0, 1, 2 — only to be shocked when every log outputs 3.

Sound familiar?

Don’t worry — in the next section, we’ll break down exactly what’s going on, and why this puzzle trips up even the best.

Solution Breakdown & What It Teaches You

Step-by-Step Explanation

Let’s go back to this part of the puzzle:

for (var i = 0; i < 3; i++) {
  loggers.push(function () {
    console.log(i);
  });
}

At first glance, it looks like we’re storing three separate functions, each remembering a different value of i. But here’s the catch: the keyword var does not create a new i for each loop iteration. Instead, var is function-scoped, not block-scoped.

That means:

• The same i variable is shared across all iterations.

• The functions you push into loggers[] don’t get the value of i at that moment.

• They just reference the i variable, and when they’re finally executed (after the loop ends), i has already become 3.

So when you run:

myLoggers[0](); // logs 3
myLoggers[1](); // logs 3
myLoggers[2](); // logs 3

Output:

3  
3  
3  

The JavaScript Concepts Behind It

This puzzle teaches you three powerful concepts:

1. Closures

Every function in JavaScript "closes over" the variables in its outer scope — but it doesn’t make a copy of them. It keeps a reference. That’s why all three functions point to the same i.

2. Function vs Block Scope

• var is function-scoped. That means no matter how many times the loop runs, it reuses the same i.

• If we changed var to let, each iteration would create a new block-scoped i.

Try this instead:

for (let i = 0; i < 3; i++) {
  loggers.push(function () {
    console.log(i);
  });
}

Now the output is:

0  
1  
2