Проблема: переменная `i` объявлена как `var`, то есть функция-область. Все колбэки в `setTimeout` захватывают одну и ту же переменную `i`, и к моменту выполнения таймаутов цикл уже завершён и `i = $5$`. Поэтому выводится не `$0$`…`$4$`, а пять раз значение `$5$`.
Почему так происходит (кратко): замыкание + лексическая область видимости `var` — замыкание сохраняет ссылку на переменную, а не её текущую величину.
Как исправить.
ES5 (без `let`):
- IIFE (создать новую локальную переменную для каждой итерации):
`for (var i = 0; i < $5$; i++) { (function(j){ setTimeout(function(){ console.log(j); }, $100$); })(i); }`
- Фабрика функций:
`function makeLogger(j){ return function(){ console.log(j); }; }`
`for (var i = 0; i < $5$; i++) { setTimeout(makeLogger(i), $100$); }`
- Или привязать аргумент через `bind`:
`for (var i = 0; i < $5$; i++) { setTimeout(console.log.bind(null, i), $100$); }`
ES6+ (проще):
- Использовать `let` в заголовке цикла — для `let` создаётся новая привязка переменной на каждой итерации:
`for (let i = 0; i < $5$; i++) { setTimeout(()=>console.log(i), $100$); }`
Задействованные концепции языка:
- Замыкания (closures): колбэк захватывает переменную из внешней области.
- Область видимости: `var` — функциональная/скопированная, `let/const` — блочная и имеют per-iteration binding в `for`.
- Hoisting/TDZ (коротко): `var` поднимается и существует до выполнения, `let`/`const` имеют временную мёртвую зону до объявления, что влияет на поведение и безопасность.