JavaScript forEach: ejecuta callbacks en arrays

El forEach de JavaScript (Array.prototype.forEach) ejecuta un callback una vez por elemento de un array, en orden de índice. Usa un bucle JavaScript forEach para efectos secundarios como logs, actualizaciones del DOM o cambios en una variable externa, cuando no necesitas break ni await. Como devuelve undefined, no es la herramienta correcta para transformaciones (map) ni para búsquedas que pueden terminar antes (find, some). Para flujo de control, prefiere un bucle for...of.

Ejemplo de forEach en JavaScript para iterar arrays

Salida:

0: rojo
1: verde
2: azul

Cómo funciona este ejemplo

1. colores contiene tres strings en un array.
2. forEach llama a la función flecha una vez por elemento y pasa como argumentos el elemento actual y su índice basado en cero.
3. El callback registra cada color junto con su posición. forEach procesa los elementos en orden de índice ascendente y omite huecos vacíos en arrays dispersos.

Errores comunes con forEach

Usar forEach con async/await:

Incorrecto:

const urls = ["https://example.com/a", "https://example.com/b"];

urls.forEach(async (url) => {
  await fetch(url);
});
console.log("hecho"); // se ejecuta inmediatamente

Correcto:

for (const url of urls) {
  await fetch(url);
}

forEach no espera las promesas que devuelve el callback. Usa for...of para await secuencial, o await Promise.all(urls.map((url) => fetch(url))) para trabajo en paralelo.

Intentar salir de forEach con break:

Incorrecto:

const elementos = ["a", "b", "c"];
const objetivo = "b";

elementos.forEach((elemento) => {
  if (elemento === objetivo) break; // SyntaxError
});

Correcto:

const encontrado = elementos.find((elemento) => elemento === objetivo);

forEach no puede salir antes. Usa find/some para búsquedas con cortocircuito, o for...of cuando necesites break.

forEach vs map vs for…of

Usa forEach para efectos secundarios cuando no necesites salida anticipada ni await. Usa map cuando el resultado sea un array transformado. Usa for...of cuando necesites break, continue o await secuencial.

Preguntas frecuentes

¿Se puede salir antes de JavaScript forEach?

No. forEach ejecuta el callback para cada elemento. Lanzar una excepción detiene la iteración, pero es un anti patrón. Usa for...of con break, o find/some/every para búsquedas con cortocircuito.

¿forEach muta el array original?

forEach por sí mismo no modifica el array. El callback puede mutar elementos de objeto en el lugar porque recibe referencias, no copias. Los valores primitivos como números y strings se pasan por valor y no pueden cambiarse mediante el parámetro del callback.

¿Cuál es la diferencia entre forEach y map?

forEach devuelve undefined y está diseñado para efectos secundarios. map devuelve un array nuevo construido a partir de los valores de retorno del callback. Si el objetivo es transformar datos, usa map; si el objetivo es ejecutar acciones como logs o actualizaciones del DOM, usa forEach.