Compreendendo funções de ordem superior em JavaScript

JavaScript é uma linguagem poderosa suportada pela maioria dos navegadores modernos e é uma ótima opção para iniciantes.

Assim como muitas outras linguagens de programação modernas, o JavaScript oferece suporte a funções que permitem isolar um bloco de código e reutilizá-lo em outro lugar. Você também pode usar funções de atribuição a variáveis ​​e passá-las como parâmetros, como outros valores.

O que são funções de ordem superior?

A definição mais simples para uma função de ordem superior é uma função que executa operações em outras funções, aceitando-as como parâmetros ou retornando-as. As funções de ordem superior são muito usadas no paradigma de programação funcional. Se você é apenas começando com JavaScript, as funções de ordem superior podem ser um pouco difíceis de entender.

Considere o seguinte exemplo:

funçãotransformar(fn) {
deixar resultadoArray = [];
retornarfunção (variedade) 





instagram viewer
{
para (deixar eu = 0; i < array.comprimento; i++) {
 resultArray.push (fn (array[i]))
 }
retornar resultArray
 }
}

No bloco de código acima, o transformar função é uma função de ordem superior que leva em fn função como um parâmetro e retorna uma função anônima que leva em variedade como parâmetro.

O propósito do transformar função é modificar os elementos na matriz. Primeiro, o código define uma variável resultArray e o vincula a uma matriz vazia.

O transformar A função retorna uma função anônima que percorre cada elemento em variedade, então passa o elemento para o fn função para computação e empurra o resultado para resultArray. Após a conclusão do loop, a função anônima retorna o resultArray.

const função1 = transformar((x) => x* 2)
console.log (função1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

O bloco de código acima atribui a função anônima retornada pelo transformar função para a variável constante função1. fn devolve o produto de x que é um substituto para matriz[i].

O código também passa um array, como parâmetro para função1 e, em seguida, registra o resultado no console. Uma maneira mais curta de escrever isso seria:

console.log (transformar((x) => x* 2)([ 2, 3, 4, 5, 6 ]))

JavaScript tem uma função interna de ordem superior que basicamente faz a mesma coisa que transformar, que abordaremos mais adiante.

Espero que você esteja começando a entender como funcionam as funções de ordem superior em JavaScript. Dê uma olhada na função a seguir e veja se consegue adivinhar o que ela faz.

funçãofiltroETransformar(fn, arrayToBeFiltered, condição) {
deixar filtradoArray = [];
para (deixar eu = 0; i < arrayToBeFiltered.length; i++) {
se (condição (arrayToBeFiltered[i])) {
deixar y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filtradoArray.push (y)
 } outro {
 filtradoArray.push (arrayToBeFiltered[i])
 }
 }
retornar filtradoArray
}

Esse bloco de código define uma função que faz o que você pode suspeitar - verifica os elementos na matriz que atendem a uma determinada condição e os transforma com o transformar() função. Para usar esta função, você faz algo assim:

filtroETransformar((x) => x* 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

Ao contrário do transformar função, O filtroETransformar função recebe duas funções como parâmetros: fn e doença. O doença A função verifica se o parâmetro foi passado, é um número par e retorna verdadeiro. Caso contrário, retorna falso.

Se doença resolve como verdadeiro (a condição é atendida), só então o transformar função chamada. Essa lógica pode ser útil se você estiver trabalhando com um array e quiser transformar certos elementos. Se você executar esse código no console do navegador, deverá obter a seguinte resposta:

[ 1, 4, 3, 8, 5 ]

Você pode ver que a função transforma apenas os elementos que atendem a uma determinada condição, deixando os elementos que não atendem à condição, como estão.

A função de ordem superior Array.map() em JavaScript

Métodos de array como map() são funções de ordem superior que facilitam a manipulação de arrays. Veja como funciona.

deixar matriz = [ 1, 2, 3, 4, 5 ];
deixar matriztransformada = matriz.map((x) => x* 2);

Quando você loga matriztransformada no console do navegador, você deve obter o mesmo resultado obtido com o transformar função mencionada anteriormente:

[ 2, 4, 6, 8, 10 ]

array.map() recebe dois parâmetros, o primeiro parâmetro refere-se ao próprio elemento, enquanto o segundo parâmetro refere-se ao índice do elemento (posição no array). Com apenas array.map() você pode obter os mesmos resultados que o filtroETransformar função. Veja como você faz isso:

deixar matriz = [ 1, 2, 3, 4, 5 ];
deixar matriztransformada = matriz.map((x) => x % 20? x* 2:x);

No bloco de código acima, a função retorna o produto do elemento atual e 2, se o elemento for par. Caso contrário, ele retorna o elemento intocado.

Com o embutido mapa função, você conseguiu eliminar a necessidade de várias linhas de código, resultando assim em um código muito mais limpo e menos chances de ocorrência de bugs.

A função Array.filter() em JavaScript

Quando você invoca o filtro método em uma matriz, certifique-se de que o valor de retorno da função que você passa para o método seja true ou false. O filtro O método retorna um array contendo os elementos que atendem a condição passada. Aqui está como você o usa.

funçãocheckFirstLetter(palavra) {
deixar vogais = "aeiou"
se (vogais.inclui(palavra[0].toLowerCase())) {
retornar palavra;
 } outro {
retornar;
 }
}
deixar palavras = [ "Olá", "de", "o", "crianças", "de", "planeta", "Terra" ];
deixar resultado = palavras.filtro((x) => verificarPrimeiraLetra (x))

O bloco de código acima percorre o palavras array e filtra qualquer palavra cuja primeira letra seja uma vogal. Quando você executa o código e registra o resultado variável, você deve obter os seguintes resultados:

[ 'de', 'Terra' ];

A função Array.reduce() em JavaScript

O reduzir() função de ordem superior recebe dois parâmetros. O primeiro parâmetro é a função de redução. Essa função de redução é responsável por combinar dois valores e retornar esse valor. O segundo parâmetro é opcional.

Define o valor inicial a passar para a função. Se você deseja retornar uma soma de todos os elementos em uma matriz, você pode fazer o seguinte:

deixar um = [ 1, 2, 3, 4, 5];
deixar soma = 0;
para (deixar eu = 0; i < a.comprimento; i++) {
 soma = soma + a[i];
}
console.log (soma);

Se você executar o código, soma deve ser 15. Você também pode ter uma abordagem diferente com o reduzir função.

deixar um = [ 1, 2, 3, 4, 5 ];
soma = a.reduzir((c, n) => c + n);
console.log (soma);

O bloco de código acima é muito mais limpo em comparação com o exemplo anterior. Neste exemplo, a função de redução leva em dois parâmetros: c e n. c refere-se ao elemento atual enquanto n refere-se ao próximo elemento na matriz.

Quando o código é executado, a função redutora percorre o array, certificando-se de adicionar o valor atual ao resultado da etapa anterior.

O poder das funções de ordem superior

Funções em JavaScript são poderosas, mas funções de ordem superior levam as coisas para o próximo nível. Eles são amplamente usados ​​em programação funcional, permitindo filtrar, reduzir e mapear arrays com facilidade.

As funções de ordem superior podem ajudá-lo a escrever um código mais modular e reutilizável ao criar aplicativos.