Вывод будет:
$5$ $5$ $5$ $5$ $5$.
Почему:
- Переменная `i` объявлена через `var`, она имеет функцию/глобальную область видимости, одна общая переменная для всех итераций.
- Цикл выполняется синхронно; все `setTimeout` только планируют колбэки, а сами колбэки запускаются позже (после ~100 мс), когда цикл уже завершён и значение `i` стало $5$.
- Замыкания внутри стрелочных функций берут ссылку на ту же самую переменную `i`, поэтому каждый колбэк читает текущее (конечное) значение $5$.
Как исправить (печать $0$–$4$) — несколько вариантов:
1) Использовать `let` (блочная область видимости, для каждой итерации своё `i`):
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100);
}
Вывод: $0,1,2,3,4$.
2) Замыкание через IIFE (сохраняем текущее значение в аргумент):
for (var i = 0; i < 5; i++) {
(function(j) {
setTimeout(() => console.log(j), 100);
})(i);
}
Вывод: $0,1,2,3,4$.
3) Передать значение как аргумент в `setTimeout` (поддерживается в браузерах/Node):
for (var i = 0; i < 5; i++) {
setTimeout((j) => console.log(j), 100, i);
}
Вывод: $0,1,2,3,4$.
4) Использовать `Function.prototype.bind`:
for (var i = 0; i < 5; i++) {
setTimeout(console.log.bind(null, i), 100);
}
Вывод: $0,1,2,3,4$.
Любой из этих способов решает проблему захвата переменной и даст последовательный вывод $0$–$4$.