Member preview

# Functional Programming concept with Javascript (Coding by Composing)

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 :(

1. 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.