"Não é sobre o que você faz, é sobre como você abstrai o que faz." — adaptado de Eloquent JavaScript
Uma higher-order function (HOF) aceita funções como argumento ou retorna uma função. Em JavaScript isso é natural porque funções são de primeira classe — valores como números ou strings.
function doTwice(action) { action(); action();} const sayHello = createGreeter("Hello");function createGreeter(greeting) { return name => `${greeting}, ${name}!`;}Neste guia da série 33 Conceitos JS — projeto open source criado por Leonardo Maldonado — você vai aprender:
map, filter, reducePré-requisitos: Closures e Callbacks — callbacks e HOFs são duas faces da mesma moeda.
// metadados do artigo
{
"tag": "functional programming",
"readTime": "18 min",
"author": "Vanderlei José Alamino",
"source": "33jsconcepts.com",
"series": "33 Conceitos JS",
"part": {
"current": 25,
"total": 38
}
}Fonte de referência
Conteúdo adaptado a partir do guia original em inglês.
seção
Receita de baixo nível: cada passo explícito. Receita de alto nível: "deixe de molho", "cozinhe em fogo baixo" — verbos que escondem detalhes.
HOFs são esses verbos abstratos: empacotam padrões (faça em cada item) e você passa o comportamento específico.
ALTO: radii.map(calculateArea)MÉDIO: function map(arr, fn) { ... fn(item) ... }BAIXO: for loop + fórmula manualseção
HOF faz pelo menos uma destas:
function doTwice(action) { action(); action(); } doTwice(() => console.log("Hello!")); function createGreeter(greeting) { return name => `${greeting}, ${name}!`;}const sayHello = createGreeter("Hello");sayHello("Alice"); // Hello, Alice!Benefícios: menos repetição, abstração, utilitários reutilizáveis, composição.
seção
Em JS, funções são valores — você pode:
const add = (a, b) => a + b; callTwice(fn => console.log("2x")); function createMultiplier(n) { return x => x * n;}const double = createMultiplier(2);Atribuir, passar como argumento, retornar de outra função — fundamento de toda programação funcional em JS.
seção
repeat — estrutura uma vez, comportamento variável:
function repeat(times, action) { for (let i = 0; i < times; i++) action(i);} repeat(3, i => console.log(`Iteração ${i}`));calculate — loop genérico + fórmula:
function calculate(radii, formula) { return radii.map(formula);} const area = r => Math.PI * r * r;calculate([1, 2, 3], area);unless — nova abstração de fluxo:
function unless(cond, action) { if (!cond) action();}seção
Fábrica greaterThan:
function greaterThan(n) { return m => m > n;} const gt10 = greaterThan(10);gt10(11); // trueWrapper noisy — padrão decorator:
function noisy(fn) { return (...args) => { console.log("args:", args); const result = fn(...args); console.log("result:", result); return result; };} noisy(Math.max)(3, 1, 4); // log + 4Validadores e formatadores:
const isValidAge = createValidator(0, 120);const formatDollars = createFormatter("$", "");Aplicação parcial:
function partial(fn, ...preset) { return (...later) => fn(...preset, ...later);}const sayHello = partial(greet, "Hello", "!");seção
Fábricas dependem de closures — função interna lembra variáveis externas:
function createCounter(start = 0) { let count = start; return () => ++count;} const c1 = createCounter();const c2 = createCounter(100);c1(); // 1c2(); // 101function createBankAccount(balance) { return { deposit(n) { balance += n; return balance; }, getBalance() { return balance; }, };}// balance é privado — inacessível de foraVeja Closures para aprofundar.
seção
| Método | Função | Retorna |
|---|---|---|
forEach(fn) | executa em cada | undefined |
map(fn) | transforma | novo array |
filter(fn) | filtra | novo array |
reduce(fn, init) | acumula | valor único |
find(fn) | primeiro match | elemento |
some / every | teste | boolean |
[1, 2, 3, 4, 5] .filter(n => n > 2) .map(n => n * 2) .reduce((s, n) => s + n, 0); // 24Todas aceitam função como argumento — são HOFs nativas.
seção
// ❌nums.map(n => { n * 2; })// ✅nums.map(n => n * 2)nums.map(n => { return n * 2; })this em callbacksUse .bind(this), arrow wrapper ou arrow no método — veja this, call, apply & bind.
parseInt com map["1","2","3"].map(parseInt); // [1, NaN, NaN]// map passa (elem, index) — index vira radix!["1","2","3"].map(s => parseInt(s, 10));Não force reduce se um for...of somando é mais legível.
seção
seção
seção
Você entendeu o pilar da programação funcional em JS. O próximo conceito da trilha Functional Programming é Pure Functions — código previsível sem efeitos colaterais.
Revise Closures se fábricas ainda parecerem mágica.
→ Pure Functions — a magia da previsibilidade
Fonte de referência: 33jsconcepts.com/concepts/higher-order-functions ⬀
this, return em arrow, parseInt + map