O que são e como usar funções de ordem superior em JavaScript

Neste artigo você vai aprender o que são e como usar funções de ordem superior em JavaScript, um recurso muito interessante!

Fala programador(a), beleza? Bora aprender mais sobre funções em JavaScript!

Hoje vamos falar sobre funções de ordem superior em JavaScript.

Mas antes de começarmos, é importante você ter um bom entendimento sobre o que são funções e como elas funcionam em JavaScript.

Caso você ainda não tenha essa base, sugiro dar uma olhada em alguns materiais de introdução ao JavaScript antes de continuar.

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

Simplesmente, funções de ordem superior são funções que aceitam outras funções como argumentos ou retornam funções como resultado.

Elas nos permitem escrever códigos mais expressivos e reutilizáveis.

Vamos ver alguns exemplos para ficar mais claro:

function greet(name) {
  return 'Hello, ' + name + '!';
}

function greetAll(names, greeting) {
  return names.map(greeting);
}

console.log(greetAll(['Alice', 'Bob', 'Eve'], greet));
// Output: ['Hello, Alice!', 'Hello, Bob!', 'Hello, Eve!']

Neste exemplo, a função greetAll é uma função de ordem superior, pois ela recebe outra função (greet) como argumento.

A função greetAll é responsável por “saudar” todos os elementos de um array de nomes, utilizando a função de saudação passada como argumento (greet).

Outro exemplo:

function add(x) {
  return function (y) {
    return x + y;
  }
}

const addTwo = add(2);
console.log(addTwo(3)); // Output: 5

Neste exemplo, a função add é uma função de ordem superior, pois ela retorna outra função (que recebe um único argumento y) como resultado.

A função addTwo é criada a partir de add, passando o valor 2 como argumento. Quando chamamos addTwo(3), o resultado é 5, pois estamos adicionando o valor 2 (passado para a função add) ao valor 3 (passado para a função retornada por add).

Por que usar funções de ordem superior?

Como mencionado anteriormente, funções de ordem superior nos permitem escrever códigos mais expressivos e reutilizáveis.

Elas nos dão mais flexibilidade e abstração, permitindo que criemos soluções mais genéricas e adaptáveis.

Além disso, elas também nos permitem trabalhar de forma mais eficiente com o paradigma de programação funcional.

O JavaScript é uma linguagem que possui suporte a programação funcional, o que significa que podemos utilizar técnicas e ferramentas de programação funcional para resolver problemas de forma mais clara e concisa.

Como usar funções de ordem superior em JavaScript?

Existem várias formas de utilizar funções de ordem superior em JavaScript, e vamos ver algumas delas a seguir:

1. Aceitando funções como argumentos

Como vimos no primeiro exemplo, uma função pode aceitar outra função como argumento.

Isso é útil quando queremos que a função faça algo específico com os argumentos passados, mas queremos deixar a forma de fazer isso aberta para ser definida posteriormente.

Veja um exemplo de uma função que aceita uma função de comparação como argumento e usa essa função para ordenar um array:

function sort(array, compareFn) {
  // Implementação da função de ordenação
  // Usa compareFn para comparar dois elementos do array
}

const numbers = [4, 2, 5, 1, 3];

// Ordena os números em ordem crescente
const ascendingSort = sort(numbers, (a, b) => a - b);

// Ordena os números em ordem decrescente
const descendingSort = sort(numbers, (a, b) => b - a);

2. Retornando funções como resultado

Como vimos no segundo exemplo, uma função também pode retornar outra função como resultado.

Isso é útil quando queremos criar uma função “personalizada” a partir de outra função, mas com alguns argumentos pré-definidos.

Veja um exemplo de uma função que retorna uma função que sempre adiciona um número específico ao argumento passado:

function createAdder(x) {
  return function (y) {
    return x + y;
  }
}

const addTwo = createAdder(2);
console.log(addTwo(3)); // Output: 5

const addFive = createAdder(5);
console.log(addFive(3)); // Output: 8

3. Utilizando funções de ordem superior prontas

JavaScript possui várias funções de ordem superior prontas para uso, que podem ser muito úteis em diversas situações. Algumas dessas funções são:

map: aplica uma função a cada elemento de um array e retorna um novo array com os resultados.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(x => x * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

filter: filtra os elementos de um array de acordo com uma função de teste e retorna um novo array com os elementos que passaram no teste.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

reduce: aplica uma função a cada elemento de um array, acumulando os resultados em uma única variável.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, x) => acc + x, 0);
console.log(sum); // Output: 15

Essas são apenas algumas das funções de ordem superior disponíveis em JavaScript, e existem muitas outras que podem ser muito úteis em diferentes situações.

Exemplo mais complexo de função de ordem superior

Vamos criar um exemplo que utiliza uma função de ordem superior para aplicar uma série de transformações em uma lista de nomes.

Primeiro, vamos criar as funções de transformação que queremos aplicar:

function toUpperCase(str) {
  return str.toUpperCase();
}

function addExclamationPoint(str) {
  return str + '!';
}

function removeSpaces(str) {
  return str.replace(/\s/g, '');
}

Agora, vamos criar a função de ordem superior que irá receber essas funções de transformação como argumentos e aplicá-las em uma lista de nomes:

function transformList(list, ...fns) {
  return list.map(name => {
    return fns.reduce((acc, fn) => fn(acc), name);
  });
}

A função transformList recebe uma lista de nomes (list) e uma série de funções de transformação (fns).

Ela utiliza o método map para aplicar uma função a cada elemento da lista, e dentro da função passada para o map, utiliza a função reduce para aplicar cada uma das funções de transformação em sequência.

Agora, podemos utilizar a função transformList da seguinte maneira:

const names = ['Alice', ' Bob', 'Eve '];
const transformedNames = transformList(names, toUpperCase, addExclamationPoint, removeSpaces);
console.log(transformedNames);
// Output: ['ALICE!', 'BOB!', 'EVE!']

Neste exemplo, a função transformList recebeu a lista de nomes e as três funções de transformação que criamos anteriormente como argumentos.

Ela aplicou cada uma dessas funções em sequência em cada nome da lista, produzindo a lista de nomes transformados que vemos no output.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Funções de ordem superior são um recurso muito poderoso em JavaScript, que nos permite escrever códigos mais expressivos, reutilizáveis e eficientes.

Elas nos permitem trabalhar de forma mais flexível com o paradigma de programação funcional e utilizar técnicas e ferramentas de programação funcional para resolver problemas de forma mais clara e concisa.

Espero que este artigo tenha ajudado a entender o que são e como usar funções de ordem superior em JavaScript. Boa sorte em sua jornada de aprendizado!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!