¿Cómo usar el método Foreach en Javascript?

El método forEach en JavaScript permite recorrer un array y aplicar en cada uno de sus elementos una acción en particular a través de una función. Veamos un ejemplo:

1const animales = ["perro", "gato", "elefante"];
2
3animales.forEach(function (animal) {
4  console.log(animal);
5});
6/*
7'perro'
8'gato'
9'elefante'
10*/

Podemos observar como el método forEach itera el array animales y aplica a cada uno de sus elementos la función que recibe como parámetro. Para este ejemplo la función simplemente muestra el valor de cada elemento del array en la consola.

Sintaxis del método forEach en JavaScript

Como se mencionó anteriormente, el método forEach recibe como parámetro una función que se ejecutará en cada uno de los elementos del array. Esta función también conocida como función callback puede recibir hasta tres parámetros: el valor del elemento actual, el índice del elemento actual y el array que se esta recorriendo.

1  array.forEach(function(elementoActual, indice, array))

elmentoActual: es el valor del elemento actual del array.
índice: es el índice del elemento actual del array (opcional).
array: es el array que se está recorriendo (opcional).

A continuación, veamos un ejemplo de cómo utilizar los tres parámetros que recibe el método forEach:

1const vocales = ["a", "e", "i", "o", "u"];
2
3vocales.forEach(function (vocal, indice, arr) {
4  console.log(`El valor del elemento en la posición ${indice} es ${vocal} del array que estamos recorriendo que es ${arr}`);
5});

En este ejemplo podemos observar, como hacer uso de los parámetros que recibe la función callback del método forEach, en este caso se imprime por consola una cadena de texto que indica el valor del elemento actual, su posición en el array y el array que se esta iterando.

Casos de uso del método forEach en JavaScript

El método forEach en JavaScript se utiliza comúnmente para ejecutar un bloque de código para cada elemento de un array. A continuación, veremos algunos casos de uso:

Modificar los valores de un array: Podemos utilizar el método forEach para modificar los valores de un array. Por ejemplo, podríamos a partir de un array de nombres de personas generar un saludo para cada una.

1let nombresPersonas = ["Ricardo", "Pepe", "Mauricio"];
2
3nombresPersonas.forEach(function (nombre) {
4  console.log(`Hola ${nombre}`);
5});
6/*
7'Hola Ricardo'
8'Hola Pepe'
9'Hola Mauricio'
10*/

Manipulación del DOM: Podemos generar una lista de productos de forma dinámica haciendo uso del método forEach

1<!DOCTYPE html>
2<html>
3  <head> </head>
4  <body>
5    <h1>Mi lista de Productos</h1>
6    <ul id="miLista"></ul>
7
8    <script>
9      const listaProductos = ["Celular", "Laptop", "Audifonos", "TV"];
10      let ul = document.querySelector("#miLista");
11
12      listaProductos.forEach(function (producto) {
13        let li = document.createElement("li");
14        li.textContent = producto;
15        ul.appendChild(li);
16      });
17    </script>
18  </body>
19</html>

Podemos observar que originalmente nuestro documento HTML solo cuenta con una lista desordenada <ul> vacia. Haciendo uso del método forEach, creamos una etiqueta <li> a partir del método createElement(), luego le añadimos texto a través de la propiedad textContent que en este caso sera el nombre del producto actual que se te iterando y por último añadimos la etiqueta <li> como hijo a la etiqueta <ul> haciendo uso de appendChild, obteniendo asi una lista dinámica en nuestro documento HTML.

Filtrar los elementos de un array: El método forEach nos puede ayudar a la hora que necesitemos filtrar los elementos de un array. Por ejemplo, necesitamos filtrar todos los productos que tengan un precio superior a $100.

1// Array de productos
2const productos = [
3  { nombre: "Camiseta", precio: 25 },
4  { nombre: "Zapatos", precio: 150 },
5  { nombre: "Pantalones", precio: 80 },
6  { nombre: "Gorra", precio: 30 },
7  { nombre: "Bolso", precio: 200 },
8];
9
10// Array auxiliar para almacenar los productos filtrados
11const productosFiltrados = [];
12
13// Filtrar productos con precio mayor a $100 utilizando forEach
14productos.forEach((producto) => {
15  if (producto.precio > 100) {
16    productosFiltrados.push(producto);
17  }
18});
19
20// Imprimir los productos filtrados por consola
21console.log(productosFiltrados);
22/*
23[
24  { nombre: 'Zapatos', precio: 150 },
25  { nombre: 'Bolso', precio: 200 }
26]
27*/

Actualizar propiedades de objetos en un array: Podemos hacer uso del método forEach para modificar propiedades de un grupo de objetos que se encuentran dentro de un array. Por ejemplo, de un arrays de estudiantes podemos modificar la nota de cada uno de ellos.

1const estudiantes = [
2  { nombre: "Juan", nota: 80 },
3  { nombre: "Pedro", nota: 90 },
4  { nombre: "Carlos", nota: 75 },
5];
6
7estudiantes.forEach((estudiante) => {
8  estudiante.nota += 5;
9});
10
11console.log(estudiantes);
12/* Resultado:
13[
14  { nombre: 'Juan', nota: 85 },
15  { nombre: 'Pedro', nota: 95 },
16  { nombre: 'Carlos', nota: 80 }
17]
18*/

Calcular la suma de todos los elementos de un array: Podemos utilizar el método forEach para sumar todos los elementos de un array.

1const numeros = [1, 2, 3, 4, 5];
2let total = 0;
3
4numeros.forEach((numero) => {
5  total += numero;
6});
7
8console.log(total); // 15

Es importante conocer que el método forEach no retorna un array nuevo. Este tiene como función principal iterar y ejecutar una función sobre cada elemento del array en Javascript. Si necesitas crear un nuevo array a partir de los elementos originales, podemos utilizar otros métodos como map o filter.

Si te gustaría saber mas acerca de este método puedes visitar la documentación oficial de JavaScript para el método forEach.

Si leyendo este articulo te llamo la atención y te gustaría saber más sobre el lenguaje de programación JavaScript, puedes visitar este link sobre aprender a programar en javascript, donde podrás aprender las bases del lenguaje, a través de conceptos simples, ejemplos de código, videotutoriales y muchos otros recursos que serán útiles para tu aprendizaje.

Weekly Coding Challenge

Podcast: Code Sets You Free

¿Cómo usar el método Foreach en Javascript?

Sintaxis del método forEach en JavaScript

Casos de uso del método forEach en JavaScript