После знакомства с областями видимости и замыканиями, вернёмся к нашей задаче. Что же случилось у нас в коде? Почему программа не работает как надо?

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () {
    fullPhoto.src = photos[i];
  });
}

Обработчики, которые мы создали, используют значение счётчика i. Сложность в том, что обработчики срабатывают не сразу, а в момент наступления события. К тому моменту, когда первое событие клика выполняется, цикл полностью отработал, значение счётчика стало максимальным — 5, и функция-обработчик берёт именно это значение. Цикл не создаёт отдельную область видимости, это ведь не функция. Поэтому значение i находится в глобальной области и каждый обработчик обращается к этому значению 5. А у нас нет миниатюры с таким индексом и элемента в массиве photos, поэтому никакая картинка и не подставляется.

Как нам это исправить? Нам помогут замыкания!

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

У каждого обработчика будет собственное замыкание, поэтому значения в обработчиках не будут повторяться, как это было раньше.

Давайте постепенно улучшим нашу программу так, чтобы она работала корректно.