O JavaScript Reduce é um importante método de arrays para reduzir os elementos a uma variável. Aprenda aqui como usá-lo!
No JavaScript, uma das estruturas mais importantes que temos para fazer uso são os arrays. Com eles, é possível reunir uma imensa diversidade de dados em uma única variável. Imagine, por exemplo, que seu sistema fosse receber uma quantidade variável de dados do seu usuário: às vezes seriam 5, às vezes 5 milhões… Seria impraticável programar cada um dos atributos manualmente, certo? É para isso que servem os arrays. E, sem dúvidas, um dos importantes métodos para manutenção deles que temos é o JavaScript Reduce.
Através deste método, é possível reduzir toda uma estrutura de dados a uma variável única, fazendo uso de uma função definida pelo usuário. Este é um método muito útil para, por exemplo, extrair alguma informação com base em informações de toda uma estrutura de dados, ou então para resumir o array em termos mais simples.
Note que este método faz parte da classe das Higher Order Functions (funções de ordem superior ou HOF), isso é, das funções que recebem outras funções por parâmetros. Isso nos indica que o método Reduce funciona percorrendo o array para executar uma função em cada um de seus elementos. No entanto, de toda forma, antes de prosseguir com o artigo, é preciso antes dar uma explicação no que são de fato as HOF e em como elas aparecem em nosso código. Portanto, vamos lá!
O que é uma Higher Order Function?
Uma HOF, ou função de nível superior em tradução direta do inglês, é um conceito matemático e da ciência da computação que define uma função que faz pelo menos um dos seguintes:
- Recebe uma função como parâmetro;
- Retorna uma função ao final da execução.
E, principalmente no JavaScript, na maioria das vezes que utilizamos esse tipo de função, nós enviamos outras funções como parâmetros. É pouco usual os casos em que retornamos funções de outras funções; embora seja perfeitamente usável, acaba acontecendo poucas vezes (a menos que ou você seja muito bom ou esteja tratando com componentes de frameworks, que são no fundo do fundo funções, mas isso é um assunto mais complexo). É por isso que as funções de alto nível, como o próprio Reduce, não têm um comportamento pré-definido: ela faz exatamente aquilo que você passa como parâmetro.
É, portanto, uma função com alto grau de customização e que por vezes é de difícil entendimento à primeira vista, especialmente quando construída fora de algumas das estruturas pré-definidas da linguagem. Apesar de ser conceitualmente estranha, com a prática você se acostuma, após alguns usos. Fora o Reduce, em JavaScript, temos ainda alguns outros exemplos de Higher Order Functions, como o .map(), .forEach, .filter() e mais algumas outras.
Qual a sintaxe do JavaScript Reduce?
Com isso elucidado, agora podemos ver como funciona o Reduce. Como dissemos antes, este é um método que percorre o array executando uma função nele. Portanto, é um funcionamento bastante simples, mas que, ao ver pela primeira vez, pode causar estranhamento no programador. Não é, na verdade, comum que passemos uma função para outra função. Por isso, vamos ver a sintaxe passo a passo!
Agora vejamos o que cada valor quer dizer:
- resultado: É o valor de saída da execução do método; pode ser um valor único, um array, objeto: depende do que o programador desejar.
- array: Se trata do array que o método irá percorrer para executar a função definida no callback.
- funcao: É a função que será executada para cada um dos elementos do array.
- valorInicial: É, por fim, o valor inicial para o objeto de saída da função. Note que esse é um parâmetro opcional a se passar para o reduce! Normalmente, esse valor será 0, e queremos que seja assim. Mas, caso seja necessário, podemos determinar algum valor pré-determinado.
Como se pode ver, a sintaxe é bastante simples. Não é difícil de se entender à primeira vista, mas pede apenas um pouco de costume. Agora, vamos para a parte mais complicada: colocar em execução! Você verá que a função que será executada no callback tem algumas particularidades obrigatórias, mas isso também não é difícil de se entender.
Como usar o método Reduce na prática
No entanto, somente esta exposição da sintaxe não basta para entender de verdade como o método funciona. Ainda é preciso ver exemplos práticos! Por isso, separamos alguns para lhe ajudar a entender. No entanto, de início, vamos compreender como o Reduce funciona na forma “crua”, isto é, usando um laço for:
Exemplo 0: Usando um laço for
Conforme dissemos antes, essa é uma função de nível superior que serve para fazer a acumulação de uma variável com base nas entradas de um array. Isto é, é como se fizéssemos um laço for com uma variável acumuladora e em seguida somássemos os valores de uma lista de dados. Vejamos como isso se dá na prática:
const entrada = [1, 2, 3, 4, 5, 6, 7, 8]
let acumulador = 0;
for (let i = 0; i < entrada.length; i++) {
acumulador += entrada[i];
}
console.log(acumulador); // 36O conceito, na prática, é muito simples e, na verdade, todo programador já fez um laço assim antes. No entanto, poucos sabem que existe um método, o Reduce, que torna a criação desse tipo de laço de forma mais fácil. Agora, vamos ver como ele funciona na prática, traduzindo todo este código em apenas uma chamada de método:
Exemplo 1
A forma mais comum é a chamada básica do método, declarando a função acumuladora dentro do callback. Vejamos como isso se coordena na prática:
const entrada = [1, 2, 3, 4, 5, 6, 7, 8]
const acumulado = entrada.reduce((total, elementoAtual) => total + elementoAtual);
console.log(acumulado); // 36Como se pode ver, na chamada do método do callback, há a necessidade de que hajam dois valores: o total (que é a variável acumuladora) e o elementoAtual (que funciona como se fosse o valor entrada[i]). A lógica é exatamente a mesma, com a diferença de que há o uso de uma higher order function. No geral, é igual! Agora, porém, temos uma vantagem extra: podemos declarar essa função em um outro lugar do código e apenas chamá-lo junto ao reduce. Vamos dar uma olhada nisso:
Exemplo 2
Ao separar a função do callback da chamada do Reduce, podemos nos utilizar de alguns princípios da programação, como o DRY (don’t repeat yourself, ou “não se repita” em inglês) e também podemos reaproveitar essa função declarada. É, portanto, uma proposta mais escalável, ideal para projetos grandes; além disso, separar a função da sua chamada promove uma leitura mais fácil do código, se adaptando melhor aos princípios do clean code.
No entanto, por vezes, recorrer a isso pode ter um efeito rebote: caso uma função seja muito simples e será usada apenas uma vez, talvez mantê-la em separado do resto do método dificulte mais a leitura do código. Por isso, é algo que vai da vontade do programador e de seu sentimento quanto ao que ele deve fazer. Agora, vejamos como isso se aplica na prática:
const entrada = [1, 2, 3, 4, 5, 6, 7, 8];
function acumulaArray(total, valorAtual) {
return total + valorAtual;
}
const acumulado = entrada.reduce(acumulaArray);
console.log(acumulado); // 36Como você pode ver, a chamada do método fica mais simples. No entanto, o todo do código pode se tornar mais complexo. Por isso, vale ter o tato de quando usar o quê.
Exemplo 3
Agora, vamos testar a execução com aquele valorInicial de que falamos acima. Recapitulando, ele define um valor de início para a variável acumuladora, de forma que a soma final tenha um valor fixo. O conceito é bastante simples, por isso, vamos para o exemplo:
const entrada = [1, 2, 3, 4, 5, 6, 7, 8];
const valorInicial = 5
function acumulaArray(total, valorAtual) {
return total + valorAtual;
}
const acumulado = entrada.reduce(acumulaArray, valorInicial);
console.log(acumulado); // 41É uma propriedade muito útil porque, tal como fazemos quando vamos criar o método for, por vezes pode ser que queiramos dar um valor inicial para a nossa soma, e, felizmente, o JavaScript oferece a oportunidade de fazer isso sem muita dificuldade.
Conclusão
Como se faz notar, o método Reduce nem sempre vai vir a ser muito usado, mas de toda forma ele é uma ferramenta muito importante, nativa da linguagem JavaScript e que pode resolver muitos problemas de uma só vez. Além disso, ele também é um método muito útil no ponto em que, como o programador quem determina a função de acumulação, é possível criar laços e lógicas dentro para antes de fazer a soma.
É, então, um método bastante simples mas que, de vez em quando, se fará útil na rotina quotidiana do programador. E isso principalmente quando ele tiver de fazer um teste técnico ou desafio de lógica da programação: com muita frequência, é preciso fazer laços for para variáveis acumuladoras. Quase toda questão, especialmente algumas mais básicas, pede isso! Portanto, para dizer o mínimo, pelo menos saber que essa função existe é já uma grande economia de tempo.
E este foi o nosso artigo! Caso tenha gostado, pedimos que recomende para seus amigos e faça-o se tornar conhecido. Foi preparado com bastante carinho e dedicação, e vale a pena tomar o seu tempo para publicar!
Até mais. 🙂
