Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 4 minutos Intermedio
javascript-bucle-foreach

Bucle forEach en JavaScript

El bucle forEach es una estructura de control en JavaScript que facilita iterar sobre elementos de una colección o secuencia de datos (como arrays, o conjuntos).

En JavaScript este bucle se realiza a través del método forEach(), que está disponible en las colecciones (en realidad, en los elementos iterables)

El bucle forEach ofrece varias ventajas sobre otros bucles tradicionales.

  • La sintaxis del bucle forEach es más clara y sencilla.
  • Al no depender de índices, reduce la posibilidad de cometer errores al acceder a elementos de la colección.

Sintaxis básica

La sintaxis básica de un bucle forEach en JavaScript es la siguiente:

colección.forEach((elemento) => {
    // Código a ejecutar para cada elemento de la colección
});
  • Colección: Es la colección de la que se van a iterar los elementos.
  • Elemento: Es el nombre de la variable que representa cada elemento en la iteración.
  • Instrucciones a ejecutar: Aquí se especifican las instrucciones que se ejecutan en cada iteración.

Vamos a verlo con un ejemplo simple donde se utilizamos un bucle forEach para iterar sobre un array de números:

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

numeros.forEach(function(numero) {
    console.log(numero);
});

Este bucle forEach imprimirá cada número en la matriz numeros en una línea separada.

Utilizando arrow functions con forEach

También es posible utilizar Arrow Functions en lugar de funciones anónimas en la sintaxis de forEach (de hecho es muy habitual).

array.forEach((element) => {
  // Código a ejecutar para cada elemento
});

El ejemplo anterior utilizando arrow functions quedaría así:

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

numeros.forEach((numero) => {
  console.log(numero);
});

Inmutabilidad de la colección

Una de las limitaciones del bucle forEach es que no permite modificar la colección que se está iterando directamente.

Si intentamos agregar o eliminar elementos de la colección dentro del propio bucle forEach, lo más normal es que se vuelva muy loco 😉.

Por ejemplo

let numeros = [1, 2, 3, 6, 7, 8];

numeros.forEach((num, index) => {
  if (num > 5) {
    numeros.splice(index, 1); // Intentamos eliminar elementos de la colección
  }
});

console.log(numeros); // [1, 2, 3, 7] esto no está bien

En este ejemplo,

  • Esperaríamos eliminar los valores >5, y por tanto obtener [1, 2, 3]
  • Sin embargo, obtenemos [1, 2, 3, 7]
  • Al modificar la colección con splice, las posiciones de los elementos han cambiado, lo que genera que forEach tenga comportamiento errático

Cuando se necesita modificar la colección durante la iteración:

  • Puedes usar otros bucles como for o while
  • Puedes crear una copia de la colección (y trabajas sobre ella)
let numeros = [1, 2, 3, 6, 7, 8];

// Hacemos una copia del array para iterar sobre ella
let copiaNumeros = [...numeros];

copiaNumeros.forEach((num, index) => {
  if (num > 5) {
    // Eliminar el número de la colección original
    numeros.splice(numeros.indexOf(num), 1);
  }
});

console.log(numeros); // [1, 2, 3] ahora está bien

Ejemplos prácticos

Recorrer una lista de números

Supongamos que tenemos una lista de números enteros y queremos imprimir cada uno de ellos en la consola. Utilizando el bucle forEach, el código sería el siguiente:

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

numeros.forEach(function(numero) {
    console.log(numero);
});

Iterar sobre un array de cadenas

Si tenemos un array de cadenas y queremos realizar alguna operación sobre cada una de ellas, el bucle forEach es la opción ideal. Por ejemplo, si queremos convertir todas las cadenas a mayúsculas, podemos hacerlo de la siguiente manera:

let nombres = ["Juan", "María", "Pedro"];

nombres.forEach(function(nombre) {
    console.log(nombre.toUpperCase());
});

Suma de elementos en una lista

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

numeros.forEach(function(numero) {
    suma += numero;
});

console.log(`La suma de los números es: ${suma}`);

Este bucle forEach suma todos los elementos en la lista numeros.

Búsqueda de un elemento en un array

let numeros = [10, 20, 30, 40, 50];
let buscar = 30;
let encontrado = false;

numeros.forEach(function(numero) {
    if (numero === buscar) {
        encontrado = true;
    }
});

if (encontrado) {
    console.log(`El número ${buscar} se encuentra en el array.`);
} else {
    console.log(`El número ${buscar} no se encuentra en el array.`);
}

Este bucle forEach busca un número específico en el array numeros y determina si está presente.

Estos ejemplos tienen el propósito de mostrar cómo utilizar el bucle forEach. No significa que sea la mejor forma de resolver el problema que abordan. Lo normal es que haya alternativas mejores.

En esta página