4Geeks chosen to deliver AI education in the Bahamas alongside Harvard, Oxford, and Columbia.See more

¿Cómo recorrer un Array en Javascript?

By 4Geeks

Recorre arrays con el bucle adecuado, usa el índice cuando lo necesites y transforma datos con map(), filter() y reduce().

6 min readLast updated
Icono de recorrer un array en JavaScript

¿Cómo recorrer un array en JavaScript?

Respuesta corta: la forma más sencilla es for...of, que te da cada elemento por orden. Usa forEach() si prefieres una función, un for clásico si necesitas controlar el índice, y map(), filter() o reduce() cuando quieres crear un resultado nuevo a partir del array.

javascript
const frutas = ["manzana", "pera", "uva"];
 
for (const fruta of frutas) {
  console.log(fruta);
}
manzana
pera
uva

for...of funciona con arrays, cadenas de texto y otros objetos iterables, y permite salir antes con break.

Para recorrer elige for...of o forEach(); para transformar, map().

Formas de recorrer un array en JavaScript

FormaÚsala para¿Admite break?Devuelve
for...ofRecorrer los elementos, la opción por defectoSíNada
for clásicoControlar el índice, ir hacia atrás o saltar elementosSíNada
forEach()Ejecutar una función por cada elementoNoundefined
map()Crear un array nuevo transformando cada elementoNoUn array del mismo tamaño
filter()Quedarte con los elementos que cumplen una condiciónNoUn array más corto
reduce()Calcular un único valor, como una sumaNoUn valor
find(), some(), every()Buscar o comprobarParan solosUn elemento o true/false

for...of

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

Si también necesitas la posición, usa entries():

javascript
for (const [i, fruta] of frutas.entries()) {
  console.log(i, fruta);
}
0 manzana
1 pera
2 uva

for clásico

javascript
for (let i = 0; i < frutas.length; i++) {
  console.log(i, frutas[i]);
}

Es el más flexible: puedes empezar por el final con for (let i = frutas.length - 1; i >= 0; i--) o avanzar de dos en dos con i += 2.

forEach()

javascript
frutas.forEach((fruta, i) => {
  console.log(`${i}: ${fruta}`);
});
0: manzana
1: pera
2: uva

forEach() recibe el elemento, el índice y el array completo. No se puede detener con break; si necesitas parar, usa for...of. Tienes más ejemplos en la guía del método forEach() en JavaScript.

Recorrer un array para crear un resultado

Muchas veces no recorres un array solo para mirarlo, sino para obtener algo nuevo. Para eso hay métodos que lo hacen en una línea.

map(): transformar cada elemento

javascript
const precios = [10, 25, 40];
 
const conIva = precios.map(p => p * 1.21);
console.log(conIva); // [12.1, 30.25, 48.4]

filter(): quedarte con algunos

javascript
const caros = precios.filter(p => p > 20);
console.log(caros); // [25, 40]

reduce(): calcular un total

javascript
const total = precios.reduce((suma, p) => suma + p, 0);
console.log(total); // 75

Tienes más ejemplos en la guía del método reduce() en JavaScript.

find(), some() y every(): buscar y comprobar

javascript
precios.find(p => p > 20);   // 25, el primero que cumple
precios.some(p => p > 30);   // true, al menos uno cumple
precios.every(p => p > 5);   // true, todos cumplen

Estos tres métodos dejan de recorrer el array en cuanto tienen la respuesta.

Carrera · Ingeniería de IA para Desarrolladores

Ya dominas los bucles en JavaScript, ahora crea apps con IA

Usa las habilidades de programación que ya tienes para crear agentes de IA, sistemas RAG y aplicaciones con LLM, con mentores y proyectos reales.

Más ejemplos para recorrer arrays

Salir del bucle antes de terminar

javascript
for (const p of precios) {
  if (p > 20) {
    console.log("Primero mayor que 20:", p);
    break;
  }
}

Usa continue para saltar a la siguiente vuelta sin salir del bucle.

Recorrer un array de objetos

javascript
const usuarios = [
  { nombre: "Ana", edad: 28 },
  { nombre: "Luis", edad: 34 },
];
 
for (const { nombre, edad } of usuarios) {
  console.log(`${nombre} tiene ${edad} años`);
}
Ana tiene 28 años
Luis tiene 34 años

Recorrer un array al revés

javascript
for (let i = frutas.length - 1; i >= 0; i--) {
  console.log(frutas[i]);
}

[...frutas].reverse() también sirve, y la copia con ... evita que reverse() cambie el array original.

Recorrer con await

forEach() no espera a las promesas. Si dentro del bucle usas await, usa for...of:

javascript
for (const url of urls) {
  const respuesta = await fetch(url);
  console.log(respuesta.status);
}

Para lanzar todas las peticiones a la vez y esperar al final, usa await Promise.all(urls.map(url => fetch(url))).

¿Cuál usar?

QuieresUsa
Recorrer y hacer algo con cada elementofor...of o forEach()
Parar al encontrar algofor...of con break, o find()
Usar el índice o recorrer al revésfor clásico
Crear un array nuevomap() o filter()
Obtener un total o un único valorreduce()
Esperar una promesa en cada vueltafor...of con await

Recorre arrays con IA

Un asistente como ChatGPT, Claude o GitHub Copilot elige el bucle adecuado y lo escribe en segundos si le dices qué datos tienes y qué quieres obtener. Estos tres prompts están listos para copiar.

1. Elige el bucle adecuado

Tengo este array en JavaScript: [pega un ejemplo del array].
Quiero [mostrar cada elemento / crear un array nuevo con X / calcular el total de Y / encontrar el primero que cumple Z].
Escribe el código con el método más adecuado y explícame por qué lo eliges.

2. Convierte un bucle for en map(), filter() o reduce()

Reescribe este bucle de JavaScript usando map(), filter() o reduce() y explícame la diferencia:
[pega tu bucle]

3. Arregla un bucle que no funciona

Este bucle de JavaScript [no para con break / devuelve undefined / no espera al await]:
[pega tu código]
Explícame la causa y dame la corrección.
Aprende con un mentor

De recorrer arrays a lanzar funciones de IA

En la carrera de Ingeniería de IA para Desarrolladores de 4Geeks añades agentes de IA, RAG y aplicaciones con LLM en producción a tu portafolio.

Errores comunes al recorrer un array

Lo que vesPor qué pasaSolución
SyntaxError: Illegal break statementUsaste break dentro de forEach()Usa for...of o find()
undefined al guardar el resultado de forEach()forEach() siempre devuelve undefinedUsa map() si quieres un array nuevo
El último elemento sale undefinedLa condición es i <= array.lengthUsa i < array.length
Los índices salen como texto, "0", "1"Usaste for...in, que recorre clavesUsa for...of o un for clásico
TypeError: frutas.forEach is not a functionLa variable no es un array, por ejemplo un objeto o una NodeList antiguaConviértela con Array.from() o usa Object.values()
El código sigue antes de que terminen las promesasforEach() no espera a awaitUsa for...of con await o Promise.all()
El array cambia mientras lo recorresAñades o quitas elementos dentro del bucleRecorre una copia con [...array] o usa filter()

Guías relacionadas

Descarga gratis

Recorrer arrays en JavaScript en una chuleta de 2 páginas

for...of, for, forEach(), map(), filter(), reduce() y más, cuál usar en cada caso, errores comunes y prompts para ChatGPT, Claude o Copilot. Gratis, en PDF.

Chuleta: recorrer un array en JavaScript

2 páginas · PDF · 4Geeks

  • Todas las formas de recorrer un array, comparadas
  • Recetas listas para copiar
  • Errores comunes y prompts para resolverlos con IA

Consíguela gratis

Tu PDF al instante

Preguntas frecuentes sobre recorrer arrays en JavaScript

¿Quieres pasar de los bucles en JavaScript a crear aplicaciones con IA, con proyectos reales y mentores?

Ver la carrera de Ingeniería de IA para Desarrolladores