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?