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

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

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

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

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