С использованием let:
1. Цикл for запускает 10 таймаутов.
2. Каждый setTimeout "запоминает" свое значение i, потому что let создает новую переменную на каждой итерации.
3. После завершения цикла таймауты начинают выполняться, выводя значения от 0 до 9.
for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}
С использованием var:
1. Цикл for также запускает 10 таймаутов.
2. Все setTimeout ссылаются на одну и ту же переменную i, так как var создает одну область видимости для всего цикла.
3. К моменту начала выполнения таймаутов, значение i стало 10 (цикл уже завершил свою работу). Поэтому все таймауты выводят 10.
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}
С let каждый таймаут "запоминает" свое уникальное значение i, в то время как с var все таймауты ссылаются на одну и ту же переменную, значение которой становится 10 к моменту выполнения таймаутов.
Необходимо помнить, что setTimeout является асинхронной функцией. При её вызове задача ставится в очередь задач, которая будет обработана event loop. Это означает, что все итерации цикла завершатся раньше, чем начнёт выполняться любой из setTimeout. Сначала выполнится весь синхронный код, и только после этого event loop начнёт выполнять задачи из очереди, включая наши setTimeout.
#JavaScript #обучающийПост #loop #var #let