Все дело в области видимости переменной. Оператор let объявляет переменную которая приурочена к блочной области видимости. Что такое блочная область видимости? Вот пример
let a = 10;
{
let a = 20;
console.log(a); // 20
}
console.log(a); // 10
Как видно внутри блока и вне его ES6 создает совершенно разные переменные. Переменная созданная оператором let видна только в своей области видимости и вне ее области видимости к ней обратиться не возможно.
Вот что произойдет если то же самое попробовать с оператором var.
var a = 10;
{
var a = 20;
console.log(a); // 20
}
console.log(a); // 20
Как видишь оператор var не полностью соответствует правилам блочной видимости.
Можно твой пример можно упростить для большей ясности
for(let i = 0; i < 10; i++) setTimeout(() => console.log(i), 1000)
1) Можно представить следующим образом
for(let i = 0; i < 10; i++){
setTimeout(
function(){console.log(i);},
1000
)
}
2) И разбить по строкам
{
let i = 0;
setTimeout(
function(){console.log(i);},
1000
)
}
{
let i = 1;
setTimeout(
function(){console.log(i);},
1000
)
}
{
let i = 2;
setTimeout(
function(){console.log(i);},
1000
)
}
/** И так 10 раз ....
После 1000 миллисекунд запуститься наша тайемр-функция, и
поскольку в каждом блоке благодаря оператору let создавалась свая
переменная то в таймер-функиции будет та переменная которая была
создана в том же блоке.**/
Но с оператором var все обстоит иначе.
{
var i = 0;
setTimeout(
function(){console.log(i);},
1000
)
}
{
var i = 1;
setTimeout(
function(){console.log(i);},
1000
)
}
{
var i = 2;
setTimeout(
function(){console.log(i);},
1000
)
}
/** И так 10 раз ...
Поскольку во всех блоках будет одна и та же
переменная то после того как через 1000 миллисекунд запущенная
таймер-функция прочитает последнее значение переменной i - которое
у нас будет 10.**/
Как то вот так у нас обстоят дела с javascript.
Больше о блочной области видимости можешь прочитать здесь и здесь.