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:
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):
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
It can be invoked like so: add(2, 3) // 5
Suppose you need a functon to increment the given value by 1
Using bind, you can do the above in a more concise manner:
We would need a incrementByN maker.. Lets see what that could look like
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
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
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:
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.
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? } } |
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)); } |
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; } |
Suppose you need a functon to increment the given value by 1
1 2 3 | function increment(a){ return add(1, a); } |
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); // 8Thats 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 |
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 |
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 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); // 22For 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/
