Как добиться корректного вывода значений в асинхронном цикле?

Решение всегда сводится к одному: создать отдельную область видимости для каждой итерации.

1) Использование let (рекомендуемый способ)

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}

Почему работает:

• let имеет блочную область видимости

• на каждой итерации создаётся новая переменная i

2) Использование IIFE (устаревающий, но показательный подход)

for (var i = 0; i < 3; i++) {
  (function (value) {
    setTimeout(() => {
      console.log(value);
    }, 100);
  })(i);
}

Здесь:

• значение i копируется в параметр value

• каждый колбэк замыкается на своё значение

3) Передача значения в асинхронную функцию

function logLater(value) {
  setTimeout(() => console.log(value), 100);
}

for (var i = 0; i < 3; i++) {
  logLater(i);
}

Практическая рекомендация

• Используй let по умолчанию

• var оставляй только для legacy-кода

• понимание IIFE важно для чтения старых проектов

Вывод: корректный вывод в асинхронном цикле достигается созданием отдельной области видимости для каждой итерации, чаще всего с помощью let.