¿Cómo escribir el método forEach en JavaScript?

Autor: | Última modificación: 6 de enero de 2023 | Tiempo de Lectura: 3 minutos
Temas en este post:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!