JavaScript Reduce: Reduzindo uma coleção em um único objeto
Neste artigo vamos aprender a utilizar a função reduce do JavaScript, analisando seu funcionamento e em quais situações ela deve ser empregada.
A função reduce do JavaScript serve para iterar sobre um array e utilizar o valor de cada item para criar um objeto final com base em alguma regra. Como o próprio nome da função sugere, ela “reduz” os itens de um vetor a um valor único. Por exemplo, podemos utilizá-la para obter a soma ou produto dos itens de um vetor numérico.
Assinatura da função
Para entendermos o funcionamento da função reduce(), vamos começar analisando a sua assinatura:
array.reduce(callback[, initialValue])array: Vetor de origem sobre o qual estamos iterando para aplicar a função;
callback: Função a ser chamada para cada item do array de origem e cujo o retorno produz um valor final baseado em alguma regra. Essa função recebe até quatro parâmetros: 1) o valor retornado da última iteração. Na primeira iteração esse argumento receberá o initialValue, se ele for informado; 2) o valor atual que está sendo processado pelo array; 3) o índice atual do item no array de origem; 4) o array original;
initialValue: É o valor inicial do resultado da operação que será passado para a função de callback na primeira iteração. Em um cenário no qual desejamos somar os itens de um vetor, por exemplo, esse argumento representa o valor inicial da soma, que apesar de ser zero na maioria dos casos, pode variar de acordo com a situação. Por exemplo, podemos desejar somar os elementos de mais de um array. Nesse caso, o resultado da soma do primeiro poderia ser passado como initialValue para o segundo, e então a nova soma seria acumulada na segunda função. Esse argumento, no entanto, é opcional.
Reduzindo um array da maneira tradicional
Antes de utilizar a função reduce, vamos analisar, na Listagem 1, como fazemos para implementar o mesmo comportamento sem utilizá-la. Assim, ficará bastante clara a praticidade oferecida por essa função.
var total = 0;
var numeros = [1, 2, 3, 4, 5, 6];
for ( var i = 0; i < numeros.length; i++ ){
total += numeros[i];
}
console.log(total);Listagem 1. Iterando sobre um array e somando seus itens.
Com esse código, que é bastante comum no nosso dia a dia, iteramos sobre o array numeros a fim de obter um valor final que, nesse caso, é a soma dos seus itens (que totaliza 21).
Reduzindo um array com Reduce
Agora que já vimos como faríamos para reduzir um vetor a um único valor da forma “tradicional”, utilizando um laço de repetição, vejamos, na Listagem 2, como fica a mesma rotina usando a função reduce().
01 var numeros = [1, 2, 3, 4, 5, 6];
02 var total = numeros.reduce(function(total, numero){
03 return total + numero;
04 }, 0);
05 console.log(total);Listagem 2. Reduzindo o array com reduce.
Perceba que invocamos a função a partir do array numeros e passamos para ela a função de callback recebendo o totalizador (total) e um objeto (numero) que representa cada número do vetor em cada iteração. No interior dessa função de callback, efetuamos os cálculos necessários e retornamos o resultado que, nesse caso, é a soma do item com o totalizador. Por fim, passamos ainda o primeiro valor do totalizador, que inicia com zero (último parâmetro).
Caso utilizemos arrow functions do ECMAScript 6 (ou JavaScript 6), o código pode ficar ainda menor, como apresentado na Listagem 3.
01 var numeros = [1, 2, 3, 4, 5, 6];
02 var total = numeros.reduce((total, numero) => total + numero, 0);
03 console.log(total);Listagem 3. Reduce usando arrow functions.
Com essa estrutura, a declaração da função de callback se torna bastante simplificada. À esquerda do operador arrow (=>) temos os argumentos da função, enquanto à direita temos o corpo do método.
Como vimos, utilizando adequadamente os recursos da própria linguagem temos a possibilidade de melhorar a legibilidade e o tamanho do nosso código. Basta, portanto, conhecer essas funcionalidades e nos manter atualizados em relação às versões mais recentes.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo