No JavaScript temos vários métodos a nossa disposição para trabalhar com arrays. Mas o reduce tem um objetivo muito especifico, vamos ao decorrer deste artigo entender melhor ele com exemplos que vão deixar bem claro! Antes de iniciar a explicação tenho um recado importante. É essencial ler com calma as explicações para que tudo fique claro, não basta apenas ler rápido o artigo. Você precisa ir praticando também e assim vai entendendo e ganhando experiência!
O objetivo do Reduce
Como o próprio nome sugere, tem como objetivo reduzir todos os elementos de um array para um único valor, que podemos considerar que será o total. Todos os elementos dentro do array serão ou somados, subtraídos, multiplicados ou divididos, tudo depende da lógica da função, que você vai passar como parâmetro dentro do reduce, mas existe um detalhe muito importante. Então para entender melhor, veja este exemplo bem simples:
const nums = [1, 2, 3, 4, 5]
const somar = (acc, el) => acc + el
const total = nums.reduce(somar)
console.log(total);
Como podemos ver o código acima temos nosso array de números. Temos uma função, em forma de arrow function, que se chama somar e em seguida o total, onde chamamos o método reduce. Dentro dele passamos a função anterior, que fará a operação matemática como primeiro parâmetro. O que o reduce faz? Ele vai acumular ou guardar a resposta de uma operação, para em sequência utilizar esse valor (que chamamos de acumulador) para somar com o próximo elemento do array.
Na função somar temos dois parâmetros, o acumulador e o elemento, que está representado por acc e el, neste caso o acumulador sempre será a soma dos dois primeiros elementos do nosso array, o resultado dessa soma será o acumulador. Então se iniciarmos a soma pegando os dois primeiros elementos do array, o resultado dessa soma é 3, esse é o valor que o reduce irá acumular. Esse resultado será somado com o próximo elemento do array, então temos 3 que é nosso acc (resultado de 1 + 2), e outro 3 que é el, este é a próxima posição do array. Se não entendeu sem problemas. Veja nessa ilustração para que fique bem mais claro:
Se você realizar o teste no seu browser ou com a extensão Code Runner, terá o resultado 15:
Vamos agora para outra característica do reduce.
Passando um acumulador como parâmetro
No exemplo anterior passamos apenas a função somar como parâmetro no reduce, mas se você colocar o cursor do mouse em cima do método reduce terá essa mensagem:
Vemos que podemos passar um segundo parâmetro, que pode ser um valor inicial (initialValue), para iniciar como um acumulador. Essa é uma característica muito importante. Isso é útil porque dependendo da sua necessidade será preciso ter um acumulador iniciar sem depender do resultado da soma dos primeiros elementos do array.
Então se você colocar reduce(somar, 1), o segundo parâmetro que estamos passando dentro do reduce, será o acumulador inicial. O el será 1 também, pois é o primeiro elemento que ele encontrará dentro do array, lembre se que no nosso array a primeira posição corresponde ao elemento de valor 1. Já que ele tem como acc inicial 1, o resultado será 16:
Ele está fazendo a mesma coisa que no exemplo anterior, mas neste caso estamos definindo um acumulador inicial, é importante que isso fique claro.
Trabalhando com array de objetos
Vai ser muito comum você ter que trabalhar com arrays de objetos, então não custa nada apresentar um exemplo para que tudo fique claro, o valores serão simbólicos não se assuste com o preço 😂. Vamos para o código:
const compra = [
{ produto: 'Pão', quantidade: 10, preco: 3.50 },
{ produto: 'Bolacha', quantidade: 9, preco: 2.50 },
{ produto: 'Nescau', quantidade: 9, preco: 5.50 },
{ produto: 'Biscoito', quantidade: 9, preco: 3 },
{ produto: 'Leite', quantidade: 9, preco: 2.20 },
]
const getTotal = item => item.quantidade * item.preco
const somar = (acc, el) => acc + el
const totalDeTudo = compra
.map(getTotal)
console.log(totalDeTudo)
No código acima temos objetos e a primeira coisa que estamos fazendo é calcular o preço total de cada produto, para obter o valor total da compra. Então no primeiro objeto ele irá multiplicar 10 por 3.50, e assim para os outros. Isso acontece porque na função que eu estou passando dentro do map, estou multiplicando quantidade por preço :
Agora quero saber o valor total dessa compra. Para isso basta adicionar o reduce que neste caso vai somar todos os elementos:
const compra = [
{ produto: 'Pão', quantidade: 10, preco: 3.50 },
{ produto: 'Bolacha', quantidade: 9, preco: 2.50 },
{ produto: 'Nescau', quantidade: 9, preco: 5.50 },
{ produto: 'Biscoito', quantidade: 9, preco: 3 },
{ produto: 'Leite', quantidade: 9, preco: 2.20 },
]
const getTotal = item => item.quantidade * item.preco
const somar = (acc, el) => acc + el
const totalDeTudo = compra
.map(getTotal).reduce(somar)
console.log(totalDeTudo)
O resultado será esse na imagem:
Como vimos, ele irá somar todos os valores pegando como acumulador o valor da soma dos dois primeiros elementos do array, pois não estamos passando como segundo parâmetro para o reduce um acumulador inicial.
Conclusão
Tudo o que foi abordado foi testado e revisado. E isso reforçou ainda mais para mim como utilizar o método. Sendo assim novamente sugiro que pratique com os códigos disponibilizados. Caso este artigo ainda não tenha deixado claro, recomendo que pesquise mais sobre o método.
Agradeço por ler até o final. Se tiver alguma dúvida pode entrar em contato pelo LinkedIn se desejar, ou deixe um comentário. Agradeço muito e até o próximo post! 🚀