Entendo o Reduce do JavaScript

Ainda não conseguiu entender o reduce() ou não conhece?

reduce em JavaScript

Devido ao ES6 o reduce() acabou de popularizando juntamente com o map() e ofilter(). Sua função é reduzir um array gerando um único valor podendo ser um array, object ou number.

Vamos ver uma forma bastante usual do reduce() que é a soma de números:

let numbers = [11, 22, 33, 44, 55];
let sum = numbers.reduce(
(accumulator, number) => accumulator + number
);
console.log(sum) // resultado da soma

Vamos entender o reduce() de forma simples.

Temos quatro parâmetros para o reduce().

1. Acumulador. Valor inicial que irá acumular a cada iteração(obrigatório).
2. O valor atual o elemento que está sendo iterado(obrigatório).
3. O índice do elemento atual(não obrigatório).
4. O array original(não obrigatório).

E se o valor inicial não for passado? O valor será o primeiro elemento da lista.

O valor que irá retornar de uma iteração reduce() é atribuída ao acumulador(valor inicial). A cada iteração no array é atualizado o valor do acumulador que no fim retornará um valor único.

const prices = [1500, 997, 4997, 1299];
const total = prices.reduce((acc, item) => acc + item);
console.log(total);

No exemplo acima, o primeiro item do array é o valor inicial 1500. A cada iteração o valor inicial irá acumular com o próximo, resultando em 8793.

1500 + 997 = 2497 (valor acumulado)

2497 + 7997 = 7494 (valor acumulado)

7494 + 1299 = 8793 (resultado)

Veja que a cada iteração o valor é somado e acumulado. Retornando um valor único.

Com esses exemplos simples você pode captar a ideia do reduce() que é por essência retornar um valor único após um iteração em um array.