Teoría: Verificación de la existencia de valor

Al trabajar con arrays en JavaScript, es muy común encontrarse con un problema llamado desbordamiento de array. En palabras simples, esto sucede cuando intentamos acceder a una posición (índice) del array que no existe.

Acceder a un índice inexistent

⏬ Miremos con un ejemplo:

const animals = ['cats', 'dogs', 'birds'];
// No existe un elemento en la posición 5
console.log(animals[5]); // undefined

En JavaScript, cuando intentamos acceder a un índice fuera de los límites del array, el resultado es undefined.

JavaScript maneja este caso con más flexibilidad. No produce errores críticos, simplemente devuelve undefined. Esto parece inofensivo, pero no siempre es algo bueno...

⏬ Veamos más ejemplos:

const animals = ['cats', 'dogs', 'birds'];

// Estos índices no existen, entonces obtenemos undefined
console.log(animals[5]); // undefined
console.log(animals[4]); // undefined
console.log(animals[3]); // undefined

// Pero este índice SÍ existe
console.log(animals[2]); // 'birds'

Cuando queremos acceder a animals[5], el array no tiene un elemento en esa posición, así que devuelve undefined. Esto no genera un error, pero puede causar problemas si no lo manejamos bien.

¿Por qué el desbordamiento de arrays puede ser un problema?

En la mayoría de los casos, el desbordamiento sucede por error. Si intentas acceder a un índice que no existe en el array, probablemente hay un problema en la lógica de tu código.

¿Cómo evitar el desbordamiento?

✅ La solución más simple es asegurarnos de que el índice está dentro de los límites del array. Es decir, que esté entre 0 y array.length - 1.

const items = ['apple', 'banana', 'cherry'];
const index = 2; // Podemos cambiar este valor para probar

// Verificamos si el índice es válido antes de acceder al array
if (index < items.length) {
  console.log(items[index]); // ¡Todo bien! Accedemos a un valor existente
} else {
  console.log('Índice fuera de los límites del array');
}

Atención: En la condición, usamos < en lugar de <= porque los arrays en JavaScript tienen un índice desde 0 hasta length - 1.

Por ejemplo, si items.length es 3, entonces los índices válidos son 0, 1 y 2, pero NO 3.

Incluso los programadores más experimentados pueden cometer este tipo de errores, así que no te preocupes si te pasa. Con práctica, identificarás y solucionarás estos problemas con facilidad.