Composição de funções
Combine funções pequenas em pipelines.
Composição de funções é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
O que é composição de funções?
Composição de funções combina funções pequenas em uma só. Compor f e g produz uma função na qual a saída de g se torna a entrada de f.
Matematicamente: compose(f, g)(x) = f(g(x)). Os dados fluem da direita para a esquerda.
Duas funções pequenas
A composição começa com funções simples e de propósito único. Estas são duas transformações que combinaremos.
const double = x => x * 2;
const increment = x => x + 1;
console.log(double(5));
console.log(increment(5));Composição manual
A composição mais explícita consiste simplesmente em chamar uma função com o resultado de outra. Leia de dentro para fora: increment é executada primeiro e, depois, double.
const double = x => x * 2;
const increment = x => x + 1;
const result = double(increment(5));
console.log(result);Uma função compose para duas funções
Encapsule esse padrão em um compose reutilizável. Ele recebe f e g e retorna uma nova função que aplica g primeiro e, depois, f.
const compose = (f, g) => x => f(g(x));
const double = x => x * 2;
const increment = x => x + 1;
const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));A ordem é importante
A composição não é comutativa. compose(f, g) difere de compose(g, f), pois a função à direita é executada primeiro.
const compose = (f, g) => x => f(g(x));
const double = x => x * 2;
const increment = x => x + 1;
console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));Leitura da direita para a esquerda
Em compose(a, b, c)(x), a chamada é avaliada como a(b(c(x))). A função mais à direita toca a entrada primeiro. Tenha essa direção em mente para evitar erros.
const compose = (f, g) => x => f(g(x));
const shout = s => s.toUpperCase();
const exclaim = s => s + '!';
const loud = compose(shout, exclaim);
console.log(loud('hello'));Composição de transformações de texto
A composição é ótima para fluxos de texto: remover espaços externos, converter para minúsculas e, depois, substituir espaços; cada etapa é uma função pequena.
const compose = (f, g) => x => f(g(x));
const trim = s => s.trim();
const lower = s => s.toLowerCase();
const clean = compose(lower, trim);
console.log(clean(' HELLO World '));Composição com números
const compose = (f, g) => x => f(g(x));
const square = x => x * x;
const negate = x => -x;
const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));Por que usar compose?
A composição mantém cada função focada e reutilizável, além de eliminar a desorganização das chamadas aninhadas. Em vez de espalhar f(g(h(x))) pelo seu código, você cria uma cadeia nomeada uma vez e a reutiliza.
const compose = (f, g) => x => f(g(x));
const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';
const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));Composição e currificação juntas
Funções curried são compostas muito bem, pois cada uma produz uma função de um argumento, exatamente o que a composição espera.
const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;
const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));Em direção a muitas funções
Até agora, compose lidava com duas funções. A composição real aceita qualquer número de funções. Na próxima lição, você criará um compose geral e seu equivalente da esquerda para a direita, pipe, usando reduce.
const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;
const combined = compose(a, compose(b, c));
console.log(combined(10));Verificação rápida
Se compose = (f, g) => x => f(g(x)), o que compose(double, increment)(5) retorna quando double multiplica por 2 e increment adiciona 1?
Recapitulação: composição de funções
Você aprendeu a combinar funções:
compose(f, g)(x)é igual af(g(x)), avaliado da direita para a esquerda.- A ordem é importante: a composição não é comutativa.
- A composição mantém as funções pequenas, nomeadas e reutilizáveis.
- Funções curried são compostas de forma limpa. Em seguida, você generalizará isso para qualquer número de funções.
Perguntas Frequentes
A aula “Composição de funções” é grátis?
Sim — o texto completo de “Composição de funções” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “Composição de funções”?
Combine funções pequenas em pipelines. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Composição de funções”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Aplicação parcial
- Funções curry
- Composição de funções
- Criando pipe e compose