Iteración sobre arrays en JavaScript: 5 errores fatales y cómo evitarlos

Cómo recorrer un array en JavaScript: Errores principales y cómo evitarlos

¿Alguna vez has escrito código que simplemente debía recorrer una lista de tareas o productos en el carrito, y en su lugar devolvía undefined, un bucle infinito o, peor aún, dañaba silenciosamente los datos? Un dolor familiar. La pregunta "How to loop through the items of an array in JavaScript?" es una de las más populares en Stack Overflow. ¿Parece que podría ser más simple? Pero el diablo, como siempre, está en los detalles.

Hoy no solo analizaremos cómo recorrer un array en JavaScript. Miraremos bajo el capó de los errores más comunes que cometen los principiantes (y no solo ellos). Aprenderás por qué for...in puede traicionarte, en qué se diferencia forEach de map, y cómo evitar un bucle infinito en for.

¿Listo? ¡Vamos a arreglar bugs y escribir código limpio!

Error n.º 1: Usar for...in para arrays

Este es, quizás, el error de novato más engañoso. El desarrollador ve la palabra for y la palabra in y piensa: "Oh, esto es para recorrer cualquier cosa". Técnicamente es cierto. Pero para los arrays, esto es un desastre.

El bucle for...in está diseñado para recorrer las propiedades de un objeto, no los elementos de un array. Sí, un array en JS también es un objeto, pero sus índices son solo claves de cadena ("0", "1", "2").

Aquí está el truco:

\n
• El orden no está garantizado. Aunque normalmente los navegadores respetan el orden, no se puede confiar en ello.
\n
• Recorre toda la herencia prototípica. Si tú o alguna biblioteca agregaron un método a Array.prototype (por ejemplo, Array.prototype.myCustomMethod = function() {}), for...in lo incluirá también.
\n

Ejemplo de código (cómo NO hacerlo):

const arr = [10, 20, 30];\nArray.prototype.customMethod = () => {};\n\nfor (let index in arr) {\n  console.log(arr[index]); // Muestra: 10, 20, 30, ƒ () => {}\n}\n

¿Ves? Al final aparece nuestra función personalizada. El código se rompió.

Cómo hacerlo correctamente:

Usa for...of (para valores) o el clásico for (para índices). for...of recorre solo los valores e ignora el prototipo.

// Correcto y seguro\nfor (let value of arr) {\n  console.log(value); // 10, 20, 30\n}\n

Error n.º 2: Olvidar el callback en forEach

arr.forEach(callback) es una forma elegante de recorrer un array en JavaScript. Pero muchos lo confunden con map o filter. El error principal es pensar que forEach devuelve algo. Devuelve undefined.

El segundo error común es olvidar el segundo y tercer argumento del callback (índice y el propio array). A veces esto es crítico.

Ejemplo de error:

const numbers = [1, 2, 3];\nconst doubled = numbers.forEach(num => num * 2);\nconsole.log(doubled); // undefined! Error.\n

Cómo hacerlo correctamente:

Si necesitas crear un nuevo array basado en el original, usa map(). Si solo necesitas realizar una acción (por ejemplo, imprimir en consola o enviar datos), usa forEach().

// Para crear un nuevo array\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\n// Para efectos secundarios\nnumbers.forEach((num, index) => {\n  console.log(`Elemento ${index}: ${num}`);\n});\n

Error n.º 3: Bucle infinito en for

Un clásico. Escribes for (let i = 0; i < arr.length; i++), pero olvidas el incremento i++ o, peor aún, modificas el array dentro del bucle.

Supongamos que filtras el array sobre la marcha, eliminando elementos con splice(). Si no corriges