Javascript Reduce

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