Ámbito local

¡Encontramos el error! El índice del último elemento de photos es 4, pero i vale 5 sin importar en qué miniatura hagamos clic. No hay ningún elemento con ese índice en el arreglo. Por eso obtenemos undefined en lugar de una ruta y no aparece ninguna imagen. ¿Por qué ocurre?

Dejemos un momento la galería para conocer una idea importante de JavaScript. Nos ayudará a resolver el problema.

Escribiremos la función eatDinner, que muestra mensajes sobre nuestro almuerzo en la consola. Tiene un parámetro drink y una variable food.

var eatDinner = function (drink) {
  var food = 'pasta';
  console.log('Comí ' + food);
  console.log('Bebí ' + drink);
};

eatDinner('agua de frutas');
// Muestra: Comí pasta
// Muestra: Bebí agua de frutas

console.log('Comí ' + food);
// Produce un error

console.log('Bebí ' + drink);
// Produce un error

Si intentamos acceder a food desde fuera de la función, obtendremos un error. Las variables declaradas en el cuerpo de una función están disponibles dentro de ella; no podemos acceder a ellas desde fuera.

Lo mismo ocurre con los parámetros. Aunque el argumento se pasa desde fuera, el parámetro se comporta como una variable interna de la función.

¿Por qué?

Cada función tiene un ámbito, que determina a qué variables puede acceder su código. Como food está declarada dentro de eatDinner, pertenece al ámbito de esa función, igual que drink. Son variables locales. Su ámbito se limita a la función donde se declaran y se llama ámbito local.

Comprobémoslo: llamaremos a la función y después intentaremos acceder desde fuera a su variable y a su parámetro.