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