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