Los métodos de JavaScript son funciones que pertenecen a un objeto en específico. Por ello, son una parte muy importante en la programación funcional, que se basa en utilizar funciones para crear un código más eficiente y automático. En este post, te enseñaremos qué es y cómo se utiliza el método forEach en JavaScript para manipular el contenido de un array.
¿Los arrays tienen métodos?
En nuestro post sobre los objetos de JavaScript te hemos introducido a la idea de que prácticamente todo elemento en este lenguaje de programación actúa como un objeto, pues es parte de la cadena de prototipos y tiene funciones que lo acompañan. Por ello, los arrays, también conocidos como listas de elementos, tienen métodos. Estos métodos son muy útiles a la hora de recorrer, añadir, filtrar y modificar sus elementos.
Si quieres saber más sobre cómo funcionan los métodos de un array, te invitamos a leer nuestro post sobre los arrays y la programación funcional. A continuación, te explicaremos cómo funciona uno de ellos: el método forEach en JavaScript.
¿Qué es el método forEach de JavaScript?
El método forEach de JavaScript es uno de los tantos métodos que están disponibles para modificar el contenido de un objeto array en este lenguaje de programación. Para conocer más sobre los distintos métodos que podemos utilizar, puedes leer este post de Vincent Will o nuestro post sobre los arrays y la programación funcional en JavaScript.
En especial, este método nos permite recorrer todos los elementos de un array y ejecutar una acción para cada uno de ellos. Esto se hace insertando como parámetro una función de estilo arrow function. La escritura de esta función es indiferente, pues tendrá efecto sin importar si se escribe con uno u otro nivel de simplificación. Si tienes dudas sobre este tema, te invitamos a leer nuestro post sobre cómo escribir un arrow function en JavaScript.
Recuerda que cada vez que insertamos una función como parámetro en JavaScript, entramos al territorio de los callback.Antes de profundizar en cómo utilizar el método forEach de JavaScript, para aprender más acerca de dicho método te invitamos a leer nuestro post sobre el método forEach en JavaScripit o el post de la página oficial de Mozilla Developer Network.
¿Cómo funciona el método forEach en JavaScript?
Al igual que los demás métodos que podemos ejecutar para un array, sobre los que puedes leer en este post de Vincent Will, el método forEach nos permite ejecutar una acción para todos los elementos que componen nuestra lista o array.
Entonces, ¿qué hace el método forEach en JavaScript? Pues este método nos dice que, dado un array cualquiera, aplicamos el método e insertamos una función. La función que se inserte se ejecutará una vez para cada uno de los elementos de nuestro array. A continuación, te mostramos un ejemplo:
[1, 2, 3].forEach(val => console.log(val))Lo que estamos ejecutando en el método anterior es que, dado el array que contiene los elementos 1, 2 y 3, creamos una función que pinta cada uno de estos valores. Esta es una manera de recorrer los elementos de un array de una forma funcional, en vez de utilizar un bucle for. La diferencia entre estas dos opciones es que el bucle for nos permite detener la repetición con el comando break. En un forEach no tenemos control sobre el recorrido.
Ten presente que, cuando insertamos una función como el parámetro de un método, estamos entrando en el territorio de los callback. Si no conoces nada sobre este territorio o simplemente quieres un repaso, te invitamos a leer nuestros posts sobre qué son los callback y cómo utilizarlos en JavaScript.
Dentro de nuestro callback, debemos definir un arrow function que nos diga que para cada elemento o valor se creará determinada función. La forma en la que escribas esta función es indiferente, pero nosotros lo hemos hecho con el símbolo =>. Te presentamos otro ejemplo en las siguientes líneas de código:
const array1 = ['a', 'b', 'c'];
array1.forEach (element => console.log (element.toUpperCase()));Lo que hace la función anterior es, dado el array 1 que llamamos justo antes del método, se aplicará una función en la que cada uno de sus elementos se pinta en mayúsculas. Como ves, podemos denominar el elemento con cualquier palabra que deseemos. En estos casos hemos usado element o val, pero tu puedes elegir la que más se ajuste a tu proyecto.
En este caso, la función hace que cada elemento se pinte en mayúsculas usando el comando console.log y el método object.toUpperCase. Entonces, el resultado de este código serán las siguientes líneas de código:
>'A'
>'B'
>'C'Algo que debemos tener muy en cuenta a la hora de utilizar el método forEach en JavaScript es que este no devuelve ningún valor. Por lo tanto, si, por ejemplo, tenemos la siguiente constante igualada a un método forEach, no obtendremos ningún valor:
const array2 = array1.forEach (element => console.log (element.toUpperCase()));Al pintar esta constante usando el comando console.log (array2) obtendremos un resultado undefined, pues este método no nos devuelve valores nunca.
¿Cómo utilizar el método forEach de JavaScript?
Como has podido ver, el método forEach es muy importante para la programación funcional, pues nos permite recorrer elementos de un array de manera simple. Ahora, te mostraremos un ejemplo de cómo utilizar el método forEach de JavaScript para recorrer bucles. En nuestro post sobre cómo crear una planificación en JavaScript, hemos creado dos bucles for para conformar una matriz. A continuación, utilizaremos el forEach para recorrer el contenido de estos bucles.
Lo bueno de utilizar el método forEach de JavaScript para recorrer un bucle es que no necesitamos preocuparnos por el punto en el que se detiene el bucle ni el incremento con el que sucede cada iteración. Entonces, supongamos que tenemos la siguiente función:
this.matchDaySchedule = [ ];
const numberOfMatchDays = this.teams.lenght -1;
const numberOfMatchesPerMatchDay = this.teams.lenght / 2;
for (let = 0; i numberOfMatchDays; i++) {
const matchDay = [ ]
for { let j = 0; j < numberOfMatchesPerMatchDay; j++) {
let match = {home: 'home', away: 'away'}
matchDay.push (match);
}
this.matchDaySchedule.push (matchDay);
}
}Observa que la función anterior tiene dos bucles for, uno que controla la variable numberOfMatchDays y otra que controla la variable numberOfMatchesPerMatchDay. Esta función ha creado varias jornadas que se ven de la siguiente manera y se insertan progresivamente:
matchDay 0
{home: ‘home’, away; ‘away’}
{home: ‘home’, away; ‘away’}Ahora, te enseñaremos cómo utilizar el método forEach de JavaScript para recorrer cada una de estas jornadas. Recuerda que este método nos permite insertar una función que se ejecutará una vez por cada elemento. Entonces, escribiremos las siguientes líneas de código:
setLocalTeams ( ){
this.matchDaySchedule.forEach (matchDay => {
matchDay.forEach (match => {
match.home = 'LOCAL';
})
}
}Lo que hace la función anterior es utilizar la función matchDaySchedule y definir una función para cada uno de los elementos matchDay, que representan las jornadas.
- Luego, insertamos un arrow function con el símbolo de flecha => .
- Dentro de esta función, insertamos otro forEach para hacer que el método recorra cada partido. Esto lo hacemos porque dentro del array de jornadas existen distintos elementos match o partidos.
- Finalmente, dentro del partido hacemos que cada propiedad home esté igualada al string ‘LOCAL’.
El resultado de esta función o método es que todas nuestras jornadas tendrán como valor de la clave home al string ‘LOCAL’.
Ahora, si queremos reemplazarlo por un nombre de equipo, deberemos crear una nueva variable. En nuestro post sobre cómo crear un directorio de clases puedes ver el código en el que nos basamos para añadir un nombre de equipo al partido. Entonces, insertamos la siguiente variable al inicio de nuestra función setLocalTeams:
const teamNames = this.teams.map (team => team.name);¿Cómo saber más sobre el método forEach en JavaScript?
Después de leer este post, sabes todo lo necesario sobre el método forEach en JavaScript y has dado un gran paso en tu camino hacia dominar este lenguaje de programación. Ahora, el siguiente paso es dedicarte por completo a aprender y practicar su desarrollo. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses, incluyendo lenguajes de programación como JavaScript, HTML y CSS. ¡Anímate a matricularte!
