"Чиним галлерею": не могу разобраться с областями видимости

Курсы
1

Не могу понять, почему вот этот код не срабатывает:

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

А этот работает:

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

В теории написано про области видимости, но я не могу понять, почему в первом случае цикл не может прописать всем слушателям событий нужное действие. Цикл находится снаружи функции в обработчике событий, вроде бы он без проблем должен брать значение i оттуда. В чем дело? Почему если вывести через console.log внутри слушателя событий i, то оно будет УЖЕ равно 5? А почему тогда нет никакого эффекта от предыдущих 4 итераций?

Может кто-нибудь доходчиво объяснить?)

P.S.: В добавок не могу теперь понять, почему не работает этот код:

var food = 'салат';
var collectContainer = function (food) {
  return 'Поел ' + food;
 };
collectContainer();

= > Выдает “поел undefined”. Но как так, мы же объявили переменную в самом начале, неужели ее нельзя передать в параметр?