O Método Reduce

Parte da seção Lógica & Fluxo do Journey de JavaScript da Coddy — lição 54 de 65.

O método reduce() permite que você "reduza" um array a um único valor, executando uma função fornecida para cada elemento do array. Este valor único pode ser um número, string, objeto ou até mesmo outro array.

Aqui está a sintaxe do reducer:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // retorna o valor atualizado do acumulador
}, initialValue);

Componentes Principais:

accumulator: Acumula os valores de retorno do callback (pense nisso como o total acumulado)

currentValue: O elemento atual sendo processado no array

currentIndex: (opcional) O índice do elemento atual

array: (opcional) O array sobre o qual reduce() foi chamado

initialValue: (opcional) Um valor para usar como o primeiro argumento para a primeira chamada da função de callback

Por exemplo - soma de números:

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

Como Funciona Passo a Passo:

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

// Saída:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Resultado final: 10

Desafio

Fácil

Crie uma função chamada calculateGroceryTotal que recebe um array de objetos representando itens de mercearia.

Cada objeto possui duas propriedades:

name: string (nome do item)
price: number (preço do item)

A função deve:

Calcular o custo total de todos os itens
Aplicar um desconto: - Se o total for superior a 100, aplique 10% de desconto
Se o total for superior a 50, mas inferior ou igual a 100, aplique 5% de desconto
Sem desconto para totais de 50 ou menos.

Retornar um objeto contendo:

originalTotal: a soma antes do desconto
discount: o valor economizado
finalTotal: o valor final após o desconto

Folha de consulta

O método reduce() reduz um array a um único valor, executando uma função para cada elemento:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // retorna o valor atualizado do acumulador
}, initialValue);

Componentes Principais:

accumulator: Acumula os valores de retorno do callback (total acumulado)
currentValue: O elemento atual sendo processado
currentIndex: (opcional) O índice do elemento atual
array: (opcional) O array sobre o qual o reduce() foi chamado
initialValue: (opcional) Valor inicial para o acumulador

Exemplo - soma de números:

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

Execução passo a passo:

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

// Saída:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Resultado final: 10

Experimente você mesmo

function calculateGroceryTotal(items) {
    // Escreva o código aqui
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // Arredondar para 2 casas decimais
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}