В чем фундаментальная разница var let в данном случае

Question

var x = document.createElement('button');

for (var i = 0; i < 3; i++) {
  x.addEventListener('click', function (e) {
    console.log(i)
  })
}
x.click()

Выведет три тройки 3/3/3 Но если подставить в цикл (let i = 0; i < 3; i++) Выевед 0/1/2

Много перегуглил, но почему мы получаем при var первый раз 3,

Что запускаетя раньше цикл или функция клика?

Answer 1

это просто, вам нужно разобраться с контекстом. а в данном случае

let - объявляет контекстную (локальную) переменную

var - глобальную

на счет почему console.log(i) вызывает 3/3/3 потому что функции передана глобальная переменная, а её вызов произойтет только когда Event Loop получит доступ (выполнение) к этому коду, а к этому моменту i уже будет = 3.

на счет почему console.log(i) вызывает 0/1/2 потому что функции передана значение локальной переменной, а её вызов произойтет только когда Event Loop получит доступ (выполнение) к этому коду, но она не меняется в контексте другого вызова.