JS Composition is like function husbandry. It’s like combining and mashing multiple functions together to spawn or build a brand new one. As simple as that.

Straight to the example :

var makeUppercase = function(x){

return x.toUpperCase();

} var fullStop = function(x){

return x + '.';

} var word = compose(makeUppercase, fullStop); word('hello'); // => 'HELLO.'

Here ‘makeUppercase’ and ‘fullStop’ are two separate function . By using compose function we combined them together and build a new one for an output where we performed two task; Making the ‘word’ uppercase and adding a fullstop at the end.

Mathematical Composition:

In mathematics “f composed with g” is the function that given x , returns f(g(x)) . We have to read these from right-to-left . Like first we’ll get ‘the value’ of g(x) then f(‘the value’)!

compose(f, g) --> f(g(x))

Now let’s go through the simplest compose that is used earlier in this tutorial:

var compose = function(f, g) {

return function(x) {

return f(g(x));

};

};

But, this simplest composition has two drawbacks :(

It loses track of the ‘this’ context used to call it.

2. It ignores all but the first argument passed to the initial function

We can fix it easily.

var compose = function(f, g) {

return function() {

return f.call(this, g.apply(this, arguments));

};

};

Let’s run the newly created Compose in a different example:

var compose = function(f, g) {

return function() {

return f.call(this, g.apply(this, arguments));

};

}; var add1 = function(x) {return x + 1;};

var square = function(x) {return x * x;}; var f = compose(add1, square); console.log(f(7)); //=> 50

So, compose is like Mathematical function. Still, we’re not doing mathematics. It looks odd behaviour reading these from right to left. And for a large number of functions, it will be a lot confusing too.

Simply, We can reverse the order of compose from f(g(x)) to g(f(x)) like below:

compose(f, g) --> g(f(x))

But it won’t serve the real purpose of compose.

The other way is making Compose so different no one expects it like Mathematics :) Let’s look the into new example with different API.

This API makes it more obvious that the functions should be read from left-to-right:

var compose = function compose(f) {

var queue = f ? [f] : [];

var fn = function fn(g) {

if (arguments.length) {

queue.push(g);

return fn;

}

return function() {

var args = Array.prototype.slice.call(arguments);

queue.forEach(function(func) {

args = [func.apply(this, args)];

});

return args[0];

}

};

return fn;

}; var add1 = function(x) {return x + 1;};

var mult2 = function(x) {return x * 2;};

var square = function(x) {return x * x;};

var negate = function(x) {return -x;}; var f = compose(add1)(mult2)(square)(negate)(); console.log(f(5)); //=> -144

To mathematicians, a functional composition is a simple concept. Translating it into code can lead to some interesting and complex API decisions.

So, in Summary, we get to know, Composition connects our functions together like a series of pipes. Data will flow through our application as it must.