Как инициализируются переменные let и var в цикле for?

Question

[Torento20345]

У нас есть цикл for.
Каким образом там переменные создаются и инициализируются?
Почему получается так, что var создается как бы вне цикла и получает только конечный результат для всех console.log(i)
А let у нас присваивает каждому отдельно?

Comments

[Егор Живагин]

А вы читали про области видимости этих объявлений переменных?

[Torento20345]

Егор Живагин, var обрабатывается в начале заданной функции
По умолчанию он undefined в таком случае
Но почему в цикле в итоге он получает конечный результат var для всех итераций, а let для каждой отдельно?
Т.е. как именно проходит процесс создание - изменение - присвоение в цикле

[Сергей Соколов]

Torento20345, приведите код, и комментариями отметьте строки, где ожидания расходятся с суровой действительностью. Иначе как-то беспредметно «ну все же понимают о чём речь» (нет)

Answer 1

[Сергей Соколов]

С let на каждой итерации создаётся окружение.

См. ECMASCript CreatePerIterationEnvironment( perIterationBindings )

Можно так переписать:

for(var i = 0; i < 3; i++) {
  let j = i; // доступна только на этой итерации в этом блоке
  setTimeout(() => console.log(j), 0);
}
/*
0
1
2
*/

Comments

[Torento20345]

Я правильно понял?

var i == undefined
for(var i = 0; i < 3; i++) {
  setTimeout(() => console.log(j), 0);
  // var i навсегда останется в памяти
}
i == 3
console.log(i == 3)

for(let i = 0; i < 3; i++) {
  i = 0; // 1 строка
  setTimeout(() => console.log(j), 0); // 2 строка
  // 1 и 2 строка относятся к одному блоку и let = 0 будет жить, пока таймаут не отработает, а уже после блок удалится?
}
i == error
console.log(i == error)

[Сергей Соколов]

Torento20345, про «подъём наверх» декларации var вы разобрались?

// начало файла
// какой-то код
for (var i = 0; ...

// ------------------ то же, что:

// начало файла
var i;
// какой-то код
for(i = 0; ...

Декларация let блочная. У for «блок» это тело цикла между фигурными скобками.

Вы всё поняли примерно правильно. Во втором примере, с let, создаваемая стрелочная функция тащит с собой «окружение», в котором присутствует копия значения i

Answer 2

[Lynn «Кофеман»]

https://learn.javascript.ru/var

Comments

[Torento20345]

Я не нашёл там ответ, почему сперва var станет 3 допустим в цикле, а уже потом будет происходить вывод console.log(i), где она уже 3, а не по очереди будет вывод.
Как будто первое действие цикла это понять сколько раз он выполнится, а уже потом выполняться имея уже у i конечное значение 3.

[Lynn «Кофеман»]

Torento20345, вы видимо говорите про классический пример с setTimeout?

[Torento20345]

Lynn «Кофеман», я про классический
for(var i = 0; i < 3; i++) { console.log(i)}
Почему мы сразу получим i == 3, а уже потом будем выполнять тело цикла?
И так же, почему с let мы все же выполняем тело цикла в текущее время, а не как с var уже с результатом конечным счёта?
Понятно, что var объявлено выше цикла даже, но почему именно сразу получим 3, а уже потом будет выводить консоль?

[Сергей Соколов]

Torento20345, это где «сразу получим i == 3» ?

for(var i = 0; i < 3; i++) { console.log(i)}
0
1
2

[Torento20345]

Сергей Соколов, извиняюсь, чутка перепутал
https://jsfiddle.net/k5Lq1xdf/2/
Если я правильно понял, у нас при let создастся 3 переменных, а при var одна?