Programación Funcional con Javascript — Higher Order Functions (Reduce 1/2)

En este articulo aprenderemos sobre otra Higher Order Function: Reduce!! En los artículos anteriores aprendimos sobre Map y Filter, ambas Higher Order Functios, estas dos ultimas son “List Transformation Functions”, convierten tu lista en algo más, pero son muy específicas. Al contrario, Reduce puede ser usada para expresar cualquier transformación de lista. De hecho puedes utilizar Reduce para implementar funciones como Map y Filter.

Reduce puede ser usada en caso de que no encuentres alguna función de “List Transformation” que encaje específicamente en tu problema.

Ya bueno, veamos código:

let pokeBalls = [
 { price : 230 },
 { price : 300 },
 { price : 150 },
 { price : 600 }
]

Nuestra misión es sumar todos los precios de las pokeball~ But first:

let total = 0;
for ( let i = 0; i < order.length; i++){
 total += pokeBalls[i].price;
}

Creamos una variable total e iteramos en el arreglo de pokeBalls, para cada Pokeball tomaremos el precio y la agregaremos al total. Hagamos esto con reduce

let total = pokeBalls.reduce( (sum, pokeBall) => {
 return sum + pokeBall.price;
},0)

Tal como map o filter, reduce es una función en el Array Object, y al igual las anteriores recibe una función callback, pero a diferencia de estas, reduce espera un Object como respuesta. El 0 como un punto de partida para nuestra suma sum será pasado como nuestro primer argumento en el callback; reduce va a recibir además un item sobre el cual iteraremos pokeBall como segundo argumento.

Ahora, tomamos el valor de sum que recibimos y le vamos a adicionar el price de la pokeBall y así para cada iteración hasta obtener el resultado.

Confuso? Bueno, podemos verlo así:

Con el console.log que imprimimos dentro de nuestra función podemos ver que el valor de sum se inicializa en 0 y al ser sumado al price del item pokeBall actualizará el valor de sum , este será pasado en cada iteración con el nuevo valor junto al item pokeBall, hasta haber hecho lo mismo para todos los items del arreglo.

Como comenté en el articulo anterior con ES6 y Arrow Functions podemos incluso tener una función mucho mas corta:

Este ejemplo es totalmente básico, así que haré un segundo articulo en el que explique mejores casos de uso para esta Higher Order Function. Pero si no quieres esperar hasta el próximo domingo, te recomiendo ver la documentación de MDN Web Docs sobre Reduce 😃