En pasados artículos del Manual de Javascript hemos conocido la estructura de array y hemos visto que nos permite almacenar múltiples datos a los que accedemos mediante su índice numérico.

A lo largo de los diversos artículos se han planteado numerosos ejemplos para iterar sobre los elementos de los arrays con bucles de los típicos de toda la vida, como el bucle for. Sin embargo, existe una manera de realizar recorridos sobre arrays en Javascript que nos permite otras ventajas, como una mejor legibilidad del código. Así que vamos a ponernos manos a la obra y conocer el método forEach de los arrays en Javascript para realizar recorridos a sus elementos.

Qué es forEach

JavaScript ofrece una variedad de métodos incorporados sobre los arrays que facilitan tareas frecuentes que podemos realizar con ellos, como encontrar un elemento, filtrar el array y mucho más.

El método forEach de los arrays se encarga de ejecutar una función específica para cada elemento de un array. Por tanto, no podemos decir que sea exactamente un bucle, sino un mecanismo de alto nivel para realizar un comportamiento por cada uno de los elementos de un array.

Al final, podemos entenderlo como un medio de recorrer los elementos del array y hacer algo para cada uno de ellos. Ese algo lo expresaremos mediante una función que enviaremos al bucle forEach como parámetro.

La sintaxis del método forEach() es la siguiente:

array.forEach(function(valorActual, indice, esteArray), thisValue)

Parámetros admitidos por forEach()

La función forEach() acepta dos parámetros:

• Una función Callback: con el comportamiento que se ejecutará para cada elemento del array.
• Un segundo parámetro, opcional, que permite indicar el valor que tendrá la variable "this" dentro de la función.

Además, la función callback, que debemos enviar como primer parámetro de manera obligatoria, toma tres argumentos:

• valorActual: es el valor actual del elemento en el array en el recorrido
• indice: el índice del array que tiene el valor actual
• esteArray: el array completo sobre el que se está iterando

La función callback se ejecutará una vez por cada elemento del array. En ella no se requiere que se indiquen todos los parámetros, sino solamente los que necesitemos. Lo general es usar al menos el primer parámetro porque usualmente querremos hacer algo con el elemento actual, pero muchas veces necesitamos otros datos como por ejemplo el índice, que también nos proporciona.

Ejemplos de recorrido forEach en Javascript

Vamos a ver un ejemplo sobre cómo se usa el método forEach sobre un array. Supongamos que tenemos un array de números y queremos imprimir cada número en la consola, algo muy sencillo. Aquí es cómo lo haríamos con forEach:

let numeros = [10, 20, 30, 40, 50];
numeros.forEach(function(numero) {
    console.log(numero);
});

En este caso, forEach está recorriendo cada elemento del array numeros y está pasando cada uno de los valores a la función callback. La función callback se ejecutará tantas veces como las necesarias hasta acabar el array, haciendo la impresión de su valor en la consola.

Ahora vamos a ver un ejemplo un poco más elaborado en el que queremos mostrar un listado de opciones en un supuesto menú con el índice que ocupa cada una en el array. Pero no queremos la opción empezando en cero como hacen los índices normales, sino empezando en uno.

Además, para este ejemplo vamos a usar una función flecha de Javascript, para que veamos que también podemos alimentar el método forEach con este tipo de funciones, lo que nos dará como resultado un código bastante más compacto:

let opciones = ['Abrir', 'Guardar', 'Cerrar'];
console.log('Elige una opción');
opciones.forEach( (opcion, index) => console.log(`${index + 1}: ${opcion}`));

Por supuesto, podemos tener arrays más complejos, donde cada uno de sus elementos sea un objeto y los podemos recorrer fácilmente haciendo cosas con cada uno de esos objetos.

Supongamos que tenemos un array de objetos, donde cada objeto representa un país con las propiedades: nombre, capital y poblacion, para ver un recorrido forEach que nos permita imprimir la información de cada país en la consola:

let paises = [
    { nombre: 'España', capital: 'Madrid', poblacion: 48000000 },
    { nombre: 'Francia', capital: 'París', poblacion: 70000000 },
    { nombre: 'Alemania', capital: 'Berlín', poblacion: 40000000 },
];

paises.forEach(function(country) {
    console.log(`El país ${country.nombre} tiene como capital ${country.capital} y población es de ${country.poblacion}`);
});

Este código imprimirá una línea para cada uno de los paises en la consola. En esa funciona mostraremos el nombre del país, su capital y su población. La función forEach llama a la función callback una vez para cada objeto que hay en el array, que encontrarnos en el parámetro pais.

Beneficios de usar forEach

Ahora vamos a ver algunas de las ventajas que encuentras al usar forEach sobre otros métodos para recorrer un array:

• Claridad y legibilidad: El uso de forEach puede hacer que el código sea más claro y fácil de leer. Es un poco más semántico, ya que se expresa con el nombre de un método y nos dispensa de especificar variables locales para tener que usarlas de índices para poder acceder a los elementos del array.
• Evita errores comunes: forEach maneja automáticamente la iteración sobre el array, por lo que es imposible equivocarse al manejar los índices o cometer fallos que nos lleven a meternos en un bucle infinito.
• Encapsulamiento de lógica: forEach permite encapsular la lógica de procesamiento de los elementos del array en una función. Habitualmente esa función solo la queremos expresar una única vez, por lo que usamos muy comúnmente funciones anónimas, pero nada nos impide que esa lógica la tengamos en una función con nombre que podemos usar en repetidas ocasiones, o incluso suministrar esa función con un método de un objeto.

Algunas limitaciones del método forEach para iteraciones sobre arrays

Aunque forEach es muy útil y práctico, también queremos señalar algunas limitaciones a la hora de usarlo en los programas.

• Este modelo de bucle no se puede interrumpir: como sabes, existe la instrucción break que podemos ejecutar dentro de un bucle tradicional, como for o while, sin embargo, esta instrucción no la puedes usar para interrumpir un bucle forEach.
• No encaja con funciones asíncronas: forEach no espera a que las promesas se resuelvan antes de pasar al siguiente elemento del array, por lo que no podemos usarlo si para cada uno de los elementos necesitamos esperar a que se realice un comportamiento asíncrono. En este caso sería más adecuado pensar en usar el método map creando todos los comportamientos en un Promise.all, o usar un bucle for...of con async / await.