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