3.4 ¿Qué es forEach() y para qué sirve?

Autor:

ciberkaos

– Tema:

DOM

– Publicado:

marzo 3, 2026

– Actualizado:

marzo 3, 2026

Contenido

¿Qué está pasando aquí?

forEach() es un método de los arrays que permite recorrer todos sus elementos y ejecutar una función (un bloque de código) para cada uno.

Piensa en ello como:
“Para cada elemento del array, haz esto…”

Se usa mucho para:

Mostrar elementos por pantalla o en consola
Calcular totales o acumuladores
Transformar datos (aunque para transformar suele ser mejor map())
Buscar / filtrar (aunque para eso suelen ser mejores find() y filter())

2) Sintaxis básica

array.forEach(function(elemento) {
  // código que se ejecuta por cada elemento
});

Versión con función flecha (la más común hoy):

array.forEach((elemento) => {
  // código por cada elemento
});

3) Parámetros de la función callback

La función que pasas a forEach() puede recibir hasta 3 parámetros:

array.forEach((elemento, indice, arrayCompleto) => {
  // elemento: valor actual
  // indice: posición del elemento
  // arrayCompleto: el array original
});

Ejemplo (elemento + índice)

const nombres = ["Ana", "Luis", "Marta"];
nombres.forEach((nombre, i) => {
  console.log(i, nombre);
});

Explicación: recorre el array y muestra el índice y el nombre de cada posición.

4) Ejemplos típicos

4.1 Mostrar cada elemento

const frutas = ["manzana", "pera", "plátano"];
frutas.forEach((fruta) => {
  console.log(fruta);
});

Explicación: imprime cada fruta en una línea.

4.2 Sumar valores (acumulador)

const precios = [10, 20, 5];
let total = 0;
precios.forEach((p) => {
  total += p;
});
console.log("Total:", total);

Explicación: forEach() recorre los precios y vamos sumando cada uno en total.

4.3 Construir un string con los elementos

const letras = ["A", "B", "C"];
let resultado = "";
letras.forEach((l) => {
  resultado += l + "-";
});
console.log(resultado); // "A-B-C-"

Explicación: concatenamos cada letra para crear una cadena final.

4.4 Recorrer un array de objetos

const alumnos = [
  { nombre: "Bea", nota: 8 },
  { nombre: "Dani", nota: 5 },
  { nombre: "Sara", nota: 9 }
];
alumnos.forEach((a) => {
  console.log(`${a.nombre} tiene un ${a.nota}`);
});

Explicación: forEach() va pasando por cada objeto y accedemos a sus propiedades.

4.5 Crear elementos en el DOM (lista HTML)

HTML:

<ul id="lista"></ul>

JS:

const tareas = ["Estudiar", "Entrenar", "Leer"];
const ul = document.querySelector("#lista");
tareas.forEach((tarea) => {
  const li = document.createElement("li");
  li.textContent = tarea;
  ul.appendChild(li);
});

Explicación: por cada tarea creamos un <li> y lo añadimos dentro del <ul>.

5) Cosas IMPORTANTES que debes saber

5.1 `forEach()` NO devuelve un array nuevo

forEach() siempre devuelve undefined.

const nums = [1, 2, 3];
const r = nums.forEach((n) => n * 2);console.log(r); // undefined


const nums = [1, 2, 3];
const dobles = nums.map((n) => n * 2);console.log(dোবles); // [2, 4, 6]

5.2 No puedes “parar” un `forEach()` con `break`

Con forEach() no se usa break ni continue.

Si necesitas parar cuando encuentras algo, mejor:

for...of
some() (para parar cuando se cumple una condición)
find() (para encontrar el primero que cumpla)

Ejemplo con for...of:

const nums = [2, 4, 7, 10];
for (const n of nums) {
  if (n === 7) 
    console.log(n);
}

Explicación: aquí sí se puede detener el bucle con break.

5.3 Puedes modificar el array (pero cuidado)

Se puede, pero puede provocar efectos raros si borras/añades elementos mientras recorres.

const a = [1, 2, 3];a.forEach((n, i) => {
  a[i] = n * 10;
});console.log(a); // [10, 20, 30]

Explicación: aquí funciona bien porque solo reemplazamos valores.

6) `forEach()` vs otros métodos (mini guía)

forEach(): recorrer y “hacer algo” (mostrar, acumular, crear DOM…)
map(): crear un array nuevo transformado
filter(): crear un array nuevo filtrado
find(): obtener el primer elemento que cumpla
some(): comprobar si alguno cumple (y se puede “parar” antes)
every(): comprobar si todos cumplen

7) Trabajando con el DOM

Vamos a hacer algo muy realista: tienes un array con nombres en JavaScript y quieres que automáticamente se construya una lista <ul> en el HTML usando forEach().

Dado este array:

const nombres = ["Ana", "Luis", "Marta", "Carlos", "Beatriz"];

Queremos generar dinámicamente esto en el HTML:

<ul>
  <li>Ana</li>
  <li>Luis</li>
  <li>Marta</li>
  <li>Carlos</li>
  <li>Beatriz</li>
</ul>

Sin escribir los <li> a mano. Que lo haga JavaScript.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo forEach</title>
</head>
<body>  <h2>Lista de alumnos</h2>
  <ul id="listaNombres"></ul>  <script src="script.js"></script>
</body>
</html>

Observa el detalle importante:

<ul id="listaNombres"></ul>

Ese id es el punto de anclaje. Ahí vamos a insertar los <li>.

JavaScript (script.js)

// Array de nombres
const nombres = ["Ana", "Luis", "Marta", "Carlos", "Beatriz"];

// Seleccionamos el <ul>
const ul = document.getElementById("listaNombres");

// Recorremos el array
nombres.forEach((nombre) => {

  // 1. Crear el elemento <li>
  const li = document.createElement("li");

  // 2. Añadir el texto
  li.textContent = nombre;

  // 3. Insertarlo dentro del <ul>
  ul.appendChild(li);

});

¿Qué está pasando exactamente?

forEach() recorre cada nombre del array.
En cada vuelta:
- Creamos un <li>
- Le ponemos el texto del nombre actual
- Lo añadimos al <ul>

Es como una pequeña fábrica automática de etiquetas HTML.

Versión con índice incluido

Si quieres que aparezca numerado:

nombres.forEach((nombre, indice) => {  
const li = document.createElement("li");
  li.textContent = (indice + 1) + ". " + nombre;  
ul.appendChild(li);
});

Resultado:

Ana
Luis
Marta
Carlos
Beatriz

⚠️ Error común de principiante

ul.innerHTML += "<li>" + nombre + "</li>";

Funciona… pero:

Es menos eficiente
Puede romper eventos
Es menos seguro si el contenido viene del usuario

Crear elementos con createElement() es la forma correcta y profesional.

Idea para subir un poco el nivel

Puedes hacer que si el nombre empieza por “B” se pinte en rojo:

nombres.forEach((nombre) => {  
const li = document.createElement("li");
  li.textContent = nombre;  
if (nombre.startsWith("B")) {
    li.style.color = "red";
  }  
ul.appendChild(li);});

Ahora ya no solo recorremos. También tomamos decisiones dentro del recorrido.

Eso ya es pensar como programador y no como copiador de código.

Si quieres, podemos convertir esto en una pequeña práctica gamificada para tus alumnos tipo “constructor automático de lista dinámica”, donde luego tengan que añadir botones para borrar nombres o añadir nuevos desde un input. Ahí empiezan a entender realmente el poder del DOM y los arrays trabajando juntos.

8. Ejemplo con un JSON

amos a hacer el caso típico:

Tenemos un JSON con productos y queremos generar automáticamente la ficha de cada producto en HTML.

Nada de copiar y pegar tarjetas manualmente. Que la máquina trabaje.

1️⃣ El JSON de productos

Imaginemos que tenemos esto en un archivo llamado productos.json:

[
  {
    "id": 1,
    "nombre": "Portátil Gaming",
    "precio": 1299,
    "imagen": "https://via.placeholder.com/200",
    "descripcion": "Portátil potente para desarrollo y juegos."
  },
  {
    "id": 2,
    "nombre": "Teclado Mecánico",
    "precio": 89,
    "imagen": "https://via.placeholder.com/200",
    "descripcion": "Teclado con switches mecánicos retroiluminado."
  },
  {
    "id": 3,
    "nombre": "Ratón Inalámbrico",
    "precio": 49,
    "imagen": "https://via.placeholder.com/200",
    "descripcion": "Ratón ergonómico con batería recargable."
  }
]

Es simplemente un array de objetos. Nada místico.

2️⃣ HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Productos</title>
  <style>
    .contenedor {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }    .producto {
      border: 1px solid #ccc;
      padding: 15px;
      width: 220px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }    .producto img {
      width: 100%;
    }    .precio {
      font-weight: bold;
      color: green;
    }
  </style>
</head>
<body>  <h2>Catálogo de Productos</h2>
  <div id="contenedorProductos" class="contenedor"></div>  <script src="script.js"></script>
</body>
</html>

Observa el div vacío:

<div id="contenedorProductos"></div>

Ahí vamos a inyectar todas las fichas dinámicamente.

3️⃣ JavaScript (leer JSON y generar fichas)

// Seleccionamos el contenedor
const contenedor = document.getElementById("contenedorProductos");

// Leer el JSON
fetch("productos.json")
  .then(response => response.json())
  .then(productos => {

    productos.forEach(producto => {

      // Crear tarjeta
      const tarjeta = document.createElement("div");
      tarjeta.classList.add("producto");

      tarjeta.innerHTML = `
        <img src="${producto.imagen}" alt="${producto.nombre}">
        <h3>${producto.nombre}</h3>
        <p>${producto.descripcion}</p>
        <p class="precio">${producto.precio} €</p>
        <button>Comprar</button>
      `;

      contenedor.appendChild(tarjeta);

    });

  })
  .catch(error => {
    console.error("Error al cargar los productos:", error);
  });

¿Qué está pasando aquí?

fetch() pide el archivo JSON.
.json() convierte la respuesta en objeto JavaScript.
forEach() recorre cada producto.
Para cada producto:
- Creamos un div
- Insertamos su contenido dinámicamente
- Lo añadimos al contenedor

Es literalmente una fábrica automática de fichas.

Si mañana el JSON tiene 200 productos, se generarán 200 tarjetas.
Eso es separar datos de presentación. Arquitectura básica pero poderosa.

Ejercicios propuestos

Ejercicio 1

Dado el array:

const nums = [3, 6, 9, 12];

Muestra en consola cada número y su índice.

Ejercicio 2

Calcula la suma total de:

const carrito = [12.99, 5.5, 3.25, 20];

Ejercicio 3

Dado:

const alumnos = [
  { nombre: "Ana", nota: 4 },
  { nombre: "Luis", nota: 7 },
  { nombre: "Marta", nota: 9 }
];

Muestra solo un mensaje por alumno con “APTO” si la nota es >= 5, y “NO APTO” si es < 5.

Ejercicio 4 (DOM)

Crea una lista <ul> en HTML y rellénala con un array de strings usando forEach().

Métodos y propiedades utilizados

Método / Propiedad	Tipo	¿Dónde se usa?	¿Para qué sirve?	¿Devuelve algo?
`document.getElementById()`	DOM	`document.getElementById("contenedorProductos")`	Selecciona un elemento del HTML por su id	El elemento encontrado
`fetch()`	Web API	`fetch("productos.json")`	Realiza una petición HTTP para obtener datos	Una Promise
`.then()`	Promise	`fetch(...).then(...)`	Ejecuta código cuando la promesa se resuelve	Otra Promise
`.json()`	Response	`response.json()`	Convierte la respuesta HTTP en objeto JavaScript	Una Promise con el JSON convertido
`.forEach()`	Array	`productos.forEach(...)`	Recorre cada elemento del array	`undefined`
`document.createElement()`	DOM	`document.createElement("div")`	Crea un nuevo elemento HTML	El elemento creado
`.classList.add()`	DOM	`tarjeta.classList.add("producto")`	Añade una clase CSS a un elemento	`undefined`
`.appendChild()`	DOM	`contenedor.appendChild(tarjeta)`	Inserta un elemento dentro de otro	El nodo añadido
`.append()`	DOM	`tarjeta.append(...)`	Añade uno o varios elementos hijos	`undefined`
`.textContent`	Propiedad DOM	`titulo.textContent = producto.nombre`	Asigna texto a un elemento	No devuelve valor (es asignación)
`.innerHTML`	Propiedad DOM	`tarjeta.innerHTML = \`…«	Inserta HTML directamente dentro de un elemento	No devuelve valor (es asignación)
`.catch()`	Promise	`.catch(error => {...})`	Captura errores en promesas	Una Promise

3.4 ¿Qué es forEach() y para qué sirve?

2) Sintaxis básica

3) Parámetros de la función callback

Ejemplo (elemento + índice)

4) Ejemplos típicos

4.1 Mostrar cada elemento

4.2 Sumar valores (acumulador)

4.3 Construir un string con los elementos

4.4 Recorrer un array de objetos

4.5 Crear elementos en el DOM (lista HTML)

5) Cosas IMPORTANTES que debes saber

5.1 `forEach()` NO devuelve un array nuevo

5.2 No puedes “parar” un `forEach()` con `break`

5.3 Puedes modificar el array (pero cuidado)

6) `forEach()` vs otros métodos (mini guía)

7) Trabajando con el DOM

HTML

JavaScript (script.js)

¿Qué está pasando exactamente?

Versión con índice incluido

⚠️ Error común de principiante

Idea para subir un poco el nivel

8. Ejemplo con un JSON

1️⃣ El JSON de productos

2️⃣ HTML

3️⃣ JavaScript (leer JSON y generar fichas)

¿Qué está pasando aquí?

Ejercicios propuestos

Ejercicio 1

Ejercicio 2

Ejercicio 3

Ejercicio 4 (DOM)

Métodos y propiedades utilizados

Lecciones:

Más entradas

Proyecto web en PHP orientado a objetos: tienda de cuencos tibetanos

Proyecto web en PHP: tienda de cuencos tibetanos

Proyecto Mundo Oficios: diseño y desarrollo de una tienda online de muñecos por profesiones

1.1 – Presentación del curso de programación con Java

3.4 ¿Qué es forEach() y para qué sirve?

2) Sintaxis básica

3) Parámetros de la función callback

Ejemplo (elemento + índice)

4) Ejemplos típicos

4.1 Mostrar cada elemento

4.2 Sumar valores (acumulador)

4.3 Construir un string con los elementos

4.4 Recorrer un array de objetos

4.5 Crear elementos en el DOM (lista HTML)

5) Cosas IMPORTANTES que debes saber

5.1 forEach() NO devuelve un array nuevo

5.2 No puedes “parar” un forEach() con break

5.3 Puedes modificar el array (pero cuidado)

6) forEach() vs otros métodos (mini guía)

7) Trabajando con el DOM

HTML

JavaScript (script.js)

¿Qué está pasando exactamente?

Versión con índice incluido

⚠️ Error común de principiante

Idea para subir un poco el nivel

8. Ejemplo con un JSON

1️⃣ El JSON de productos

2️⃣ HTML

3️⃣ JavaScript (leer JSON y generar fichas)

¿Qué está pasando aquí?

Ejercicios propuestos

Ejercicio 1

Ejercicio 2

Ejercicio 3

Ejercicio 4 (DOM)

Métodos y propiedades utilizados

Lecciones:

Más entradas

Proyecto web en PHP orientado a objetos: tienda de cuencos tibetanos

Proyecto web en PHP: tienda de cuencos tibetanos

Proyecto Mundo Oficios: diseño y desarrollo de una tienda online de muñecos por profesiones

1.1 – Presentación del curso de programación con Java

5.1 `forEach()` NO devuelve un array nuevo

5.2 No puedes “parar” un `forEach()` con `break`

6) `forEach()` vs otros métodos (mini guía)