Reduza o Javascript: Domine o Básico

Hoje falaremos sobre o método de array Javascript de redução e como podemos usá-lo para reduzir um array a apenas um único valor. Todos os trechos de código escritos estão na linguagem Javascript. Conhecimento básico da linguagem é necessário para entender este artigo e implementar o método de forma eficaz.

O que é o método Javascript de redução?

O método de array Javascript de redução é um componente essencial da programação funcional que pega um array e o reduz a apenas um valor. Isso é feito executando a função de retorno de chamada em cada elemento da matriz por vez, passando o resultado da computação no elemento anterior a ele.

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue) console.log(sumWithInitial); // expected output: 10

O trecho de código acima é uma matriz de números; quando chamamos o método de redução nele, ele pega todo o array e retorna apenas um valor que é 10.

Compreendendo os parâmetros e argumentos Javascript “reduce”

É importante ter um entendimento muito concreto do que são os parâmetros “reduce” do Javascript, se precisarmos usar o método corretamente. Abaixo destaquei esses parâmetros; vamos pegá-los um após o outro e, no final, juntar tudo para dar sentido a isso.

1. função callback
2. valor inicial

Função de retorno de chamada

Essa função é executada em cada item da matriz. Na execução subsequente do callback Fn, seu valor de retorno é alterado para o valor do argumento do acumulador. O valor de retorno muda para o reduce(), para a invocação final.

Os seguintes parâmetros são fornecidos ao chamar a função:

1. acumulador
2. valor atual
3. índiceatual
4. variedade

Acumulador

Este é o resultado da última chamada para callback Fn, em valor. Se fornecido, initialValue é usado na primeira chamada; se não, array[0] é usado.

valor atual

Este é o valor do elemento atual. Se um valor inicial for fornecido, o valor da matriz no índice 0 (array[0]) será retornado na primeira chamada; caso contrário, o índice 1 (array[1]) seria retornado.

CurrentIndex

Esta é a posição do índice currentValue do array. Se inicialValue foi dado na primeira chamada, sua posição seria no índice 0; caso contrário, estaria no índice 1.

Variedade

Este é simplesmente o array no qual o método reduce() foi usado.

valor inicial

Um valor que é usado para inicializar o acumulador no primeiro retorno de chamada. Se initialValue for fornecido, callbackFn começa a executar com currentValue definido como o primeiro elemento da matriz. Se initialValue for omitido, accumulator será definido como o primeiro valor do array e callbackFn começará a ser executado com currentValue definido como o segundo valor do array. Se o array estiver vazio neste cenário (ou seja, não há nenhum item inicial para retornar como acumulador), um erro será gerado.

Juntando tudo

reduza(Função (acumulador, valoratual,indiceatual, array) { /* … */ }, valorinicial)

A combinação de todos esses parâmetros deve ser semelhante ao trecho de código acima.

Como funciona o método Javascript “reduzir”?

Vamos mergulhar mais fundo neste método Javascript reduzido e ver o que está acontecendo nos bastidores.

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue );

Tudo o que o método Javascript de redução faz é percorrer o item e, cada vez que ele é repetido, retornamos um item individual e obtemos o valor anterior que retornamos do método de redução (). Se for o primeiro item em reduce(), apenas retornamos zero porque esse é o nosso valor padrão. Se alterássemos o padrão para 50, por exemplo, isso afetaria o array.

Pegamos zero ou o número padrão e o adicionamos ao nosso primeiro item; obteríamos um total que seria 1 no código anterior. Fazemos isso novamente para o próximo item, que é 2. Somamos 1 + 2 e obtemos 3; continuamos esse processo até chegarmos ao item final.

A tabela acima dá uma imagem mais clara do que acontece cada vez que usamos este método. Observe que esse resultado irá variar dependendo de initialValue.

Conclusão

Em uma nota final, reduzir Javascript é um método iterativo. Ele coleta todos os itens da matriz em um único valor aplicando uma função de retorno de chamada "redutor" a cada elemento em ordem crescente de índice. O valor de retorno callbackFn é sempre fornecido como um acumulador quando callbackFn é chamado novamente. Reduzir retorna seu valor de retorno do último valor do acumulador, que é o valor retornado do callback Fn na última iteração do array ().

Embora a função fornecida como callback-Fn possa modificar, o array no qual é chamado, reduce() não. No entanto, observe que o comprimento da matriz é preservado antes da execução inicial do retorno de chamada Fn.