9

Разница в объявлении счетчика цикла через let и var в том что через var переменная-счетчик видна за пределами цикла в функции, через let - только в пределах цикла. Объясните пожалуйста почему в этих случаях разные выводы

for(var i = 0; i < 10; i++) setTimeout(() => console.log(i), 1000)

тут получаем десять десяток.

for(let i = 0; i < 10; i++) setTimeout(() => console.log(i), 1000)

а тут от нуля до десяти.

С первым примером все понятно, а почему во втором так? i ведь создается один раз и прокручивается до начала выполнения первого setInterval до десятки. Одним словом - почему в эти двух примерах разные результаты?

2 ответа 2

10

https://learn.javascript.ru/let-const

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

1
  • недогуглил, спасибо )
    – torokhkun
    9 сен 2017 в 8:37
6

Все дело в области видимости переменной. Оператор let объявляет переменную которая приурочена к блочной области видимости. Что такое блочная область видимости? Вот пример

let a = 10;

{
   let a = 20;
   console.log(a); // 20
}

console.log(a); // 10

Как видно внутри блока и вне его ES6 создает совершенно разные переменные. Переменная созданная оператором let видна только в своей области видимости и вне ее области видимости к ней обратиться не возможно.

Вот что произойдет если то же самое попробовать с оператором var.

var a = 10;

{
   var a = 20;
   console.log(a); // 20
}

console.log(a); // 20

Как видишь оператор var не полностью соответствует правилам блочной видимости.

Можно твой пример можно упростить для большей ясности

for(let i = 0; i < 10; i++) setTimeout(() => console.log(i), 1000)

1) Можно представить следующим образом

for(let i = 0; i < 10; i++){
    setTimeout(
       function(){console.log(i);}, 
          1000
    )
}

2) И разбить по строкам

{
    let i = 0;
    setTimeout(
        function(){console.log(i);},
        1000
    )
}

{
    let i = 1;
    setTimeout(
        function(){console.log(i);},
        1000
    )
}

{
    let i = 2;
    setTimeout(
        function(){console.log(i);},
        1000
    )
}
/** И так 10 раз .... 
    После 1000 миллисекунд запуститься наша тайемр-функция, и 
    поскольку в каждом блоке благодаря оператору let создавалась свая 
    переменная то в таймер-функиции будет та переменная которая была 
    создана в том же блоке.**/

Но с оператором var все обстоит иначе.

{
    var i = 0;
    setTimeout(
        function(){console.log(i);},
        1000
    )
}

{
    var i = 1;
    setTimeout(
        function(){console.log(i);},
        1000
    )
}

{
    var i = 2;
    setTimeout(
        function(){console.log(i);},
        1000
    )
}
/** И так 10 раз ...
    Поскольку во всех блоках будет одна и та же 
    переменная то после того как через 1000 миллисекунд запущенная 
    таймер-функция прочитает последнее значение переменной i - которое 
    у нас будет 10.**/

Как то вот так у нас обстоят дела с javascript. Больше о блочной области видимости можешь прочитать здесь и здесь.

2
  • 1
    последнее значение переменной i - которое у нас будет 9 - если бы оно было 9 - то цикл не закончился бы
    – Grundy
    15 сен 2017 в 11:22
  • @Daniel как по вашей логике разложить тот же цикл for (var i=1; i<=5; i++) { (function(){ var j = i; setTimeout( function timer(){ console.log( j ); }, j*1000 ); })(); } Не могу понять как в j попадает разное значение i (пример из книги)
    – ur pride
    16 апр 2019 в 13:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.