What is composition and pipe in JavaScript functional programming

Prerequisite - you must have good knowledge of reduce and reduceRight methods of the array in JavaScript and how they work under the hood.

If you know about the reduce and reduceRight , please click here

composition-

When talking about function composition we can think of it as a way of chaining multiple functions together to create a new function, in other terms function composition is used when we want to pass the result of one function as an argument to another function and result of this function as an argument of some other function and so on.

To get a better understanding let's look at an example .

Suppose there is a code like this

func1(func2(func3(func4(passedValue))))
//here in above code
// first func4() will execute with provided argument ie. passedValue , and then result of it will be passed to func3() and then result of func3() will be passed to func2() and its result to func1() then after execution of func1() we'll get the desired output

what if we want to solve this problem in a better way?

here compose comes into the picture,

composition function is a normal JavaScript function that takes two argument

1. array of functions

2. Initial value which we want to pass to the function which is going to execute first.

// execution of fuction start from right to left in composition
const composition =function (args){
   //here args is array of function eg- [func1,func2,func3,func4]
   return function(initialValue){
   //initialValue is the value that we want to pass to function which is going to execute first.
  return  args.reduceRight((prevValue,currrentFunc)=>
    currentFunc(prevValue),initialValue);
//in the above code 
//prevValue will be initialValue for the first time and it will be passed to func4(prevValue) which is last function in array of functions 
// when func4() will finish its execution , prevValue will be update by result returned by func4() and then it will be passed to func3() and so on.
}
}
const func= composition( [x => x + 1, x => x * x, x => 2 * x]);
console.log(func(4)) // 65;
// to get better understanding  plz read about reduceRight and reduce link is provided above.

functions = [x => x + 1, x => x * x, x => 2 * x], x = 4
Output: 65
Explanation:
Evaluating from right to left ...
Starting with x = 4.
2 * (4) = 8
(8) * (8) = 64
(64) + 1 = 65

Pipe -->

pipe is exactly the same as composition , but the difference is that the execution of the functions start from right to left in composition function and from left to right in the pipe function .

const pipe =function(args){
return function(initialValue){
return args.reduce((prevValue,currentFunc)=>
currentFunc(prevValue),initialValue);
}
}

const func=pipe( [x => x + 1, x => x * x, x => 2 * x]);
console.log(func(4)) //50

functions = [x => x + 1, x => x * x, x => 2 * x], x = 4
Output: 50
Explanation:
Evaluating from left to right ...
Starting with x = 4.
4 + (1) =5
5* 5 = 25
2*(25) =50

If you have any questions or suggestions please comment.