Función reduce() en Javascript

La función reduce() es una de las tantas funciones que tiene JS que hacen cosas extraordinarias, sin embargo a muchos programadores incluyéndome nos ha costado un poco entenderla. Una vez que me toco entrar al mundo de React JS, entendí que si no profundizaba en la compresión de este tipo de funciones como por ejemplo(map, filter, reduce), no lograria escribir código mas limpio y de mas calidad.

En este ejemplo les iré mostrando la funcionalidad de dicha función, antes de empezar vamos a leer la definición de reduce():

El método reduce() aplica una función a un acumulador y a cada valor de una array (de izquierda a derecha) para reducirlo a un único valor.

Super claro verdad ?, bueno, en realidad la primera vez que leí este concepto no lo entendí del todo, soy honesto, para todas aquellas personas que se identifican conmigo vamos a ver unos ejemplos que nos permitan entender mas a fondo como emplear esta maravillosa función.

const suma = [10,20,30].reduce((a,b) => a + b);
console.log(suma);

Lo que intentamos hacer es sumar todos los elementos de una array y retornar el total de la suma. Podemos observar que el método reduce(), puede ser implementado directamente al array, luego dentro del array voy a invocar a una función que se encargara de procesar la tarea a realizar.

La función utilizada dentro de reduce es el equivalente en ES6 de:

const suma = [10, 20, 30].reduce(function(a, b){return a + b});

(a, b) son los parámetros que recibe la función, es nuestro ejemplo a = 10 y b = 20. Nuestra función retorna la suma de ambos, es decir 30. Debido a que existen más elementos en el array, la función reduce() es invocada nuevamente, la diferencia radica en que el parámetro “a” ahora es igual a 30 (representa el monto acumulado) y “b” es el elemento restante en el array, es decir 30. Al concretarse la operación el resultado que será mostrado en consola es ahora igual a 60.

En el ejemplo siguiente voy a mostrar como podemos contar la cantidad de nombres repetidos en un aula de clase.

const nombres = ['Alfonso','Pedro','Fili','Jonatan','Kaki','Jonatan','Pedro']
const countNombres = nombres.reduce((countname, nombre) =>{
    countname[nombre] = (countname[nombre]||0) + 1; 
    return countname
},{});
console.log(countNombres);
//{Alfonso: 1, Pedro: 2, Fili: 1, Jonatan: 2, Kaki: 1}

En el código anterior tenemos un array de nombres. Para lograr contarlos, llamo a la función reduce() y dentro de ella paso una función como parámetro que a su vez recibirá sus propios parámetros (countname, nombre), nombre representa cada elemento del array y countname será una objeto donde guardaré la cantidad de veces que un nombre se repita. A diferencia del ejemplo anterior donde retornábamos un array, aquí el resultado será un objeto, por lo tanto a la función reduce, debo pasarle un parámetro más, que en este caso es un objeto vacío y representa el estado inicial de mi contador de nombres.

Conclusión

La función reduce() permite lograr objetivos que generalmente de manera estructurada cuestan un poco de trabajo lograr. El dominio de este tipo de funciones nos permitirán escribir código más limpio y mucho más fácil de leer. Es cierto que a veces vemos ejemplos que por su complejidad parecen muy difíciles de replicar o aprender, en todo caso te invito a seguir practicando y poco a poco te aseguro que lograrás comprender hasta el mas complejo de los ejemplos, después de todo como dicen por allí, la práctica hace al maestro.