Коротко — потому что стрелочная функция замыкает не текущее значение переменной $i$, а саму переменную (её привязку). К моменту выполнения всех отложенных функций цикл уже завершён и $i$ равно $5$, поэтому все колбэки выводят $5$.
Пояснение по шагам
- Hoisting и область видимости. Объявление `var i` поднимается (hoisted) в функцию/глобальную область: фактически есть одна общая переменная $i$ для всего цикла, а не новая для каждой итерации. В коде
for (var i=$0$; i<$5$; i++){ setTimeout(()=>console.log(i),$0$); }
после завершения цикла значение $i$ равно $5$.
- Замыкание. Функции, переданные в `setTimeout`, замыкают ссылку на переменную $i$. Они не получают «снимок» значения во время создания — при вызове они читают текущее значение той же переменной $i$, которое стало $5$.
Варианты исправления (печатают $0\dots 4$)
1) Использовать `let` (блочная область видимости — новая привязка для каждой итерации):
for (let i=$0$; i<$5$; i++){ setTimeout(()=>console.log(i),$0$); }
2) Замыкать текущее значение через IIFE (функция сразу вызывается и получает копию):
for (var i=$0$; i<$5$; i++){
(function(x){ setTimeout(()=>console.log(x),$0$); })(i);
}
3) Передать значение в `setTimeout` через аргументы (некоторые окружения поддерживают дополнительн. аргументы):
for (var i=$0$; i<$5$; i++){
setTimeout(function(x){ console.log(x); }, $0$, i);
}
4) Использовать `.bind` чтобы зафиксировать значение:
for (var i=$0$; i<$5$; i++){
setTimeout(console.log.bind(null, i), $0$);
}
5) Создать локальную копию внутри тела цикла с `let`:
for (var i=$0$; i<$5$; i++){
let j = i;
setTimeout(()=>console.log(j), $0$);
}
Примечание: поведение одинаково для обычных и стрелочных функций — разница лишь в `this`, но не в семантике замыкания.