La programación funcional es un estilo de escritura de código que se basa en el uso de funciones para elaborar la mayoría de acciones de un proyecto. Esto se hace porque las funciones son un recurso muy útil para simplificar acciones complicadas. Dentro de este estilo de programación es muy común utilizar los métodos que nos ayudan a modificar arrays, también conocidos como listados de elementos. En este post, te enseñaremos cómo utilizar el método forEach de JavaScript para recorrer un array y darle una función específica.
¿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 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); Si tienes dudas sobre esta función, te recomendamos leer nuestro post sobre cómo funciona el método map en JavaScript.
Ahora que sabes cómo utilizar el método forEach de JavaScript, el siguiente paso es seguir aprendiendo la teoría para ponerla en práctica. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde no solo seguirás aprendiendo a dominar lenguajes de programación como CSS, HTML y JavaScript, sino que también pondrás en práctica estos conocimientos en tus propios proyectos guiados por nuestros profesores. ¿Te animas a dar el siguiente paso y a convertirte en un experto del desarrollo web? ¡Te esperamos!
