0

Ran into something surprising with var, let, const and scope/closures today.

Checkout the 3 statements below (each one is numbered).

Why does #1 print out all '3' and #2 prints out incrementing numbers?

If the i value referenced in setTimeout is referring back to the scope surrounding i at the time the callback is executed, all of the 'i' values should be 3. What am I not understanding?

const array = new Array(4);

// 1. VAR - All log statements will be '3'
for (var i = 0; i < array.length; i++) {
  setTimeout(function(){
    console.log('var index' + i);
  }, 1000)
}

// 2. LET - All log statements increment from 0 to 3
for (let i = 0; i < array.length; i++) {
  setTimeout(function(){
    console.log('let index' + i);
  }, 2000)
}

// 3. CONST - Error, reassignment to constant after first iteration.
for (const i = 0; i < array.length; i++) {
  setTimeout(function(){
    console.log('let index' + i);
  }, 3000)
}

Sure let is 'block scoped', but it's the same i variable reused across iterations. Shouldn't that mean if setTimeout is still using a closure to reference i, it will be whatever i is set to at the time the callback runs?

Don P
  • 60,113
  • 114
  • 300
  • 432
  • _"but it's the same i variable reused across iterations"_ - no, it's a _different_ `i` variable in each iteration. In the case of `let`, each iteration has its own `i` variable and the callback function of `setTimeout` forms a closure over `i` variable that was created just for that iteration of the loop. In total, you have 4 closures formed over 4 _separate_ copies of `i` and the callback of each `setTimeout` call logs the value that it closed over. – Yousaf Oct 15 '21 at 05:04
  • Isn't it the same variable, just the value assigned to `i` has changed? And that is why it is different than `const`? – Don P Oct 15 '21 at 05:08
  • so you know that `var` is a public scope which essentially means it is immune to block scope. However, when you use let, it is block-scoped to the for loop and can't be changed by subsequent iterations of the loop. If you declare `let i = 0` directly above the for loop, then the scope changes to the function and you will see all 3's as you expect. – jet_24 Oct 15 '21 at 05:10
  • 1
    No, its not the same variable `i`. Detailed article explaining this problem: [Closures in Loops](https://blog.yousafkhan.me/understanding-closures-in-loops-problem-and-how-it-is-solved-in-es6) – Yousaf Oct 15 '21 at 05:10
  • wow - @Yousaf to the rescue again :P great article! Out of curiosity, how did you figure out the details in the article? From JS spec or something else? – Don P Oct 15 '21 at 05:28
  • There's an excellent JS book: [Javascript - The New Toys](https://thenewtoys.dev/) by [@T.J Crowder](https://stackoverflow.com/users/157247/t-j-crowder). Everything explained in the article is one of the many things I learned from this book. – Yousaf Oct 15 '21 at 05:32

0 Answers0