Почему с let работает а с var нет?

Question

[Muranx]

Привет всем !

for(var k=0; k<3; k++){
   setTimeout(function(){
        console.log(k); // 3 , 3 , 3
      }, 500);
};

for(let k=0; k<3; k++){
    setTimeout(function(){
        console.log(k); // 0 , 1 , 2
    }, 500);
};

Скорее всего тема уже избитая , но я до сих пор не разобрался пока не столкнулся с этой проблемой при написании скрипта ! Просьба объяснить ( желательно прям по итерациям ) что тут происходит, и почему во втором случае выводится то, что мы ожидаем , а в первом просто 3 , 3 , 3 ?

Comments

[Иван Клименко]

Пробуйте сначала хоть чуть-чуть искать Почему поведение let, var в цикле одинаково?

[Muranx]

Иван Клименко, на каждого ссылочника найдётся тот кто ответит нормально ! ;D Проверенно временем!

[Иван Клименко]

Muranx, я надеюсь, что на улице вы всё же пользуетесь мобильными картами, а не мучаете прохожих

[Muranx]

Иван Клименко, ух ух ух, какой мастерский подкол ( уровень - програмист )! ;D Нее, на самом деле, ты просто не понял, я читал эти статьи и с ljs и с других ресурсов, но я не понимаю всё равно как работает цикл с let, т.к. ещё с var я понимаю, что в конце выполнения цикла k === 3 ну а так-как колбэки выполняются после того как выполнится цикл, все три колбэка через замыкания получат значение 3. . . НО вот с лэт я не понимаю досих пор ! Как получается что принцип выполнения скрипта не меняется, т.е. все три колбэка так-же срабатывают после того, как for ( ) { } закончил свою работу, но уже получают нужные значения, смею предположить что в данном случае я не понимаю механику замыкания (как в данном случае с let сохраняется его значени) ! А тут ещё ты со своей ссылкой на то, что я уже читал ! ;D Да и подколы у тебя так-себе , я бы чонить посмешнее придумал !

[Иван Клименко]

Muranx, грустно, что вы не понимаете простым языком написанные вещи. Думаете, если я здесь вам повторю, то появится понимание? Ну, что ж, давайте попробуем.

При объявлении переменной через ключевое слово var она появляется в глобальной области видимости. Также при использовании ключевого слова var возможно повторное объявление.

Объявление переменной с помощью ключевого слова let создаёт переменную только внутри того блока, в котором происходит это объявление. Повторное объявление запрещено.

Цикл for на каждой итерации создаёт новую переменную и присваивает ей новое значение (рассчитанное из предыдущего).

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

А в случае использования ключевого слова let каждый раз возникает новая переменная, поэтому у каждой функции, созданной в цикле, в замыкании будет своя переменная со своим значением.

Итак, вы прочитали то, что ещё точно не читали. Стало понятнее?

[WapSter]

Muranx, видимо плохо читаешь. Не думал заново пройти начальную школу? Там вроде сейчас у всех дистанционное обучение началось и неразбериха, отличный шанс подтянуть основы

Answer 1

[Дмитрий Беляев]

У var область видимости функции, на каждой итерации цикла мы имеем дело с одной и той же переменной.
У let - область видимости блока, на каждой итерации цикла новая переменная

Comments

[Muranx]

Дмитрий Беляев, Благодарю за ответ ! Вот такой вот ещё вопрос для разъяснения : Получается из того, что я вижу с этой var,после последней итерации цикла , срабатывают колбэки, а т.к. k = 3 (на момент исполнения этих трёх колбэков) по окончанию итераций он выводит через замыкание именно тройки на все три setTimeout( )??? Или я не правильно это понимаю? И ещё если не сложно, я где-то давным давно видел такой-же пример решённый в до ЕС5 стиле (без использования let), если не сложно можете показать эту фишку, может быть мне станет понятнее?

[Дмитрий Беляев]

Muranx, ну во первых, let появился не в не ЕС5 (что вообще тут C?), а ES6 (ECMA Script 6th edition).
setTimeout работает асинхронно, и независимо, let там или var, он выполнит свою функцию после цикла. Но так как в JS работают замыкания, эта функция "видит" переменную из окружения. Разница в том, какие это переменные. При var переменная одна, и все 3 функции (да, если мы пишем функциональное выражение внутри цикла, то на каждой итерации еще и по новой функции создается, что, кстати говоря, весьма дорого как по памяти, так и по производительности), при let объявленном внутри цикла переменная будет новая на каждую итерацию, и каждая функция будет держать в замыкании свою переменную.
Чисто es5 вариантов предлагают много, вот некоторые из них:
2 варианта, с оборачиванием в IIFE:

for(var k = 0; k < 3; k++) {
  (function(k) {
    setTimeout(function() {
      console.log(k); // 1, 2, 3
    }, 500);
  })(k);
}
for(var k = 0; k < 3; k++) {
  setTimeout(function(k) {
    return function() {
      console.log(k); // 1, 2, 3
    }
  }(k), 500);
}

Правда тут уже будет создано 6 функций в памяти на 3 итерации, хотя и IIFE быстро подберется сборкой мусора
Вариант с bind:

for(var k = 0; k < 3; k++) {
  setTimeout(function(k){
    console.log(k); // 1, 2, 3
  }.bind(void 0, k), 500);
}

На деле функций в памяти так же будет 6, да еще и работает медленнее предыдущих, ибо много всяких if под капотом
Как по мне, самый правильный вариант - это вспомнить, что setTimeout умеет передавать аргументы в вызываемую функцию, а заодно и вынести функцию за цикл, ибо на деле нам достаточно 1 функции:

function onTimeout(k) {
  console.log(k); // 1, 2, 3
}
for(var k = 0; k < 3; k++) {
  setTimeout(onTimeout, 500, k);
}

[Muranx]

Дмитрий Беляев, Жезть, пойду перечитывать "You don't know JS : Scopes and Closures". . . Спасибо за ответ! И блин, всегда умиляет на сколько вы буквальные люди программисты, наверное с вами вообще неочем общаться нормальному человеку, который понимает абстракции, хотя "EC" Оо, это даже не абстракция, просто написано на русском . . . Без обид, я просто в шоке, неужели вы все такие, чрезмерно, абсолютно, критично, бескомпромисно дотошные ! ;D

[Дмитрий Беляев]

Без обид, я просто в шоке, неужели вы все такие, чрезмерно, абсолютно, критично, бескомпромисно дотошные

@Muranx, без этого не стать программистом (сарказм). Ну если серьезно, машины не понимают разночтений, если Вы им пишите что-то не так, то они бескомпромиссно и абсолютно шлют Вас на хер и отказываются работать. А программисты все таки большую часть времени общаются с машинами и их задача, чтоб они работали, притом работали решая конкретную задачу, не какую то там, а опять таки чрезмерно, абсолютно, критично, бескомпромиссно дотошно конкретно эту.

Answer 2

[drawnofmymind]

Переменная var – одна на все итерации цикла и видна даже после цикла

С переменной let – всё по-другому.
Каждому повторению цикла соответствует своя независимая переменная let. Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации.

Answer 3

[umbarutiba]

В первом случае: когда придет время поставь в очередь функцию выводящую в консоль то что будет в переменной к,
Во втором: тоже самое, но для каждой итерации будет создана своя переменная к

Answer 4

[Shmulhe]

Muranx, с var выводит 3,3,3 потому что переменная данном случае глобальная, а SetTimeout() улетает в стек вызовов.

Для проверки можешь вынести let за пределы блока и убедиться что в таком случае отработает как и с var все. То есть так:

let k = 0;
for(; k < 3; k++) {
    setTimeout(function() {
        console.log(k);
    }, 500);
};