Cómo recorrer un array en JavaScript: forEach, for...of y otros métodos

Por qué "recorrer un array" es la base que debes saber de memoria

Imagina: tienes una lista de estudiantes, un carrito de compras o un conjunto de números. Necesitas hacer algo con cada elemento: mostrar un nombre, calcular la suma, filtrar solo a los adultos. En JavaScript hay varias formas de hacerlo, y la más popular es el ciclo forEach.

La pregunta "Loop (for each) over an array in JavaScript" en Stack Overflow ha acumulado miles de visitas. Esto significa que incluso desarrolladores experimentados a veces se confunden con los matices. Vamos a desglosarlo todo: desde el clásico for hasta el moderno for...of y el potente forEach. Aprenderás cuándo usar cada método y dejarás de temerle a los arrays.

Método n.º 1: El ciclo clásico for — el abuelo de todos los recorridos

La forma más antigua y comprensible. Tú mismo controlas el contador y la condición de salida. Ideal cuando necesitas interrumpir el ciclo anticipadamente o saltarte varios elementos.

const fruits = ['manzana', 'plátano', 'naranja'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Fruta n.º ${i + 1}: ${fruits[i]}`);
}

Ventajas: control total, se puede usar break y continue.
\nDesventajas: verboso, fácil equivocarse con los índices.

Cuándo usar el clásico for

\n
• Necesitas detener el recorrido anticipadamente (por ejemplo, al buscar un elemento).
\n
• Requieres acceso al índice (no solo al valor).
\n
• Trabajas con arrays multidimensionales.
\n

Método n.º 2: forEach — el rey de los recorridos en JavaScript

Este método es la respuesta a la pregunta "Loop (for each) over an array in JavaScript" en el 90% de los casos. Se llama directamente sobre el array y acepta una función de callback que se ejecuta para cada elemento.

const fruits = ['manzana', 'plátano', 'naranja'];
fruits.forEach(function(fruit, index) {
    console.log(`Fruta n.º ${index + 1}: ${fruit}`);
});

// Lo mismo con función flecha (estilo moderno):
fruits.forEach((fruit, index) => {
    console.log(`Fruta n.º ${index + 1}: ${fruit}`);
});

Importante: forEach no devuelve un nuevo array (a diferencia de map). Simplemente ejecuta una acción para cada elemento. Y sí, break y continue no funcionan aquí — si necesitas interrumpir el ciclo, usa for...of o el clásico for.

Parámetros de la función callback de forEach

\n
• Primer parámetro — el elemento actual del array (obligatorio).
\n
• Segundo parámetro — el índice del elemento (opcional).
\n
• Tercer parámetro — el propio array (rara vez necesario).
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`Elemento ${value} en la posición ${index} del array [${array}]`);
});

Método n.º 3: for...of — moderno y elegante

Apareció en ES6 (2015) y rápidamente se ganó el cariño de los desarrolladores. Funciona no solo con arrays, sino también con cualquier objeto iterable (strings, Set, Map).

const fruits = ['manzana', 'plátano', 'naranja'];
for (const fruit of fruits) {
    console.log(`Fruta: ${fruit}`);
}

Principal ventaja: se puede usar break y continue. Además, el código se ve limpio y legible.

Cómo obtener el índice en for...of

Si necesitas el índice, usa el método entries():

for (const [index, fruit] of fruits.entries()) {
    console.log(`Fruta n.º ${index + 1}: ${fruit}`);
}

Método n.º 4: map — cuando necesitas crear un nuevo array

Si no solo quieres recorrer, sino transformar cada elemento y obtener un nuevo array de la misma longitud, usa m