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