Utilizar el método reduce de JavaScript

Autor: | Última modificación: 12 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

En JavaScript, existen muchos métodos que nos permiten acceder a los elementos de un array, ya sea para analizarlos o para manipularlos. Dentro de estas funciones, el método reduce nos permite manipular un array para obtener un único valor como resultado. En este post, te enseñaremos cómo utilizar el método reduce de JavaScript en contextos prácticos.

¿Qué es el método reduce?

El método reduce de JavaScript nos permite, como su nombre indica, reducir el array insertado a un solo valor. Esta reducción se da a partir de una función que insertamos como parámetro. Es decir, para ejecutar este método usaremos un callback. Además, insertaremos un valor inicial para crear la secuencia de reducción. Te invitamos a leer nuestro post sobre el método reduce de JavaScript para conocer más sobre sus propiedades y funcionamiento.

Al utilizar el método reduce de JavaScript, te recomendamos insertar primero el parámetro de valor inicial. Aunque este parámetro va después del callback, te recomendamos abrir el paréntesis e, inmediatamente, insertar la coma y, después, el valor inicial. Te decimos esto porque es muy fácil olvidar este parámetro cuando escribimos la función de reducción. Entonces, será complejo entender por qué se producen los errores y por qué la función no se ejecuta como queremos.

Ahora que conoces la teoría, te explicaremos cómo utilizar el método reduce de JavaScript en un contexto más práctico.

¿Cómo utilizar el método reduce de JavaScript?

Utilizar el método reduce de JavaScript nos puede ayudar a crear acumulados de datos. Supongamos que estamos programando un proyecto en el que debemos crear una liga de fútbol. Entonces, cuando queramos crear la de clasificación para definir al ganador, necesitaremos programar una acción que acumule los goles metidos por cada equipo para conocer el número total de goles metidos durante la liga.

Para crear este acumulado, podemos acceder a nuestra clase hipotética footballLeague, que contiene el array ‘teams’. Este array tiene distintos equipos que, a su vez, tienen la propiedad goalsFor. Entonces, podemos escribir las siguientes líneas de código y utilizar el método reduce de JavaScript para crear el acumulado de goles a favor:

const totalGoals = footballLeague.teams.reduce ((accumulated, currentValue) => {

return accumulated + currentValue.goalsFor

}, 0)

console.log (‘Total goals are ${totalGoals}’)

En estas líneas de código hemos definido que el método reduce empiece con el valor 0 y luego va sumando progresivamente el valor de la propiedad goalsFor de cada equipo. Entonces, lo que hará el método será recorrer el array y sumar el valor de esta propiedad de cada elemento del array para devolvernos un único valor final. Luego, creamos un string con la variable totalGoals para pintar en pantalla el resultado que nos devuelve ese método.

De este modo, podemos utilizar el método reduce de JavaScript para obtener acumulados de las distintas propiedades de los elementos de un array. Ten presente que, además del callback y el initialValue, puedes pasar otros parámetros por este método. Puedes, por ejemplo, añadir el índice para definir en qué elemento debe empezar el recorrido.

Para conocer más sobre los demás parámetros opcionales que puedes agregar, te invitamos a leer el post de la MDN sobre el método reduce.

¿Qué sigue?

Ahora que sabes cómo utilizar el método reduce de JavaScript en contextos más prácticos, puedes ver que aprender a programar es mucho más fácil con la práctica. Por ello, te invitamos a formar parte del Desarrollo Web Full Stack Bootcamp, donde encontrarás la mezcla perfecta entre teoría y práctica. ¡Te convertirás en un experto en desarrollo web en pocos meses! ¡No lo dudes más e inscríbete!

👉 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]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software 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! 

¿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!