Область видимости у var и let внутри цикла. Как правильно?

Question

[zwoc]

Господа, здравствуйте,

проходил сегодня собеседование, и не могу пока на него найти точный ответ, почему происходит такая проблема. Суть задачи в чем: есть три ноды, надо на них повесить клик-обработчик, который бы выводил индекс в цикле.

Вот неправильно рабочий код:

var docs = ['div1', 'div2', 'div3']

for (var i = 1; i < docs.length; i++) {
document.getElementById(docs[i]).onclick = function() {
  	alert(i)
  }
}

Этот код, как вы поняли, работает, но при клике будет выводиться неверный индекс i
Объясните, пожалуйста, почему, если мы будем вместо var использовать let для переменной индекса, происходит такой коллапс?

Answer 1

[suberg]

Когда происходит клик, то i берется из внешнего LexicalEnvironment.
К моменту клика цикл завершился, последнее значение было i=2.
В результате значение всегда равно 2.
С переменной let не так.

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

Подробнее

Comments

[Elena]

а я не понимаю почему с var цикл завершается к моменту клика? сначала же идет инциализация, потом проверка, что i < docs.length, потом выражение внутри цикла и только потом увеличивает i на 1

[zwoc]

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

Если мы будем использовать `var` вместо `let` индекс `i` будет находиться на самом верху лексической видимости (после функций, конечно же), т.е. будет происходить перезапись индекса каждый раз при новой итерации цикла. Если эту проблему надо было решить ранее, нужно было задействовать зацикливание переменной, чтобы она никуда не уходила. Попробуйте повторить все то же, только после всех функций через console.log уточните значение индекса, и он будет равен 2.

Вот пример кода, когда надо было решать такие задачи:

var docs = ['div1', 'div2', 'div3']

for (var i = 0; i < docs.length; i++) {
	
  document.getElementById(docs[i]).onclick = (function(x) {
  return function() {
  	alert(x)
  }
  })(i)
}

Если же мы будем использоваться `let` - лексическая видимость сужается ровно до места, где происходит запись обработчика события, и потому такой проблемы уже не будет.

[Elena]

zwoc, а почему из такого выражения i выходит?
for(var i = 0; i < docs.length; i++) {
docs[i].onclick = () => console.log(i)
}

а из такого нет?
for (var i = 0; i < docs.length; i++) {
docs[i].onclick = ( (x) => () => console.log(x) )(i)
}

[zwoc]

Elena, Все достаточно просто:
При помощи знака "=" я буду выделять области видимости переменных

======== Со строчки ниже начинается область видимости для переменной "i" (общая область видимости)
for (var i = 0; i < docs.length. i++) {
  /* Вариант №1, - мы до сих пор не вышли с общей области видимости, и потому происходит перезапись переменной "i" */
  docs[i].onclick = () => console.log(i) 
  /* Вариант №2, - мы сужаем область видимости, потому что каждая функция имеет свой собственный уровень видимости, переменные из которой не доступны в общем области */
  docs[i].onclick = ((x) =>
    ======= Вот здесь уже начинается внутрення область видимости
    return function() {
      console.log(x)
    }
    ======= Конец внутренней области видимости
  )(i)
}
======== Конец общей области видимости

[suberg]

Elena, У var функциональная область видимости, а не блочная, поэтому оборачивая

() => console.log(i)

в функцию, вы таким образом создаёте функцию и передаёте туда значение переменной "i".
С релизом стандарта ES6 появилась возможность создавать переменные, приуроченные к отдельным блокам. Вот у let блочная область видимости, поэтому для создания лексического окружения (scope) достаточно просто обвернуть код в фигурные скобки: { ... }, поэтому в примере

for(let i = 0; i < docs.length; i++) {
  docs[i].onclick = () => console.log(i)
}

в консоль будет выводиться правильное значение переменной "i".

[Elena]

zwoc, поняла :) спасибо большое!

Answer 2

[Павел Антонов]

Объявление счетчика цикла i с применением let вместо var изолирует область видимости i. Т.е значение i ограничивается областью видимости итерации цикла

Для прочтения
Переменные: let и const
Лексическая область видимости

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

Answer 3

[Виталий]

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

Answer 4

[Jumandjilos]

Если с var, то нужно создать анонимную функцию, которая будет брать значение из замыкания, а вот let, как во многих других ЯП, при каждом проходе цикле создаёт свою переменную i, поэтому все корректно выводится