Introdução
O método reduce é uma estrutura de repetição utilizada para reduzir um array em um único número.
É possível passar uma função para dentro do reduce, para definir como esse array deve ser “reduzido”.
Um exemplo para o entendimento, seria somar todos os itens de um array, onde é possível pegar cada número e ir somando, e no final ter o retorno da soma total dos números do array.
Parâmetros do Reduce
O primeiro parâmetro é uma função, que pode receber até quatro parâmetros, e nessa função que vai ser realizado o método redutor do array. Os quatro parâmetros são:
Acumulador: é o valor no qual vai sendo acumulado na soma dos itens do array. Em um array com 3 números, o acumulador começa com o valor do primeiro, depois soma o primeiro e o segundo, e por fim, soma o valor já acumulado com o terceiro número.
Valor atual: É o elemento que está sendo processado no array.
Index: (opcional) O índice do elemento atual que está sendo processado no array.
Array: (opcional) O array completo sem ser processado.
O segundo parâmetro é o valor de início, que pode ser utilizado caso queira passar algum valor padrão ou inicial para a função reduce.
É possível e deixa o código mais legível, separar o primeiro parâmetro do reduce que é a função, pois isso irá deixar a lógica separada e mais fácil de dar manutenção.
Primeiro exemplo
Para o primeiro exemplo, teremos um array de números, um array simples de 1 a 10. O Objetivo será somar todos os itens do array.
let numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Agora que o array está declarado, será necessário usar o reduce para fazer esse cálculo. Nesse caso será utilizado uma função normal, só para demarcar que o primeiro parâmetro é uma função, mas poderia ser uma arrow function.
let total = numeros.reduce(function(valorAcumulado, numeroAtual){
return valorAcumulado + numeroAtual;
}, 0);
console.log(total); //55
O valorAcumulado, começa em 0, porque foi definido isso no segundo parâmetro da função.
Como o reduce é uma estrutura de repetição, ele vai passar por todos os números do array e para cada um, o retorno vai sendo adicionado no valorAcumulado até o final de todos itens do array.
E no final o que se tem é o retorno da soma que vai para a variável valorTotal que contém 55.
Maior valor de uma lista
Um outro exemplo que pode ser utilizado, é para obter o maior valor de uma lista. Isso acontece porque a lista pode ser reduzida a um único valor, e esse valor será o maior.
A diferença é que antes, o valor era somado, e agora o valor será verificado e retornado somente o maior, para cada item do array, sem somar os valores.
Para isso será utilizado a função Max da biblioteca Math do Javascript. Essa função analisa dois valores e retorna o maior entre eles.
Exemplo da função para pegar o maior valor da lista:
let numeros = [20, 35, 30];
let maiorValor = numeros.reduce(function(valor1, valor2) {
return Math.max(valor1, valor2);
});
console.log(maiorValor); //35
Neste caso, o primeiro parâmetro que é o Acumulador, não irá acumular os números de uma soma, mas sim irá guardar o maior valor a cada decisão tomada pelo Math.max.
Com isso a função vai passando por todos os itens do array e o maior vai ficando, até que é retornado para a variável maiorValor e é impresso na tela.
Somando valores de um array de produtos
Para este exemplo, suponha que existe uma lista com 3 produtos, e é necessário saber qual a soma de todos os valores.
Isso pode ser um exemplo do dia a dia, onde se precisa obter o valor total dos produtos em estoque.
let valoresDosProdutos = [100.00, 200.00, 25.00];
function calculaValorTotalEmEstoque(total, valorProduto){
return total + valorProduto;
}
function obterValorEmEstoque(){
//irá imprimir 325
console.log(produtos.reduce(valoresDosProdutos, 0));
}
No exemplo acima, a função calculaValorTotalEmEstoque que está separada, é a função do primeiro parâmetro do reduce, resolvi colocar dessa forma para ver que é possível deixar separado.
Isso pode ser útil quando se deseja usar essa mesma regra de redução, em outros arrays do sistema, pois no caso é possível chamar essa função mais de uma vez. Essa separação da função pode ajudar melhor no entendimento e na manutenção do código.
A função calculaValorTotalEmEstoque, que está separada, é o método redutor, que no caso vai reduzir o array, somando seus itens.
Video sobre o Reduce
Caso prefira, gravei um vídeo explicando a teoria passo a passo de como ele funciona:
Conclusão
O Reduce pode ser muito útil para se utilizar em determinadas situações, o seu principal caso de uso é somar valores, mas também da para encontrar valores, agrupar valores, realizar filtros em conjunto com o filter e entre outros, provavelmente você verá um desse utilizado no código que esteja mexendo, ou precisará criar um para resolver algum problema, até o próximo post 🙂
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Aprenda a testar Aplicações Javascript
Referências
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
https://www.devmedia.com.br/javascript-reduce-reduzindo-uma-colecao-em-um-unico-objeto/37981
https://www.digitalocean.com/community/tutorials/js-finally-understand-reduce
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Math/max