Ошибка обнаружена! Индекс последнего элемента в массиве photos — 4, а значение i в нашем коде 5, по какой миниатюре мы бы ни кликнули. В массиве photos у нас нет элемента с таким индексом, поэтому мы и получаем undefined вместо адреса изображения и никакой картинки не появляется. Но почему такое вообще происходит?

Давайте немного отойдём в сторону от нашей задачи и разберёмся с одной важной концепцией JavaScript. Это поможет решить нашу проблему с галереей.

Напишем функцию eatDinner. Она выводит в консоль сообщения о нашем обеде. У неё есть параметр drink и переменная food

var eatDinner = function (drink) {
  var food = 'макароны';
  console.log('Поел ' + food);
  console.log('Выпил ' + drink);
};

eatDinner('компот');
// Выведет: Поел макароны
// Выведет: Выпил компот

console.log('Поел ' + food);
// Выведет ошибку

console.log('Выпил ' + drink);
// Выведет ошибку

Если мы попробуем снаружи получить доступ к переменной food у нас ничего не получится — консоль выдаст ошибку. Потому что переменные из тела функции доступны только внутри этой функции. Снаружи их получить нельзя.

То же самое произойдёт, если мы захотим обратиться снаружи к параметру функции. Параметр хоть и задаётся снаружи, ведёт себя, как переменная внутри функции.

Почему так?

Потому что у каждой функции есть область видимости — все значения, доступные для этой функции. Область видимости ограничивается самой функцией. Так как переменная food объявлена внутри функции eatDinner, она доступна только внутри области видимости этой функции, как и параметр drink. Такие переменные называются локальными переменными функции. Их область видимости ограничена функцией, в которой они объявлены, и за её пределами эти переменные получить нельзя, поэтому такая область видимости тоже называется локальной.

Давайте в этом убедимся. Вызовем функцию, а затем снаружи попробуем получить доступ к параметру и переменной из тела функции eatDinner.