Javascript reduce(): cómo funciona el método con ejemplos

let result = array.reduce((acc, v, i, a) => {
// devuelve el nuevo valor a la variable 
}, initVal);

// result - el único valor que se devuelve.
// array - el array sobre el que se ejecuta la función de reducción.
// acc - el acumulador acumula todos los valores devueltos.
// v - el valor actual que se está procesando
// i - el índice actual del valor que se está procesando.
// a - el array original
// initVal - un valor inicial que se proporciona de forma opcional.
// Si no se proporciona el valor inicial,
// se usa el elemento 0 como valor inicial.

El método de javascript reduce se puede ver como un bucle for pensado específicamente para usar los valores de un array y construir con ellos algo nuevo. Échale un vistazo a este ejemplo.

var array = [11, 12, 13, 14];
var sum = 0;
for(var i = 0; i  < array.length; i++) {
      sum += array[i];
 }

// sum = 50

El objetivo del código de arriba es encontrar la suma de todos los valores de nuestro array. Sí, funciona, pero hay una forma más sencilla de conseguir el mismo resultado.

Vamos a refactorizar la función anterior con el método de javascript reduce().

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v);
// sum = 50

El mismo resultado sin un solo bucle.

Hemos usado la variable bcc para representar nuestra concatenación. Como nuestro reduce() recorre el array, el valor de bcc va creciendo hasta que la función termina.

¿Te acuerdas de que dije que podíamos usar un valor inicial opcional? Es muy fácil de poner en marcha. Vamos a usar el mismo ejemplo de antes: sumaremos nuestro array, pero esta vez queremos empezar con un valor inicial de 250.

¿Qué pinta tiene cuando empezamos con un valor inicial de 250? Basta con mirar el ejemplo de abajo para saberlo.

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v, 250);

Como ves, el código de arriba es casi idéntico al del ejemplo anterior. Lo único que ha cambiado es que hemos añadido un segundo argumento después del callback. He pasado el número 250 como punto de partida. Ahora, cuando ejecutamos la función, la suma será igual a 300.

Espero que te sirva. Tienes más artículos sobre Javascript y, en concreto, sobre arrays de javascript, por ejemplo para saber cómo fusionar dos arrays de Javascript.