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

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

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

Если мы будем использовать `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` - лексическая видимость сужается ровно до места, где происходит запись обработчика события, и потому такой проблемы уже не будет.

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)
}

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)
}
======== Конец общей области видимости

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

() => console.log(i)

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

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

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

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