JavaScript РM̩todo Reduce para Arrays

Método Reduce en JavaScript

Hola buenas a todos, hoy vamos a ver un poco de programación funcional en JavaScript, en este pequeño articulo vamos a ver el método Reduce, todos los arreglos que definamos tienen este método por defecto, puede ser numérico, string, objeto, etc.

Por ejemplo, tenemos el siguiente array con algunos valores cargados:

const numbers = [1, -1, 2, 3];

Lo que comúnmente se podría hacer es recorrer el array y sumar cada valor a una variable que definamos para poder acumular los valores:

let sum = 0;

for (let n of numbers)
    sum += n;

console.log(sum);

Ahora vamos a ver una forma de hacer lo mismo pero de manera mas simple y en pocas lineas.

Aquí interviene el método “Reduce”, en este ejemplo este método lo que hace es reducir todos los valores de nuestro array y simplificarlo en uno solo numero, este seria la suma de todos sus elementos:

let sum2 = numbers.reduce((acumulador, valorActual) => {
    return acumulador + valorActual;
}, 0);
console.log(sum2);

Este metodo toma una “callback function” con dos parámetros, acumulador (va a guardar los valores sumados) y valor actual (corresponde a el elemento que se va a adicionar al acumulador). El “0” va a ser el valor inicial que va a tomar el acumulador.

En detalle lo siguiente es lo que hace el codigo paso a paso:

/*
    a = 0, v = 1 => a = 1
    a = 1, v = -1 => a = 0
    a = 0, v = 2 => a = 2
    a = 2, v = 3 => a = 5
*/

En detalle

Como podemos ver realiza 4 iteraciones:

• Primera el acumulador, “a”, tiene el valor 0, y v, “valorActual”, tiene 1, que se corresponde con la primera posición del array, hace la adición y “a” pasa a tener el valor 1.
• Segunda iteracion “a” tiene 1 y “v” tiene -1, segunda posición del array , hace la adición y “a” tiene 0 como valor.
• Tercera iteracion “a” tiene 0 y “v” tiene 2, tercer posición del array, hace la adición y “a” tiene como valor 2.
• Cuarta y ultima iteracion, “a” tiene 2 y “v” tiene 3, ultima posición del array, hace la adición y “a” pasa a tener el valor 5.

Al mostrar por consola podremos ver que la variable sum2 tiene por valor 5.

Ahora vemos el mismo ejemplo pero sin el parametro 0.

let sum2 = numbers.reduce((acumulador, valorActual) => {
    return acumulador + valorActual;
});
console.log(sum2);

Esto lo único que cambia es el valor inicial del acumulador pero automáticamente el acumulador tiene el valor de la primera posición del array.

/*
    a = 1, v = -1 => a = 0
    a = 0, v = 2 => a = 2
    a = 2, v = 3 => a = 5
*/

En este caso nos reduce a 3 iteraciones.

Ahora podemos simplificar un poco mas el codigo y es un poco mas mantenible.

Vamos a sacar las llaves, el return y va a quedar de esta forma:

let sum2 = numbers.reduce(
    (acumulador, valorActual) => acumulador + valorActual
);
console.log(sum2);

Como podemos ver los 3 ejemplos son validos y cumplen con su función.

Espero les sea de utilidad este ejemplo.

Saludos.

Jlopezjujuy

administrator