why does this happen???

[e99170110-jpg]

Body

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

Why does this print 5 five times instead of 0, 1, 2, 3, 4?

Guidelines

• I have read and understood this category's guidelines before making this post.

[protocol-8]

var is function scoped so all 5 callbacks point to the same i and by the time they fire the loop is done and i is 5 they all read the same variable not their own copy
let fixes it by giving each iteration its own i so each callback remembers the value it was created with

hope it helps!!!

[fzihak]

The behavior happens because of two things working together:

1. var is function-scoped
2. setTimeout runs after the loop finishes (asynchronous execution)

Consider the code:

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

The loop runs immediately and finishes almost instantly.
By the time the setTimeout callbacks execute, the loop is already done and the value of i is:

5

All callbacks reference the same i variable, so they all print:

5
5
5
5
5 

Fix (Use let)

let is block-scoped, so each loop iteration gets its own i.

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

Output:

0
1
2
3
4

Alternative (pre-ES6)

Capture the value using an IIFE:

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

Here the function parameter creates a new scope, preserving the value of i for each callback.