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?
ivariable in each iteration. In the case oflet, each iteration has its ownivariable and the callback function ofsetTimeoutforms a closure overivariable that was created just for that iteration of the loop. In total, you have 4 closures formed over 4 separate copies ofiand the callback of eachsetTimeoutcall logs the value that it closed over.ihas changed? And that is why it is different thanconst?varis 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 declarelet i = 0directly above the for loop, then the scope changes to the function and you will see all 3's as you expect.i. Detailed article explaining this problem: Closures in Loops