Recorriendo arrays en JavaScript: de lo clásico a lo moderno

Andrés Hernández — Thu, 24 Apr 2025 22:04:55 +0000

En los últimos años trabajando como desarrollador Front End, he tenido la oportunidad de enfrentarme a múltiples entrevistas técnicas, y algo que me ha sorprendido es cómo una pregunta aparentemente básica, como ¿cuáles son las diferentes formas de recorrer un array en JavaScript y cuándo usar cada una? puede ponerte a pensar más de lo que crees.

En varias de esas entrevistas me encontré dudando, o dando respuestas incompletas, especialmente cuando tocaba explicar por qué elegir una sobre otra según el contexto. Fue entonces cuando decidí profundizar en este tema. No solo para responder con más claridad en una entrevista, sino para reforzar lo que muchas veces usamos por costumbre sin detenernos a pensar.

Este post es el resultado de ese repaso, con ejemplos que van desde lo más clásico hasta lo más funcional. Espero que te sea útil tanto si estás empezando como si quieres revisar conceptos que usamos día a día sin cuestionarlos demasiado.

🗂️ Formas de recorrer un array en JavaScript (resumen rápido)

Antes de entrar en detalle, estas son las formas más comunes de iterar sobre un array en JavaScript:

for clásico Control total sobre el índice. Permite break y continue.
for...of Itera directamente sobre los valores. Limpio y legible.
forEach() Ejecuta una función por cada elemento. No se puede cortar el bucle.
map() Crea un nuevo array transformando cada elemento.
filter() Crea un nuevo array solo con los elementos que cumplan una condición.
reduce() Reduce el array a un solo valor (acumulador).
for...in (⚠️ No recomendado para arrays)Itera sobre las claves (índices), pero se usa más en objetos. Puede traer bugs si el array tiene propiedades extra.

Bueno, vamos a darle caña.

Veamos las distintas formas de recorrer un array en JavaScript, desde las más clásicas hasta las más modernas, entendiendo no solo cómo usarlas, sino también cuándo conviene cada una.

🔁 1. `for` clásico

El bucle for clásico es una de las formas más potentes y versátiles de recorrer un array en JavaScript. Te da control total sobre el flujo: puedes acceder al índice, romper la ejecución con break, saltarte iteraciones con continue, y ajustar el inicio, fin o paso del bucle según tus necesidades.

👇 ¿Qué es el índice?

En JavaScript, los arrays están indexados, lo que significa que cada elemento se accede por una posición numérica que comienza en 0.

const frutas = ['manzana', 'pera', 'uva'];
console.log(frutas[0]); // 'manzana'

🔄 Sintaxis del `for`

for (let i = 0; i < array.length; i++) {
  // lógica usando array[i]
}

La variable i representa el índice actual, array.length es la cantidad total de elementos, y se incrementa i en cada vuelta del bucle.

💡 Ejemplo básico

const numeros = [10, 20, 30, 40];

for (let i = 0; i < numeros.length; i++) {
  console.log(`Índice ${i}: ${numeros[i]}`);
}

➕ Ejemplo: Sumar solo los números impares

const numeros = [1, 2, 3, 4, 5];
let suma = 0;

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] % 2 !== 0) {
    suma += numeros[i];
  }
}

console.log(`Suma de impares: ${suma}`); // 9

🛑 Uso de `break`

El break se utiliza para detener el bucle completamente cuando se cumple una condición.

const numeros = [1, 3, 5, 8, 10];

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] > 5) {
    console.log('Número mayor a 5 encontrado, salgo del bucle.');
    break;
  }
  console.log(numeros[i]);
}

↪️ Uso de `continue`

continue sirve para saltar una iteración específica y pasar directamente a la siguiente.

const numeros = [1, 2, 3, 4, 5];

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] % 2 === 0) continue;
  console.log(`Impar: ${numeros[i]}`);
}

🧼 Buenas prácticas

Usa let i = 0, no var, para mantener el alcance del índice en el bloque.
Guarda array.length en una variable si el array es grande o el bucle es crítico para performance.
Puedes usar bucles hacia atrás si necesitas eliminar elementos durante la iteración:

for (let i = array.length - 1; i >= 0; i--) {
  // lógica
}

Valida si el array está vacío antes de recorrerlo si el contexto lo requiere.

✅ Cuándo usar `for`

Cuando necesitas controlar el índice.
Cuando necesitas detener el bucle (break) o saltar iteraciones (continue).
Cuando haces operaciones complejas por elemento.
Cuando el rendimiento y control son más importantes que la legibilidad.

🧩 2. `for...of`

El bucle for...of es una forma moderna y legible de recorrer estructuras iterables en JavaScript, como arrays, strings, Set, Map, entre otros. A diferencia del for clásico, no necesitas preocuparte por el índice: te entrega directamente el valor de cada elemento.

🔄 Sintaxis básica

const frutas = ['manzana', 'pera', 'uva'];

for (const fruta of frutas) {
  console.log(fruta);
}

Este código recorre el array frutas y accede directamente a cada valor.

🧠 ¿Qué significa "iterable"?

Un iterable es una estructura que puede recorrerse elemento a elemento. Los arrays lo son por naturaleza, al igual que strings, sets y maps.

const saludo = 'Hola';

for (const letra of saludo) {
  console.log(letra); // H, o, l, a
}

🧠 ¿Y el índice?

Aunque for...of no te da el índice directamente, puedes obtenerlo usando .entries():

const frutas = ['manzana', 'pera', 'uva'];

for (const [i, fruta] of frutas.entries()) {
  console.log(`Índice ${i}: ${fruta}`);
}

💡 Ejemplo práctico

const numeros = [10, 20, 30, 40];

for (const numero of numeros) {
  if (numero > 25) {
    console.log(`Grande: ${numero}`);
  } else {
    console.log(`Pequeño: ${numero}`);
  }
}

✅ Cuándo usar `for...of`

Cuando no necesitas el índice.
Cuando priorizas la legibilidad del código.
Al trabajar con estructuras iterables como arrays, strings, sets.
Cuando quieres evitar errores comunes de desbordamiento de índice (i > array.length).

🧼 Buenas prácticas

No lo uses si necesitas modificar el array en la iteración.
Úsalo cuando quieras recorrer elementos de manera limpia y sin lógica de control compleja.
No es compatible directamente con objetos ({}),

🚫 Errores comunes

❌ Pensar que puedes acceder al índice con i (no existe en for...of).

❌ Usarlo para objetos planos (eso es para otro post 😉).

🧩 2. `for...of`

El bucle for...of es una forma moderna y legible de recorrer arrays en JavaScript. A diferencia del for clásico, este bucle no te da acceso directo al índice, pero te permite trabajar con los valores directamente, lo cual hace tu código más limpio y fácil de leer.

🔄 Sintaxis básica

const frutas = ['manzana', 'pera', 'uva'];

for (const fruta of frutas) {
  console.log(fruta);
}

📦 Salida:

manzana
pera
uva

🧠 ¿Y si necesito el índice?

Aunque for...of no da el índice por defecto, puedes obtenerlo combinando .entries():

const frutas = ['manzana', 'pera', 'uva'];

for (const [index, fruta] of frutas.entries()) {
  console.log(`Índice ${index}: ${fruta}`);
}

📦 Salida:

Índice 0: manzana
Índice 1: pera
Índice 2: uva

💡 Ejemplo práctico

const edades = [15, 22, 37, 18];

for (const edad of edades) {
  if (edad >= 18) {
    console.log(`Mayor de edad: ${edad}`);
  } else {
    console.log(`Menor de edad: ${edad}`);
  }
}

📦 Salida:

Menor de edad: 15
Mayor de edad: 22
Mayor de edad: 37
Mayor de edad: 18

✅ Cuándo usar `for...of`

Cuando no necesitas el índice.
Cuando quieres recorrer arrays de forma clara y legible.
Cuando no necesitas modificar el array mientras lo recorres.

🧼 Buenas prácticas

No lo uses si necesitas eliminar elementos durante el bucle.
No lo uses si necesitas salir del bucle de forma muy controlada (usa for clásico si hay lógica compleja).
Ideal cuando lees datos y no los alteras.

🚫 Errores comunes

❌ Asumir que for...of sirve para acceder al índice directamente.

❌ Intentar usarlo con objetos literales (eso es para otro post 😉).

❌ Usarlo cuando realmente necesitas controlar el flujo con continue o break y no quieres complicarte con .entries().

🔄 3. `forEach()`

El método forEach() es una forma funcional de recorrer un array. Ejecuta una función una vez por cada elemento del array, y es especialmente útil para realizar acciones o efectos secundarios, como imprimir valores, actualizar el DOM, o hacer llamadas a funciones sin alterar el array original.

🔄 Sintaxis básica

const frutas = ['manzana', 'pera', 'uva'];

frutas.forEach((fruta) => {
  console.log(fruta);
});

📦 Salida:

manzana
pera
uva

💡 Ejemplo con índice

const frutas = ['manzana', 'pera', 'uva'];

frutas.forEach((fruta, index) => {
  console.log(`Índice ${index}: ${fruta}`);
});

📦 Salida:

Índice 0: manzana
Índice 1: pera
Índice 2: uva

⚠️ Limitaciones de `forEach()`

No puedes usar break ni continue, ya que no es un bucle tradicional.
No retorna un nuevo array como map() o filter().
No sirve para lógica condicional compleja de control de flujo.

💡 Ejemplo con condición

const edades = [15, 22, 17, 30];

edades.forEach((edad) => {
  if (edad >= 18) {
    console.log(`Mayor de edad: ${edad}`);
  } else {
    console.log(`Menor de edad: ${edad}`);
  }
});

📦 Salida:

Menor de edad: 15
Mayor de edad: 22
Menor de edad: 17
Mayor de edad: 30

✅ Cuándo usar `forEach()`

Cuando quieres recorrer un array y ejecutar una acción por cada elemento.
Cuando no necesitas interrumpir el recorrido.
Cuando no necesitas retornar un nuevo array.

🧼 Buenas prácticas

Úsalo solo si no necesitas romper el bucle.
Ideal para efectos secundarios: logs, actualizaciones visuales, llamadas a funciones externas.
Evita usarlo si tu intención es transformar o filtrar datos — para eso están map o filter.

🚫 Errores comunes

❌ Usarlo esperando que devuelva un nuevo array (no lo hace).

❌ Usarlo cuando necesitas return, break o continue.

❌ Usarlo cuando necesitas lógica condicional compleja para seguir o detener el recorrido.

🔁 4. `map()`

El método map() crea un nuevo array a partir del original, aplicando una transformación a cada uno de sus elementos. Es una de las herramientas más poderosas del paradigma funcional en JavaScript para trabajar con datos sin mutar el array original.

🔄 Sintaxis básica

const numeros = [1, 2, 3];
const dobles = numeros.map((n) => n * 2);
console.log(dobles);

📦 Salida:

[2, 4, 6]

💡 Ejemplo práctico: convertir precios con IVA

const precios = [100, 200, 300];
const conIVA = precios.map(precio => precio * 1.21);
console.log(conIVA);

📦 Salida:

[121, 242, 363]

✅ Cuándo usar `map()`

Cuando necesitas transformar los datos.
Cuando deseas obtener un nuevo array sin modificar el original.
Cuando cada transformación depende solo del valor (y opcionalmente el índice).

🧼 Buenas prácticas

No uses map() si no vas a usar el array resultante (usa forEach()).
Mantén la función de transformación pura: no debería tener efectos secundarios.
No mezcles lógica condicional compleja en el callback (manténlo simple y declarativo).

🚫 Errores comunes

❌ Usarlo para efectos secundarios en lugar de transformaciones.

❌ Ignorar que map() no modifica el array original.

❌ Usar map() cuando quieres filtrar elementos — para eso está filter().

🧽 5. `filter()`

El método filter() crea un nuevo array solo con los elementos que cumplen una condición. No modifica el array original, y es ideal cuando quieres filtrar datos o aplicar reglas de exclusión/inclusión.

🔄 Sintaxis básica

const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter(n => n % 2 === 0);
console.log(pares);

📦 Salida:

[2, 4]

💡 Ejemplo práctico: filtrar mayores de edad

const edades = [15, 18, 22, 14, 30];

const mayores = edades.filter(edad => edad >= 18);
console.log(mayores);

📦 Salida:

[18, 22, 30]

✅ Cuándo usar `filter()`

Cuando quieres reducir el array original a los elementos que cumplan una condición.
Para filtrar datos en listados, búsquedas o validaciones.
Cuando necesitas mantener inmutable el array original.

🧼 Buenas prácticas

Asegúrate de que el callback devuelva un booleano (true para mantener, false para descartar).
No hagas efectos secundarios en el filter() (guarda eso para forEach()).
Combínalo con map() si primero necesitas filtrar y luego transformar.

🚫 Errores comunes

❌ Usar filter() como si fuera map() (no transforma, solo selecciona).

❌ Pensar que modifica el array original (siempre devuelve uno nuevo).

❌ Usar filter() sin retornar un valor (undefined será tomado como false).

🧮 6. `reduce()`

El método reduce() permite recorrer un array y reducir todos sus elementos a un único valor. Puede ser una suma, un objeto acumulador, una cadena de texto, otro array… lo que tú decidas.

🧠 ¿Cómo funciona?

reduce() toma una función y un valor inicial. Esa función se ejecuta por cada elemento del array, y en cada vuelta recibe el resultado acumulado hasta ese momento y el valor actual del array.

Su estructura es esta:

array.reduce((resultadoAcumulado, valorActual) => {
  // lógica que devuelve el nuevo resultado
}, valorInicial);

🔄 Ejemplo simple: sumar números

const numeros = [1, 2, 3, 4, 5];

const suma = numeros.reduce((resultado, numero) => {
  return resultado + numero;
}, 0);

console.log(suma);

📦 Salida:

🔍 Explicación:

resultado empieza en 0 (valor inicial).
En cada vuelta, se suma numero al resultado.
Al final, reduce devuelve la suma total.

💡 Ejemplo práctico: contar elementos

const letras = ['a', 'b', 'a', 'c', 'a'];

const conteo = letras.reduce((resultado, letra) => {
  if (!resultado[letra]) {
    resultado[letra] = 1;
  } else {
    resultado[letra]++;
  }
  return resultado;
}, {});

console.log(conteo);

📦 Salida:

{ a: 3, b: 1, c: 1 }

🔍 Explicación:

resultado empieza como un objeto vacío {}.
Por cada letra, se incrementa la cantidad en el objeto.
El resultado final es un resumen de cuántas veces aparece cada letra.

✅ Cuándo usar `reduce()`

Cuando necesitas un único valor de salida.
Para sumar, agrupar, transformar o construir estructuras más complejas.
Cuando no puedes resolverlo con map() o filter() de forma directa.

🧼 Buenas prácticas

Dale nombres claros a los parámetros: no uses abreviaturas como acc.
Usa el valor inicial siempre que puedas. Evita asumir el primer valor del array.
Mantén la lógica de la función clara y legible.

🚫 Errores comunes

❌ Olvidar el valor inicial → puede causar errores si el array está vacío.

❌ Hacer lógica demasiado compleja dentro del reduce() sin separar funciones.

❌ Usar reduce() para tareas que se resuelven mejor con map() o filter().

✅ Resumen y conclusión

Hemos repasado las principales formas de recorrer un array en JavaScript, desde las más clásicas hasta las más modernas, entendiendo cómo funcionan, cuándo usarlas y cuáles evitar en ciertos contextos.

📊 Tabla comparativa completa

Método	Ideal para...	Devuelve nuevo array	Permite `break`	Permite `continue`	Acceso a índice	Mutabilidad	Legibilidad	Performance
`for`	Control total, lógica compleja	❌	✅ Sí	✅ Sí	✅ Sí	✅ Puedes mutar	🟠 Media	🟢 Muy alta
`for...of`	Recorrer valores de forma limpia	❌	✅ Sí	✅ Sí	❌ (con `.entries()`)	✅ Puedes mutar	🟢 Alta	🟢 Alta
`forEach()`	Efectos secundarios (logs, DOM, API)	❌	❌ No	❌ No	✅ Sí	✅ Puedes mutar	🟢 Alta	🟠 Media
`map()`	Transformar elementos → nuevo array	✅ Sí	❌ No	❌ No	✅ Sí	❌ Inmutable	🟢 Alta	🟠 Media
`filter()`	Filtrar elementos → nuevo array	✅ Sí	❌ No	❌ No	✅ Sí	❌ Inmutable	🟢 Alta	🟠 Media
`reduce()`	Acumular a un solo valor	✅ Valor único	❌ No	❌ No	✅ Sí	❌ Inmutable	⚠️ Compleja	🟠 Media
`for...in`	Recorrer propiedades (objetos)	❌	✅ Sí	✅ Sí	✅ Claves	✅ Puedes mutar	🔴 Baja (en arrays)	⚠️ No recomendado

⚠️ ¿Y `for...in`?

El bucle for...in no está pensado para arrays. Recorre claves (índices o propiedades), y puede incluir propiedades heredadas o modificadas, lo que puede producir errores difíciles de detectar.

Por eso, en este post no lo abordamos en profundidad.

📌 Lo dejaremos para una próxima entrega donde exploraremos en detalle cómo recorrer objetos en JavaScript, cómo acceder a claves, valores, y cómo usar Object.keys, Object.values, Object.entries, y más.

🧠 Conclusión final

Cada forma de recorrer un array tiene su propósito:

Usa for si necesitas control total.
Usa for...of para simplicidad y legibilidad.
Usa forEach si solo necesitas hacer algo con cada elemento.
Usa map, filter y reduce si estás trabajando con transformaciones funcionales.

La clave no es saber cuál existe, sino entender cuándo conviene cada una.

📌 Puedes encontrarme en:

GitHub: github.com/Andresws12
Sitio web: andres-hernandez.com
LinkedIn: linkedin.com/in/andreshernandez1995

DEV Community: Andrés Hernández

Recorriendo arrays en JavaScript: de lo clásico a lo moderno

🗂️ Formas de recorrer un array en JavaScript (resumen rápido)

Bueno, vamos a darle caña.

🔁 1. for clásico

👇 ¿Qué es el índice?

🔄 Sintaxis del for

💡 Ejemplo básico

➕ Ejemplo: Sumar solo los números impares

🛑 Uso de break

↪️ Uso de continue

🧼 Buenas prácticas

✅ Cuándo usar for

🧩 2. for...of

🔄 Sintaxis básica

🧠 ¿Qué significa "iterable"?

🧠 ¿Y el índice?

💡 Ejemplo práctico

✅ Cuándo usar for...of

🧼 Buenas prácticas

🚫 Errores comunes

🧩 2. for...of

🔄 Sintaxis básica

🧠 ¿Y si necesito el índice?

💡 Ejemplo práctico

✅ Cuándo usar for...of

🧼 Buenas prácticas

🚫 Errores comunes

🔄 3. forEach()

🔄 Sintaxis básica

💡 Ejemplo con índice

⚠️ Limitaciones de forEach()

💡 Ejemplo con condición

✅ Cuándo usar forEach()

🧼 Buenas prácticas

🚫 Errores comunes

🔁 4. map()

🔄 Sintaxis básica

💡 Ejemplo práctico: convertir precios con IVA

✅ Cuándo usar map()

🧼 Buenas prácticas

🚫 Errores comunes

🧽 5. filter()

🔄 Sintaxis básica

💡 Ejemplo práctico: filtrar mayores de edad

✅ Cuándo usar filter()

🧼 Buenas prácticas

🚫 Errores comunes

🧮 6. reduce()

🧠 ¿Cómo funciona?

🔄 Ejemplo simple: sumar números

🔍 Explicación:

💡 Ejemplo práctico: contar elementos

🔍 Explicación:

✅ Cuándo usar reduce()

🧼 Buenas prácticas

🚫 Errores comunes

✅ Resumen y conclusión

📊 Tabla comparativa completa

⚠️ ¿Y for...in?

🧠 Conclusión final

🔁 1. `for` clásico

🔄 Sintaxis del `for`

🛑 Uso de `break`

↪️ Uso de `continue`

✅ Cuándo usar `for`

🧩 2. `for...of`

✅ Cuándo usar `for...of`

🧩 2. `for...of`

✅ Cuándo usar `for...of`

🔄 3. `forEach()`

⚠️ Limitaciones de `forEach()`

✅ Cuándo usar `forEach()`

🔁 4. `map()`

✅ Cuándo usar `map()`

🧽 5. `filter()`

✅ Cuándo usar `filter()`

🧮 6. `reduce()`

✅ Cuándo usar `reduce()`

⚠️ ¿Y `for...in`?