"A simplicidade é a sofisticação final. E nada é mais simples do que uma função que faz uma coisa só — combinada com outras que fazem uma coisa só."
Currying transforma f(a, b, c) em f(a)(b)(c) — um argumento por vez, lembrado por closures. Composição encadeia funções: a saída de uma vira entrada da próxima, como uma linha de montagem.
const add5ThenDouble = pipe(add(5), multiply(2));add5ThenDouble(10); // 30Neste guia da série 33 Conceitos JS — projeto open source criado por Leonardo Maldonado — você fecha a trilha Functional Programming com os padrões que unem HOFs, pureza e pipelines de dados.
Pré-requisitos: Closures, Higher-Order Functions e Pure Functions.
// metadados do artigo
{
"tag": "functional programming",
"readTime": "24 min",
"author": "Vanderlei José Alamino",
"source": "33jsconcepts.com",
"series": "33 Conceitos JS",
"part": {
"current": 29,
"total": 38
}
}Fonte de referência
Conteúdo adaptado a partir do guia original em inglês.
seção
Cada estação espera uma informação e lembra as anteriores — como currying:
const orderPizza = size => crust => topping => `${size} pizza de massa ${crust} com ${topping}`; orderPizza("Grande")("Fina")("Pepperoni"); const orderLargeThin = orderPizza("Grande")("Fina");orderLargeThin("Cogumelo");Templates reutilizáveis (orderLargeThin) nascem de fechar argumentos cedo — closures em ação.
seção
Nomeado em homenagem a Haskell Curry. Converte função multi-arg em sequência de funções unárias.
function add(a, b, c) { return a + b + c; }add(1, 2, 3); // 6 const curriedAdd = a => b => c => a + b + c;curriedAdd(1)(2)(3); // 6Currying transforma a função — a lógica original só roda quando todos os argumentos foram fornecidos.
const add = a => b => c => a + b + c; const step1 = add(1); // b => c => 1 + b + cconst step2 = step1(2); // c => 3 + cstep2(3); // 6const multiply = a => b => a * b;const double = multiply(2);const triple = multiply(3); double(5); // 10triple(5); // 15Veja Closures para o mecanismo por baixo.
seção
function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return (...nextArgs) => curried.apply(this, args.concat(nextArgs)); };}const curriedSum = curry((a, b, c) => a + b + c); curriedSum(1, 2, 3); // 6curriedSum(1)(2)(3); // 6curriedSum(1, 2)(3); // 6 — misto OKVersão ES6:
const curry = fn => function curried(...args) { return args.length >= fn.length ? fn(...args) : (...next) => curried(...args, ...next); };Limitação: fn.length ignora rest params e defaults:
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }console.log(sum.length); // 0 const curryN = (fn, arity) => function curried(...args) { return args.length >= arity ? fn(...args) : (...next) => curried(...args, ...next); };seção
| Aspecto | Currying | Aplicação parcial |
|---|---|---|
| Args por chamada | Sempre um | Qualquer número |
| Retorno | Cadeia unária | Função com args fixos |
| Natureza | Transformação estrutural | Especialização |
// Curryingconst add = a => b => c => a + b + c;add(1)(2)(3); // Partialfunction partial(fn, ...preset) { return (...later) => fn(...preset, ...later);}const greetExcitedly = partial( (g, p, name) => `${g}, ${name}${p}`, "Hello", "!",);greetExcitedly("Alice"); // args restantes JUNTOSCurrying = flexibilidade máxima. Partial = versões pré-configuradas.
seção
const createLogger = level => withTimestamp => message => { const time = withTimestamp ? new Date().toISOString() : ""; console.log(`[${level}]${time ? " " + time : ""} ${message}`);}; const info = createLogger("INFO")(true);info("Aplicação iniciada");const createApiClient = baseUrl => endpoint => options => fetch(`${baseUrl}${endpoint}`, options).then(r => r.json()); const githubApi = createApiClient("https://api.github.com");const getUser = githubApi("/users");const isGreaterThan = min => value => value > min;const isAdult = isGreaterThan(17);[15, 22, 45].filter(isAdult); // [22, 45]const applyDiscount = pct => price => price * (1 - pct / 100);const tenOff = applyDiscount(10);[100, 200, 50].map(tenOff); // [90, 180, 45]seção
Combinar funções: saída de uma → entrada da próxima. Notação matemática: (f ∘ g)(x) = f(g(x)).
const add10 = x => x + 10;const multiply2 = x => x * 2;const subtract5 = x => x - 5; subtract5(multiply2(add10(5))); // 25 const composed = compose(subtract5, multiply2, add10);composed(5); // 25Composição evita aninhamento ilegível:
// ❌ addGreeting(capitalize(trim(getName(user))))// ✓const processUser = compose(addGreeting, capitalize, trim, getName);processUser(user);seção
| Função | Direção | Leitura |
|---|---|---|
compose(f,g,h) | Direita → esquerda | Matemática f(g(h(x))) |
pipe(f,g,h) | Esquerda → direita | Ordem de execução |
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);const getName = obj => obj.name;const toUpperCase = str => str.toUpperCase();const addExclaim = str => str + "!"; pipe(getName, toUpperCase, addExclaim)({ name: "alice" }); // ALICE!compose(addExclaim, toUpperCase, getName)({ name: "alice" }); // idemA maioria prefere pipe — funções listadas na ordem em que rodam.
seção
const toCamelCase = pipe( str => str.trim(), str => str.toLowerCase(), str => str.split(" "), words => words.map((w, i) => i === 0 ? w : w[0].toUpperCase() + w.slice(1), ), words => words.join(""),); toCamelCase(" HELLO WORLD "); // helloWorldconst processApiResponse = pipe( res => res.data, users => users.filter(u => u.isActive), users => users.sort((a, b) => a.name.localeCompare(b.name)), users => users.map(u => ({ id: u.id, displayName: `${u.firstName} ${u.lastName}`, email: u.email, })), users => users.slice(0, 10),);Combine com Map, Reduce & Filter quando data-last.
seção
Composição exige funções unárias (1 in → 1 out). Currying converte multi-arg nisso.
// ❌ data-first — não compõeconst map = (arr, fn) => arr.map(fn); // ✓ data-lastconst map = fn => arr => arr.map(fn);const filter = fn => arr => arr.filter(fn); const doubleEvens = pipe( filter(x => x % 2 === 0), map(x => x * 2),); doubleEvens([1, 2, 3, 4, 5, 6]); // [4, 8, 12]Sem mencionar o dado explicitamente — foco nas transformações:
const isPositive = x => x > 0;const double = x => x * 2;const sum = (a, b) => a + b; const processNumbers = pipe( filter(isPositive), map(double), reduce(sum, 0),); processNumbers([1, -2, 3, -4, 5]); // 18Use point-free com moderação — clareza > esperteza.
seção
Bibliotecas trazem curry com placeholder, auto-currying e utilitários testados.
// Ramda — data-last, auto-curried// R.pipe(R.prop("name"), R.trim, R.toLower)({ name: " ALICE " }) // lodash/fp// fp.pipe(fp.filter(u => u.age >= 18), fp.map(fp.get("name")))(users)Vanilla para a maioria dos casos:
const curry = fn => function curried(...args) { return args.length >= fn.length ? fn(...args) : (...n) => curried(...args, ...n);};const pipe = (...fns) => x => fns.reduce((a, f) => f(a), x);const partial = (fn, ...preset) => (...rest) => fn(...preset, ...rest);const map = fn => arr => arr.map(fn);| Situação | Recomendação |
|---|---|
| Aprendizado / projeto pequeno | Vanilla |
| Já usa Lodash | lodash/fp |
| FP pesado | Ramda |
| Bundle pequeno | Vanilla ou tree-shake |
seção
const add = a => b => a + b;add(1); // [Function] — não é 3!add(1)(2); // ✓const multiply = factor => value => value * factor;const double = multiply(2);pipe(double, triple)(5); // ✓ com data-lastSaída de getAge (número) → getLength (espera array) quebra o pipeline.
Funções compostas devem ser puras.
Se o colega não entende o pipeline em 30s, prefira função explícita com optional chaining.
seção
seção
seção
Parabéns — você concluiu a trilha Functional Programming da série 33 Conceitos JS: HOFs, pureza, map/filter/reduce, recursão e currying & composition.
A próxima trilha é Advanced Topics — comece pelo motor que executa seu código.
→ JavaScript Engines — o motor por trás do código
Fonte de referência: 33jsconcepts.com/concepts/partial-application-currying-compose-pipe ⬀
f(a,b,c) → f(a)(b)(c); closures lembram argsfn.length + acumular args; cuidado com rest/default