JavaScript Reduce é um dos métodos recentes de programação funcional que a linguagem possui. Ele foi definido no EcmaScript 2015, e é um método de arrays. Acesse aqui para entender um pouco mais dessa história do JavaScript. Se você não entende muito bem sobre programação funcional, deixa um comentário que faço um texto sobre. Mas tentando resumir, programação funcional é um paradigma que evita a criação de estados ou dados mutáveis.
O método
O método reduce() reduz um array a um único valor, executando uma função para cada valor do array da esquerda para a direita ou de baixo para cima. No caso de valores indefinidos, a função não é executada.
Sendo assim, o método tem a seguinte estrutura:
array.reduce(callback(valorAnterior, valorAtual, indice, array){...}, valorInicial)
A callback (função que é executada para cada valor do array) recebe quatro parâmetros:
valorAnterior
É o valor retornado na última vez que a callback foi chamada. Se o parâmetro valorInicial estiver sendo utilizado, na primeira chamada da callback, ele é o valor utilizado.
valorAtual
O valor atual do array, que está sendo utilizado.
indice
Índice (posição) do elemento atual. Lembrando que array começa no índice 0.
valorInicial
Esse parâmetro é opcional. Caso seja passado, é usado como primeiro argumento, na primeira chamada da função callback.
Utilização
Imagine que você tem uma tabela de produtos, e você queira somar todos os valores dos produtos ou todas as quantidades, por exemplo. O método JavaScript reduce é uma excelente saída nesse caso.
Outra utilização comum é para o caso de cálculo de média de vários valores.
Exemplos
Vamos começar fazendo a soma. Imagine que tenhamos um array com os preços de produtos de um carrinho e queremos calcular o preço total deste carrinho. Como resultado teríamos um código parecido com:
Se você ainda não entende muito bem sobre let e const dá uma lida nesse outro texto.
No segundo exemplo, vamos fazer uma média simples do somatórios de várias notas:
Compatibilidade
Uma coisa que a gente sempre tem que se preocupar com as novas features do JavaScript, CSS ou outro é em qual navegadores funciona. Claro que se você estiver só estudando, estuda o que tem de melhor. Mas se for pra colocar em produção, principalmente a galera do Internet Explorer, tem sempre que se preocupar. Sendo assim, compatibilidade do JavaScript reduce é a seguinte:
Ver detalhes no CanIUse
Ou seja, não tendo necessidade do IE 8, você pode usar tranquilo o JavaScript reduce, beleza?
Qualquer dúvida não esquece de deixar seu comentário e fica de olho que vou continuar escrevendo sobre os métodos mais interessantes do JavaScript! Segue lá no Facebook pra ficar sabendo dos posts assim que eles forem lançados 🙂