SetTimeout() почему при var выходит другое число

Question

при let выводит от 0 до 9

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

a при var 10 раз 10

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

Answer 1

Область видимости переменных let — блок или тело цикла.
Область видимости переменных var — тело функции.

В этом вся разница. let безопасны между итерациями, на каждой итерации своя локальная переменная. Её можно смело использовать в замыканиях и т.п.

var небезопасны в этом плане. Так как setTimeout асинхронный, в callback-функции будет использовано значение переменной после окончания синхронного цикла.

---

По сути, let в цикле ведёт себя как:

for (var i = 0; i < 10; i++) {
  let num = i; // область видимости let в инициализации цикла ограничена блоком тела цикла
  setTimeout(function() {
      console.log(num);
  })
};

В то время, как var так:

let num; // var в инициализации цикла существует вне цикла
for (let i = 0; i < 10; i++, num = i) {
  setTimeout(function() {
      console.log(num);
  })
};

---

Стоит отметить, что в случае цикла, переменные локальны именно к телу цикла, к выражению в:

for (init; cond; increment) statement

А выражение(statement) может быть и без фигурных скобок, так что дело не в них:

for (let i = 0; i < 10; i++) setTimeout(() => console.log(i));