Что произойдёт при использовании var в цикле с асинхронным кодом?

Question

При использовании var в цикле все асинхронные колбэки будут ссылаться на одну и ту же переменную. К моменту выполнения асинхронного кода цикл уже завершится, и переменная будет иметь финальное значение. В результате вместо ожидаемых разных значений выводится одно и то же. Это происходит из-за функциональной, а не блочной области видимости var.

YeaHub · Accepted Answer

Проблема возникает из-за сочетания замыкания и области видимости var.ОпределениеОпределение: Замыкание (closure) — это ситуация, когда функция “запоминает” переменные из внешней области видимости и продолжает иметь к ним доступ позже.Что делает var в циклеvar имеет функциональную, а не блочную область видимостив цикле создаётся одна переменная, а не новая на каждую итерациюПример проблемыfor (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}
Что произойдёт:Цикл выполнится полностью.i станет равным 3.Асинхронные колбэки выполнятся позже.Все они выведут 3.Почему это неожиданноРазработчик интуитивно ожидает:0
1
2
но получает:3
3
3
Где это чаще всего встречаетсяsetTimeout / setIntervalобработчики событий в циклахпромисы, создаваемые внутри циклаВывод: при использовании var в асинхронных циклах все колбэки разделяют одну переменную, поэтому получают одно и то же итоговое значение.