JavaScript Academy · Aula

Criando pipe e compose

Implemente composição da esquerda para a direita e da direita para a esquerda.

Criando pipe e compose é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 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.

De duas funções para muitas

Um compose de dois argumentos é limitado. Fluxos reais encadeiam muitas etapas. Nesta lição, você criará compose e pipe de uso geral usando reduce e reduceRight.

pipe: da esquerda para a direita

pipe segue a ordem de execução: a primeira função é executada primeiro. pipe(a, b, c)(x) é igual a c(b(a(x))). A maioria das pessoas considera isso mais natural do que compose.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(pipe(inc, double)(5));

Como reduce conduz pipe

reduce começa com o valor de entrada como acumulador e aplica cada função sucessivamente, passando cada resultado para a próxima. O valor inicial x inicia a cadeia.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const steps = pipe(
  n => n + 1,
  n => n * 3,
  n => n - 2
);

console.log(steps(4));

compose com reduceRight

compose é pipe ao contrário. Usar reduceRight percorre a lista de funções a partir do final, então a função mais à direita é executada primeiro, correspondendo a f(g(x)).

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

pipe e compose são espelhos

A mesma lista de funções produz resultados diferentes em pipe e compose, pois a direção se inverte. Escolha com base em como você deseja ler as etapas.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const square = n => n * n;

console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));

compose como pipe invertido

Você pode definir compose em termos de pipe invertendo a lista de funções. Isso mostra como os dois são estreitamente relacionados.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

Um fluxo real de texto

Crie um gerador de identificadores amigáveis a partir de funções pequenas de texto usando pipe. Cada etapa faz uma tarefa e é fácil de testar sozinha.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const slugify = pipe(
  s => s.trim(),
  s => s.toLowerCase(),
  s => s.replace(/\s+/g, '-')
);

console.log(slugify('  Hello World Example  '));

Composição de operações sobre vetores

Os fluxos funcionam com qualquer tipo de dado, incluindo vetores. Combine filtragem e mapeamento em uma transformação nomeada.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const process = pipe(
  arr => arr.filter(n => n % 2 === 0),
  arr => arr.map(n => n * 10)
);

console.log(process([1, 2, 3, 4, 5, 6]));

O caso-limite de identity

Chamar pipe() sem funções retorna a entrada inalterada, pois reduce simplesmente retorna o valor inicial. Esse comportamento de identity torna os auxiliares seguros para chamadas com zero etapas.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));

Combinação com currificação

Funções curried e aplicadas parcialmente entram diretamente nos fluxos. Cada uma se torna uma etapa limpa de um argumento.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;

const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));

Escolhendo pipe ou compose

Use pipe quando quiser que as etapas sejam lidas de cima para baixo, na ordem de execução. Use compose quando quiser seguir a notação matemática f(g(x)). Ambos são invólucros de uma linha para reduce e aparecem em toda parte nas bibliotecas funcionais.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const normalize = pipe(
  s => s.trim(),
  s => s.replace(/[^a-z0-9]+/gi, ' '),
  s => s.toUpperCase()
);

console.log(normalize('  a-b_c!d  '));

Verificação rápida

Qual método de vetor faz compose executar as funções da direita para a esquerda?

Recapitulação: pipe e compose

Você criou auxiliares gerais de composição:

pipe usa reduce para executar da esquerda para a direita.
compose usa reduceRight para executar da direita para a esquerda.
compose pode ser definido como pipe com uma lista invertida.
Fluxos vazios funcionam como identity, e etapas curried se encaixam de forma limpa.

Perguntas Frequentes

A aula “Criando pipe e compose” é grátis?

Sim — o texto completo de “Criando pipe e compose” é 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 “Criando pipe e compose”?

Implemente composição da esquerda para a direita e da direita para a esquerda. 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 4 de 4.

Quanto tempo leva a aula “Criando pipe e compose”?

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

← Voltar para JavaScript Academy