Partial application using bind

There has been renewed interest in Functional Programming in the JavaScript community over the last couple of years. And this may be in part due to Facebook's React, Flux and Flux- inspired Redux frameworks. 
I have been learning a bit of FP myself. Along the way, I noticed that I was using a powerful JavaScript feature for doing something very trivial i.e. to hard-bind function context to an object, using Function.prototype.bind
At the risk of digressing, here is a little background:
Most of us are aware of the this problem in JavaScript. Dont worry if you are not, you should still be able to recognize this type of code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var Widget = { addEventListeners : function(btn){ var self = this; on(btn, "click", function(){ self.updateText(); self.doSomeOtherStuff(); }); } updateText: function(){ // update text of some label }, doSomeOtherStuff: function(){ // do other stuff, isnt it obvious? } }

Look at line # 4. The reason we need to do self = this is because, inside the event handler, the value of this may have changed. (If you are using jQuery, i think its the button object. If its the plain old button element, it is the event object.) Kyle Simpson does a fantastic job at describing the this confusion in his YDKJS series
Link to relevant chapter

bind offers an elegant way to...for the lack of a better word.. bind the context i.e. the this variable. So, the above code can change to: (I will capture only the changes below):

1 2 3 4 5 6

addEventListeners : function(btn){ on(btn, "click", function(){ self.updateText(); self.doSomeOtherStuff(); }.bind(this)); }

Notice line #5 .. we used the syntax function(){ }.bind(this)
By doing this, we no longer need an intermediate variable (self) because we hard-bound this to the function using the syntax
The above is what I am referring to as a trivial application of using bind.

Coming back to our main topic of discussion.. I recently learnt that bind can be used as a way of using a neat Functional programming paradigm known as partial application. .
Lets start with the definition: Giving a function fewer arguments than it expects is called partial application. The act of giving fewer arguments has the effect of pre-filling some arguments.
The Wikipedia definition is bit more complicated and perhaps there is a lot more to partial application than my simplification, but it will be adequate for our purposes now.
Lets start with an over-simplified example
Consider the following function

1 2 3

function add(a, b){ return a + b; }

It can be invoked like so: add(2, 3) // 5
Suppose you need a functon to increment the given value by 1

1 2 3

function increment(a){ return add(1, a); }

Using bind, you can do the above in a more concise manner:

var increment = add.bind(null, 1);

We pass in null as the first argument since we dont care about the context in this example.

increment(4); // 5
increment(7); // 8

Thats all good... Now, suppose we did not have the bind feature, and our requirements were such that we need a incrementByN where N depends on a value of some other computation, how would we achieve this. 
We would need a incrementByN maker.. Lets see what that could look like

1 2 3 4 5 6 7 8 9 10 11 12 13

function makeIncrementByN(n){ return function(numberToIncrement){ return add(numberToIncrement, n) } } var increment = makeIncrementByN(1); increment(4); // 5 increment(7); // 8 var incrementBy10 = makeIncrementByN(10); incrementBy10(4); //14 incrementBy10(7); //17

Now, whats the point of the above ? 
Look closely at makeIncrementByN. There is a pattern to it: it takes one of the two needed parameters( of the add function) and returns a function that takes the remaining parameter. This can be generalized as

1 2 3 4 5 6 7 8

var partial = function(fn, param1) { return function(param2) { return fn(param1, param2); }; }; var incrementBy20 = partial (add, 20); incrementBy20(2); // 22

So, how does all of this relate to Function.prototype.bind ? 
Look at the partial function definition above, This will only work for functions that take 2 parameters. 
If we had the following function

1 2 3 4 5 6 7

var add = function(){ var sum = 0; for(var idx = 0; idx < arguments.length; idx++){ sum += arguments[idx] ; } return sum; }

The function takes any number of arguments and returns the sum. The variable 'arguments' is a special and implicit parameter is available in all functions. It an array-like structure that contains all of the arguments passed to the function. 
(The above type of function is known as variadic function because it can take a variable number of arguments)
If we wanted a function that adds 10 to the sum of the other passed-in arguments, we can do this elegantly using bind like so:

var adderOf10 = add.bind(null, 10);

adderOf10(2, 3, 5); // 22

For completeness sake, I am repeating that the first argument is null because we dont care about passing in the context.
There... isnt that elegant. and we can do this using a native language feature without requiring external libraries. OSS libraries are great, dont get me wrong. As a beginner, I think bind is a great way to get started with Functional programming patterns. 

References

• http://raganwald.com/2013/03/07/currying-and-partial-application.html
• bind on MDN 
• http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-functions/

Object prototypes in JavaScript

In this post we will try to understand how to make use of JavaScript's Object prototypes to achieve code re-use i.e. to do Object (Oriented) programming[1].

It would be very useful read this without thinking of Java's notions of OO.

In JavaScript, we do not need special constructs( such as classes)  to create instances/objects. If we want an object, we just create one like so

1 2 3 4 5 6 7

var myCar = { numGears: 4, drive: function(){ console.log('driving'); } } myCar.drive(); // driving

And then another

1 2 3 4 5 6 7

var yourCar = { numGears: 5, drive: function(){ console.log('driving'); } } yourCar .drive(); // driving

No classes, no new keyword, no constructor function... plain and simple.
We can do better.. you would have noticed that the drive method(its really just a regular function) is repeated in the objects. It is the exact same code.  As we all know, code duplication is the enemy of the programmer. 
To facilitate sharing this function across the 2 objects, lets first pull this function out into a separate object. Lets call this object CarPrototype

1 2 3 4 5

var CarPrototype = { drive: function(){ console.log('driving'); } }

The way to read CarPrototype would be as the object where we would add common functionality of car-type objects. 
Its not accidental that I used the phrase "Prototype" in "CarPrototype". More on that soon.
Now to make use of this shared object among myCar and yourCar objects, we would conceptually need the following.

i.e. more generically stated, we need a way to link objects to other objects[2].

Object.create

There is language support to achieve the above linking using the Object.create[3] function
As the name indicates, its used to create objects. Lets re-create myCar and yourCar using this.

1 2 3 4 5

var myCar = Object.create(CarPrototype); myCar.numGears = 4; var yourCar = Object.create(CarPrototype); yourCar.numGears = 5;

Lines 1 and 4 do the following couple of things:

1. Create and return a new object just like the humble object literal - { }
2. And also create the linkage (thats shown as a dotted arrow in the picture above) from myCar and yourCar to CarPrototype

This linkage is the one of the most important concepts in JavaScript. It is known as prototype relationship between objects. Hence the reason for me to name the shared object as CarPrototype

Good-to-know facts about the prototype link

• It is referred to as [[Prototype]] in the official spec
• It is available via the __proto__ property (pronounced as dunder-proto) like so: 
• myCar.__proto__
• It can also be accessed using the Object.getPrototypeOf function like so:
• Object.getPrototypeOf(myCar)
• It is often confused with the prototype property that functions have

Foot-note:

[1] It was tempting to title this post as Object-oriented programming in JavaScript.. but I realized that it would have disappointed the Java developers who would stumble across it in their search to understand how to create classes in JavaScript.
[2] Kyle Simpson has formalized this into what he terms as OLOO (Objects linked to Other Objects) in his excellent You dont know JS series. 
[3] I wanted to link to the MDN doc for this but I refrained from doing so because at the time of this writing, their example highlights a class-style pattern which at best leaves a reader confused and at worst could lead new developers into assuming that its the MDN-recommended way.