Lately I came into something call functional programming, and I learn about call(),bind() and apply().. But I still don't quite get it because I never use functional programming approach in Javascript.
like function within a function
function checkGreater(limit){
return function(limit, item){
return item > limit;
}.bind(this,limit);
}
It sounds to me it make things more complicated. When does we need a function within a function approach? like the above example code.
Examples like this take advantage of JavaScript's closures to implement what is called a "factory". Here's an article on MDN that discusses closures and factories.
function checkGreater(limit) {
return function(limit, item) {
return item > limit;
}.bind(this, limit);
}
In this example, this is a factory that returns a function which you can pass arguments to and checks whether the argument passed is greater than the limit passed to the factory. Here's example usage:
var greaterThanTen = checkGreater(10);
This returns:
function (10, item) {
return item > 10;
}
and stores it to greaterThanTen. The first argument to bind is called the calling context of the function, and in this simple example, it really doesn't matter what the context is since it's not being used, but can be referenced inside the function through use of the this keyword.
Then you can use greaterThanTen like this:
if (greaterThanTen(5)) {
console.log('5 is greater than 10'); // never gets called
}
if (greaterThanTen(11)) {
console.log('11 is greater than 10'); // this gets called
}
If I were to write my own factory to do this, however, I would probably write it like so:
function checkGreater(limit) {
return function(item) {
return item > this;
}.bind(limit);
}
This does the exact same thing as the example above, except the factory makes use of the calling context of the inner function to set the limit.
Be aware that in strict mode this will work exactly as expected. However, in "loose" mode, this will be coerced to new Number(limit) which is not a primitive value and cannot be compared using the strict equality operator ===. Thank you @FelixKling for reminding me of this pitfall.
.bind() binds limit to this, so checkGreater(15) would return a function with 15 binded to the this of the returned function.
limit to this: That only really works in strict mode. In "loose" mode, the value of this will be coerced to an object, which can lead to all kinds of other problems (well, mostly problems regarding equality comparison).