I saw this example in eloquent javascript and was wondering how this function works. Could someone please explain this to me?
function multiplier (factor) {
return function(number){
return number * factor;
};
}
var twice = multiplier(2);
console.log((twice(5));
// 10
I am able to follow parameter factor = 2.
Im confused about twice(5) and how that becomes the parameter number.
This is an example of 'closure' in JavaScript.
Saying:
var twice = multiplier(2)
Is really the same as saying:
var twice = function(number){
return number * 2;
};
So twice becomes a reference to a function that will give you back twice the value you send into it.
The multiplier function returns the function(number){...}, which has 'closure' over the factor (in this case 2).
That's why when you call twice(5), you get a result of 10.
You'll want to read up on closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Maybe that can help you understand
function multiplier (factor) {
function inner(number){
return number * factor;
};
return inner;
}
var twice = multiplier(2);
console.log((twice(5));
You should read more about anonymous function and scope, here I found article with your example http://www.2ality.com/2011/02/javascript-variable-scoping-and-its.html
multiplier is a function that accepts as input a factor.
it returns a function. the returned function accepts as input a number and returns the number times the factor.
stated a little differently, multiplier creates functions that can multiply a number by some factor. for example
multiplier(2)
calling multiplier(2) will return a function that accepts a number as input and returns that number times 2.
var twice = multiplier(2);
is the same as
function twice(number){
return number * 2;
}
The most important fact for you to understand is that multiplier returns a function (a closure), it is a function that creates functions. And the returned function works in the same way as a function defined by yourself with the parameter replaced by a value.
function inner(number){
return number * 2;
};
Twice will work in the same way as inner but using 5 instead.(there is an extra parenthesis before twice in the example).
In my opinion this is one of the most confusing aspects of Javascript (the scope chain), since it differs from how other languages work. But if you manage understand a couple of simple examples (like the one you posted here) it should be easy to read similar code from then on.
