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.