freeCodeCamp/guide/portuguese/javascript/function-composition/index.md

title	localeTitle
Function Composition	Função Composição

Composição função

A composição da função é a aplicação pontual de uma função ao resultado de outra. Os desenvolvedores fazem isso de maneira manual todos os dias quando o ninho funciona:

compose = (fn1, fn2) => value => fn2(fn1(value)) 

Mas isso é difícil de ler. Existe uma maneira melhor de usar a composição de funções. Em vez de lê-los de dentro para fora:

add2AndSquare = (n) => square(add2(n)) 

Podemos usar uma função de ordem superior para encadear de forma ordenada.

add2AndSquare = compose( add2, square) 

Uma simples implementação de composição seria:

compose = (f1, f2) => value => f2( f1(value) ); 

Para obter ainda mais flexibilidade, podemos usar a função reduceRight:

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal); 

A leitura da composição da esquerda para a direita permite um claro encadeamento de funções de ordem superior. Exemplos do mundo real estão adicionando autenticações, registro e propriedades de contexto. É uma técnica que permite a reutilização no mais alto nível. Aqui estão alguns exemplos de como usá-lo:

// example 
 const add2        = (n) => n + 2; 
 const times2      = (n) => n * 2; 
 const times2add2  = compose(add2, times2); 
 const add6        = compose(add2, add2, add2); 
 
 times2add2(2);  // 6 
 add2tiems2(2);  // 8 
 add6(2);        // 8 

Você pode pensar que isso é uma programação funcional avançada e não é relevante para programação frontend. Mas também é útil em aplicativos de página única. Por exemplo, você pode adicionar comportamento a um componente React usando componentes de ordem superior:

function logProps(InputComponent) { 
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) { 
    console.log('Current props: ', this.props); 
    console.log('Next props: ', nextProps); 
  }; 
  return InputComponent; 
 } 
 
 // EnhancedComponent will log whenever props are received 
 const EnhancedComponent = logProps(InputComponent); 

Em conclusão, a composição da função permite a reutilização da funcionalidade em um nível muito alto. Se as funções forem bem estruturadas, permitirá que os desenvolvedores criem novos comportamentos com base no comportamento existente.

Também aumenta a legibilidade das implementações. Em vez de funções de aninhamento, você pode limpar funções de cadeia e criar funções de ordem superior com nomes significativos.