El método Reduce

Parte de la sección Lógica y Flujo del Journey de JavaScript de Coddy — lección 54 de 65.

El método reduce() te permite "reducir" un array a un único valor ejecutando una función proporcionada para cada elemento del array. Este valor único puede ser un número, una cadena, un objeto o incluso otro array.

Aquí está la sintaxis del reducer:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // devuelve el valor actualizado del acumulador
}, initialValue);

Componentes clave:

accumulator: Acumula los valores de retorno de la función de rellamada (callback) (piensa en ello como el total acumulado)

currentValue: El elemento actual que se está procesando en el array

currentIndex: (opcional) El índice del elemento actual

array: (opcional) El array sobre el cual se llamó a reduce()

initialValue: (opcional) Un valor que se utilizará como el primer argumento en la primera llamada de la función callback

Por ejemplo - suma de números:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

Cómo funciona paso a paso:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// Output:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Final result: 10

Desafío

Fácil

Crea una función llamada calculateGroceryTotal que reciba un array de objetos que representan artículos de la compra.

Cada objeto tiene dos propiedades:

name: string (nombre del artículo)
price: number (precio del artículo)

La función debe:

Calcular el coste total de todos los artículos
Aplicar un descuento: - Si el total es superior a 100, aplicar un 10% de descuento
Si el total es superior a 50 pero inferior o igual a 100, aplicar un 5% de descuento
Sin descuento para totales de 50 o menos.

Devolver un objeto que contenga:

originalTotal: la suma antes del descuento
discount: la cantidad ahorrada
finalTotal: la cantidad final después del descuento

Hoja de referencia

El método reduce() reduce un array a un único valor ejecutando una función para cada elemento:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // devuelve el valor del acumulador actualizado
}, initialValue);

Componentes clave:

accumulator: Acumula los valores de retorno de la función callback (total acumulado)
currentValue: El elemento actual que se está procesando
currentIndex: (opcional) El índice del elemento actual
array: (opcional) El array sobre el cual se llamó a reduce()
initialValue: (opcional) Valor inicial para el acumulador

Ejemplo - suma de números:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

Ejecución paso a paso:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// Salida:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Resultado final: 10

Pruébalo tú mismo

function calculateGroceryTotal(items) {
    // Escribe el código aquí
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // Redondear a 2 decimales
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}