Tudo o que você precisa saber sobre as funções pipe e compose em JavaScript
Introdução
A programação funcional é um paradigma de programação que enfatiza a escrita de código usando funções como blocos de construção primários. Na programação funcional, as funções são tratadas como cidadãos de primeira classe, o que significa que podem ser passadas como argumentos para outras funções, retornadas de funções e armazenadas em variáveis.
Em JavaScript, funções de ordem superior são funções que podem aceitar outras funções como argumentos ou retornar funções como resultado. Duas funções populares de ordem superior usadas na programação funcional são as funções pipe e compose.
Função de tubo
A função pipe é uma função de ordem superior que recebe duas ou mais funções como argumentos e retorna uma nova função. A função retornada recebe uma entrada, aplica cada uma das funções fornecidas a ela em ordem, passando a saída de cada função como entrada para a próxima função. A saída final é o resultado da última função no pipe.
Aqui está um exemplo de uso da função pipe:
const pipe = (...fns) => (x) => fns.reduce((acc, f) => f(acc), x);
const addFive = (x) => x + 5;
const square = (x) => x * x;
const double = (x) => x * 2;
const result = pipe(addFive, square, double)(2); // Returns 98
console.log(result);
Função de composição
A função compose é semelhante à função pipe, mas aplica as funções na ordem oposta. A função compose usa duas ou mais funções como argumentos e retorna uma nova função que aplica cada função na ordem inversa.
Aqui está um exemplo de uso da função de composição:
const compose = (...fns) => (x) => fns.reduceRight((acc, f) => f(acc), x);
const addFive = (x) => x+ 5;
const square = (x) => x * x;
const double = (x) => x * 2;
const result = compose(double, square, addFive)(2); // Returns 98
console.log(result);
Mais exemplos
Existem muitas maneiras de usar as funções pipe e compor em JavaScript. aqui estão alguns exemplos:
Exemplo 1: transformação de dados
Suponha que temos uma matriz de objetos de usuário e queremos classificar a matriz por idade, filtrá-la para incluir apenas usuários com idade de 25 anos e, em seguida, mapear os usuários restantes para seus nomes. Podemos usar as funções sort, filtere mappara fazer isso, mas pode ser difícil ler e entender o código. Em vez disso, podemos usar a pipefunção para encadear essas funções:
const users = [
{ name: 'Sumit', age: 38 },
{ name: 'Jasim', age: 30 },
{ name: 'Rahim', age: 20 },
];
const sortByAge = (a, b) => a.age - b.age;
const filterByAge = (age) => (user) => user.age === age;
const mapByName = (user) => user.name;
const result = pipe(
(users) => users.sort(sortByAge),
(users) => users.filter(filterByAge(38)),
(users) => users.map(mapByName)
)(users);
console.log(result); // Returns ['Sumit']
Exemplo 2: composição de funções
Suponha que temos duas funções, ge f, e queremos criar uma nova função que se aplique gao resultado de f. Podemos usar a composefunção para criar esta nova função:
const g = (x) => x + 1;
const f = (x) => x * 2;
const h = compose(g, f);
console.log(h(3)); // Returns 7
Exemplo 3: Middleware Redux
Na biblioteca de gerenciamento de estado do Redux, o middleware é uma função que intercepta as ações despachadas para o armazenamento e pode modificá-las, despachar ações adicionais ou executar outros efeitos colaterais. As funções de middleware são normalmente compostas em conjunto usando a composefunção.
Aqui está um exemplo de uso da composefunção para criar um middleware Redux:
const loggerMiddleware = (store) => (next) => (action) => {
console.log(`Action: ${action.type}, State: ${JSON.stringify(store.getState())}`);
return next(action);
};
const errorMiddleware = (store) => (next) => (action) => {
try {
return next(action);
} catch (error) {
console.error(`Error: ${error}`);
throw error;
}
};
const middleware = compose(loggerMiddleware, errorMiddleware);
// Usage in Redux store
const store = createStore(reducer, initialState, middleware);
Conclusão
Concluindo, as funções pipe e compose são funções úteis de ordem superior para programação funcional em JavaScript. Eles permitem encadear várias funções para criar uma nova função que aplica todas as funções em uma única operação. Isso pode tornar seu código mais legível, conciso e combinável.





































![O que é uma lista vinculada, afinal? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)