En JavaScript, existen muchas funciones que nos facilitan la ejecución de diversas acciones. Bajo esta categoría, están los métodos que nos permiten manipular los elementos de un listado u objeto array. Entre los más populares están los métodos map, reduce, filter y forEach. En este post, te enseñaremos cómo escribir el método forEach en JavaScript para que lo uses en tus propios proyectos.
¿Qué es el método forEach en JavaScript?
En nuestro post sobre el método forEach en JavaScript te hemos explicado que 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 dentro del paréntesis del método se ejecutará una vez para cada uno de los elementos de nuestro array. Esto quiere decir que el método forEach nos permite pasar una función cualquiera por cada uno de los elementos de un array.
Particularidades del método forEach JavaScript
La particularidad de este método es que, a diferencia de métodos como map y filter, este no nos devuelve un nuevo array con los elementos manipulados. Para ello, deberemos insertar como parte de la función un comando console.log, responsable de pintar por pantalla. A continuación, te ponemos dos ejemplos.
Primer ejemplo:
[1, 2, 3].forEach(val => console.log(val))
Segundo ejemplo:
const array1 = [‘a’, ‘b’, ‘c’];
array1.forEach (element => console.log (element.toUpperCase()));
Como puedes ver, podemos escribir el método forEach en JavaScript llamando al array por su nombre o insertándolo directamente. Pero todavía hay más opciones y, a continuación, te las presentamos.
¿Cómo escribir el método forEach en JavaScript?
Al consultar la página de Mozilla Developer Network sobre la función array.prototype.forEach, veremos que la sintaxis que nos propone es la siguiente:
arr.forEach(function callback(currentValue, index, array) {
// tu iterador
}[, thisArg]);
Entonces, primero hay un array original, luego el método y, finalmente, un callback. Recuerda que llamamos callback a toda función que se use como parámetro. Este callback estará formado por un valor actual, que en nuestro caso está escrito como element en un ejemplo y val en el otro. Hasta ahí, esto es igual a lo que hemos hecho antes.
Ahora, lo que nos añade esta sintaxis son los parámetros index y array. Ten presente que estos parámetros son opcionales, por eso nuestros ejemplos funcionan sin ellos. El parámetro index se refiere al orden de los elementos o índice de nuestro array. Por su parte, el parámetro array se refiere al elemento en el que estamos aplicado el método forEach, es decir, el array original.
En Visual Studio Code, cuando empezamos a escribir el método forEach en JavaScript, el ayudante del software también nos enlistará los parámetros de esta sintaxis. Ahora que ya conoces un poco mejor estos parámetros opcionales, es el momento de probarlos al añadirlos en una función:
setAwayTeams ( ) {
this.matchDaySchedule.forEach (matchDay => {
matchDay.forEach (function (currentValue, index) {
if (index === 0) {
match.away = this.teams (this.teams.lenght -1).name
}
La función anterior utiliza el parámetro nuevo de index para crear una función en la que, si el índice es igual a cero, sucederá una acción. Esto se hace con la ayuda de la palabra clave if. De este modo, podemos insertar otros parámetros al escribir el método forEach en JavaScript y utilizarlos para guiar su comportamiento. En este caso, lo que estamos diciendo es que una acción estará disponible solo para el primer elemento del array, al cual se le atribuye la posición cero.
Para simplificar esta función, podemos hacer uso de variables. Entonces, el código final quedaría como el que ves a continuación:
setAwayTeams ( ) {
const teamNames = this.teams.map (team => team.name);
let maxAwayTeams = this.teams.lenght – 1;
this.matchDaySchedule.forEach (matchDay => {
matchDay.forEach (function (match, index) {
if (index === 0) {
match.away = teamNames [maxAwayTeams]
}
Te recomendamos hacer uso de las variables para definir valores complejos en forEach JavaScript, pues pueden ayudarnos a mantener un código flexible y simplificar nuestras acciones.
¿Cómo saber más sobre el método forEach en JavaScript?
Después de leer este post, sabes exactamente cuáles son las distintas formas de escribir 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!
