Почему var отрабатывает после того, как отработал цикл for?

Question

[Artem641]

Доброго времени суток.
Есть такой классический пример из собеседований:

const fib = [1, 2, 3, 5, 8, 13]

for (var i = 0; i < fib.length; i++) {
  setTimeout(() => {
    console.log(i, '---', fib[i])
  }, 1)
}

Результат в консоли

6 --- undefined
6 --- undefined
6 --- undefined
6 --- undefined
6 --- undefined
6 --- undefined

Проблему можно решить заменив var на let или используя замыкания.
Я не понимаю, почему с var цикл отрабатывает и только потом начинает работать колбэк( я знаю про задержку setTimeout) пытаясь взять значение c несуществующим индексом 6. При этом объявление через let работает как надо. Читал что это как то связано областью видимости(скоуп), но ясности это не добавило.
В общем буду благодарен если кто объяснит это простыми словами.

Comments

[Сергей delphinpro]

Я не понимаю, почему с var цикл отрабатывает и только потом начинает работать колбэк( я знаю про задержку setTimeout) пытаясь взять значение c несуществующим индексом 6

по шагам

setTimeout() // i = 0
i++        // i = 1
setTimeout() // i = 1
i++        // i = 2
setTimeout() // i = 2
i++        // i = 3
setTimeout() // i = 3
i++        // i = 4
setTimeout() // i = 4
i++        // i = 5
setTimeout() // i = 5
i++        // i = 6
callback   // i = 6
callback   // i = 6
callback   // i = 6
callback   // i = 6
callback   // i = 6
callback   // i = 6

[szQocks]

Что бы понять как это работает, нужно знать:

1 - переменные
2 - лексическое окружение
3 - event loop

Даже если тебе объяснят - ты не поймёшь, или сделаешь вид что понял.

Answer 1

[Антон Горецкий]

Миллион объяснений по всему инету. Добавлю еще одно.
1 Сначала пролетает весь цикл. Внутрь setTimeout исполнение не заходит - откладывается на "потом"
2 Наступает "потом" - исполнение входит в первый setTimeout и вот тут проявляется разница:
если была использована var-переменная - то она не ограничена скобками цикла for, поэтому в каждой итерации цикла она менялась в глобальной области видимости и в итоге равна 6. Т.е. все setTimeout будут искать свою переменную сначала в своей области видимости (между скобок), не найдут её там, а затем увидят ее в глобальной области, а там она одна и равна 6
а если была использована let-переменная - то она объявляется локально и остается в каждой итерации цикла своя - т.е. внутри скобок. И когда setTimeout ищет переменную - то каждый находит своё значение локально

Comments

[Artem641]

т.е. каждый из 6 колбэков как бы замыкает в себе значение переменно i?

Answer 2

[GavriKos]

Читайте дальше именно про область видимости и замыкания - это оно и есть. Грубо говоря - var глобален.