Este método no es de los más usados hasta que se descubre su potencia. Vamos a entender qué hace exactamente y en qué ocasiones puede ser de mucha utilidad.
Las bases
El método reduce() aplica una función de reducción a cada elemento de un array. Esta función de reducción la tendremos que definir y pasársela como parámetro. Normalmente le pasaremos dos parámetros:
-
La función de reducción
-
Valor inicial (opcional)
Al mismo tiempo, la función de reducción admite varios parámetros que habitualmente serán:
-
Acumulador
-
Valor actual
El valor que devolvamos en la función de reducción se irá acumulando en el acumulador, teniendo en cuenta el valor inicial indicado en el método reduce().
En caso de no indicar un valor inicial, entonces el primer elemento del array se usará como valor inicial. También hay otros parámetros opcionales que le podemos pasar a la función de reducción: el índice actual del array y el propio array sobre el que se ejecuta la función de reducción. Lo veremos en un ejemplo más adelante.
Al final, el método reduce() devuelve un único valor resultante de la reducción aplicada.
Para ver todo esto en acción veamos este ejemplo:
Tenemos un array con los valores que queremos usar. Definimos una función de reducción y la guardamos en la variable reductor. Esta función toma como parámetros el acumulador y el valor actual y devuelve la suma de ambos. Todo lo que hace es eso, los dos valores pasados como parámetro los suma y los devuelve.
Entonces tenemos dos ejemplos:
-
Reduce sin pasar valor inicial: lo que sucede es que el valor inicial será el primer elemento del array de valores, por lo que la función de reducción se aplicará a partir del segundo elemento del array. El valor inicial acaba siendo 1 y luego, por cada uno de los elementos restantes del array, se aplica la función de reducción pasando el acumulador (que empieza siendo 1) y valor actual del array. Al final el resultado es 1+2+3+4 = 10
-
Reduce pasando valor inicial 5: como tenemos valor inicial, la función de reducción que hemos definido empieza a aplicarse a partir del primer elemento del array, siguiendo la misma lógica. Por lo tanto, el resultado es 5+1+2+3+4 = 15.
Entendiendo la base de cómo funciona, podemos pasar a ver ejemplos más interesantes. La clave está en la función de reducción. Es donde podemos aplicar toda la lógica que queramos.
Obtener la media a partir de una serie de valores
Imagina que a final de año quieres saber cuánto te has gastado en el súper de media cada mes. En este ejemplo vamos cómo obtener el dato aplicando una función de reducción:
En este ejemplo tenemos un array de tickets. Cada ticket es un objeto con el nombre del mes y el total gastado.
En esta ocasión, definimos la función de reducción pasándole también los parámetros opcionales indice y array. El primero es para controlar el índice del array de la iteración actual, mientras que el segundo el el propio array (en nuestro caso tickets.
Recuerda que el método reduce() ejecutará la función reductora a cada uno de los elementos del array tickets. Por eso, para obtener la media, tenemos que saber cuándo hemos recorrido todo el array. De ahí la necesidad de pasar esos parámetros opcionales.
Quédate con la idea de que el valor devuelto por la función reductora en cada iteración, sirve como valor inicial para la siguiente. Por eso, en este ejemplo devolvemos el acumulador total mientras no hemos recorrido todos los elementos del array de tickets.
Contar el número de elementos de cada tipo en una colección
Viendo los ejemplos anteriores quizá pienses que el método reduce() solo es aplicable a valores numéricos, pero vamos a ver un ejemplo para demostrar lo contrario.
En este caso vemos que lo que conseguimos es que, a partir de un array con una colección de elementos que contiene repetidos, obtenemos un objeto que nos dice cuántos elementos hay de cada tipo.
La función reductora tiene como parámetros el acumulado, que será un objeto y el valor inicial, que será un objeto vacío.
Concatenando la ejecución de funciones
¿Pensabas que ahí quedaba todo? Pues no. Podemos hacer algo similar con funciones. Imagina que tienes una serie de funciones que deben ejecutarse una tras de otra sobre un mismo elemento.
Un carrito de la compra por ejemplo, en el que en el subtotal se le aplica un descuento del 5% y después se le suma el IVA. Podemos agrupar este proceso.
Primero hemos definido las funciones descuento y sumaIVA21. Estas funciones simplemente restan el descuento del 5% y suman un IVA del 21%.
Luego, guardamos en un array las funciones que queremos concatenar. En este caso son esas dos funciones, pero puedes poner todas las que quieras. Si ponemos la función de descuento dos veces, se aplicará dos veces el 5% de descuento. ¿pillas la idea?
La función reductora recibe como parámetro el total acumulado y la función que hay que ejecutar. Al método reduce() le pasaremos la función reductora y el valor inicial, que en este ejemplo es 100.
Cuidado con calcular cantidades monetarias con JavaScript, para hacerlo te aconsejo usar Intl, puedes ver mi otro post sobre formateo de números en JavaScript con varios ejemplos.
¿Se te ocurren otras formas de aplicar el método reduce()? Pienso que es una de las funciones para arrays de JavaScript que no se suelen usar hasta que llevamos tiempo programando, cuando la verdad es que puede resultar muy útil en infinidad de casos desde un inicio.
Fuentes: