Function piping and composition are concepts from functional programming that of course are possible in JavaScript -as it's a multi-paradigm programming language-, let's deep into this concepts quickly.

The concept is to execute more than a single function, in a given order and pass the result of a function to the next one.

You can do it ugly like that:

function1(function2(function3(initialArg)))

Or using function composition

compose(function3,function2,function1)(initialArg);

or function piping

pipe(function1,function2,function3)(initialArg);

To make it short,composition and piping are almost the same, the onlydifference being the execution order; If the functions are executed from left to right, it's a pipe, on the other hand, if the functions are executed from right to left it's called compose.

A more accurate definition would be: "In Functional Programming, Compose is the mechanism that composes the smaller units (our functions) into something more complex (you guessed it, another function)".

Here's an example of a pipe function:

constpipe=(...functions)=>(value)=>{returnfunctions.reduce((currentValue,currentFunction)=>{returncurrentFunction(currentValue);},value);};

Let's add some insights into this:

Basics

• We need to gather a N number of functions
• Also pick an argument
• Execute them in chain passing the argument received to the first function that will be executed
• Call the next function, adding as argument the result of the first function.
• Continue doing the same for each function in the array.

/* destructuring to unpack our array of functions into functions */constpipe=(...functions)=>/* value is the received argument */(value)=>{/* reduce helps by doing the iteration over all functions stacking the result */returnfunctions.reduce((currentValue,currentFunction)=>{/* we return the current function, sending the current value to it */returncurrentFunction(currentValue);},value);};

We already know that arrow functions don't need brackets nor return tag if they are returning a single statement, so we can spare on keyboard clicks by writing it like that:

constpipe=(...functions)=>(input)=>functions.reduce((chain,func)=>func(chain),input);

How to use

constpipe=(...fns)=>(input)=>fns.reduce((chain,func)=>func(chain),input);constsum=(...args)=>args.flat(1).reduce((x,y)=>x+y);constsquare=(val)=>val*val;pipe(sum,square)([3,5]);// 64

Remember that the first function is the one at the left (Pipe) so 3+5 = 8 and 8 squared is 64. Our test went well, everything seems to work fine, but what about having to chainasync functions?

Pipe on Async functions

One use-case I had on that is to have a middleware to handle requests between the client and a gateway, the process was always the same (do the request, error handling, pick the data inside the response, process the response to cook some data and so on and so forth), so having it looking like that was a charm:

exportdefaultasyncfunctionhandler(req,res){switch(req.method){case'GET':returnpipeAsync(provide,parseData,answer)(req.headers);/*        ...      */

Let's see how to handle async function piping in both Javascript and Typescript:

JS Version

exportconstpipeAsync=(...fns)=>(input)=>fns.reduce((chain,func)=>chain.then(func),Promise.resolve(input));

JSDoc Types added to make it more understandable (I guess)

/** * Applies Function piping to an array of async Functions. * @param  {Promise<Function>[]} fns * @returns {Function} */exportconstpipeAsync=(...fns)=>(/** @type {any} */input)=>fns.reduce((/** @type {Promise<Function>} */chain,/** @type {Function | Promise<Function> | any} */func)=>chain.then(func),Promise.resolve(input));

TS Version

exportconstpipeAsync:any=(...fns:Promise<Function>[])=>(input:any)=>fns.reduce((chain:Promise<Function>,func:Function|Promise<Function>|any)=>chain.then(func),Promise.resolve(input));

This way it will work both for async and non-async functions so it's a winner over the example above.

You may be wondering what aboutfunction composition, so let's take a gander:

Function Composition

If you prefer to call the functions from right to left instead, you just need to changereduce forredureRight and you're good to go. Let's see the async way with function composition:

exportconstcomposeAsync=(...fns)=>(input)=>fns.reduceRight((chain,func)=>chain.then(func),Promise.resolve(input));

Back to the example above, let's replicate the same but with composition:

How to use

constcompose=(...fns)=>(input)=>fns.reduceRight((chain,func)=>func(chain),input);constsum=(...args)=>args.flat(1).reduce((x,y)=>x+y);constsquare=(val)=>val*val;compose(square,sum)([3,5]);// 64

Note that we reversed the function order to keep it consistent with the example at the top of the post.

Now, sum (which is at the rightmost position) will be called first, hence 3+5=8 and then 8 squared is 64.

If you have any question or suggestion please comment down below