Выведется три раза значение $3$.
Короткое объяснение по шагам (hoisting, замыкание, асинхронность):
- Hoisting: декларация `var i` поднимается вверх области видимости (функции/глобально), поэтому одна общая переменная `i` существует до начала цикла. Начальное значение присваивается при первом проходе — $0$.
- Синхронный цикл: цикл `for (var i = $0$; i < $3$; i++)` выполняется целиком синхронно. В теле цикла три раза вызывается `setTimeout(...)`, который лишь планирует (региструет) три колбэка, но не выполняет их сразу.
- Замыкание: каждая функция-колбэк замыкает ссылку на ту же самую переменную `i` (не на её моментные значения). Они не «запоминают» текущее число, а держат ссылку на одну и ту же binding.
- Асинхронность / event loop: даже при задержке `setTimeout(..., $0$)` колбэки ставятся в очередь задач (macrotasks) и будут выполнены только после завершения текущного стека вызовов — то есть после окончания цикла. К моменту выполнения всех трёх колбэков значение `i` уже равно $3$. Поэтому каждый `console.log(i)` печатает $3$.
Как получить $0$, $1$, $2$ вместо трёх $3$:
- Использовать `let` (новая привязка на каждую итерацию):
for (let i = $0$; i < $3$; i++) { setTimeout(function(){ console.log(i); }, $0$) }
- Захватить значение в замыкании вручную (IIFE):
(function(x){ setTimeout(function(){ console.log(x); }, $0$); })(i)
- Передать аргумент в `setTimeout` (в браузерах/Node):
setTimeout(function(x){ console.log(x); }, $0$, i)
Итого: три колбэка ссылаются на одну переменную `i`, цикл завершился и установил `i = $3$`, поэтому все три вывода равны $3$.