Closures and Function as Values

I was reading Eloquent JavaScript and came across this code in the section on Closures:

``````function multiplier(factor) {
return (number) => number * factor;
}

let twice = multiplier(2);
console.log(twice(5));
//-> 10
``````

I was confused about about the value of 10. Not the arithmetic, but how `5` got bound to `number` in the function?

I threw this into an `index.html` file:

``````<script>
// Example function from book
function multiplierArrow(factor) {
return (number) => number * factor;
}

// Same as above, but using Declaration Notation instead of Arrow
function multiplierDeclaration(factor) {
return function multiply(number) {
return number * factor;
};
}
</script>
``````

I opened up the file in Google Chrome and started playing around in the JavaScript console. Here are some things I noted (lines with `<` are the results returned by the Chrome console):

``````> multiplierArrow
< ƒ multiplierArrow(factor) {
return number => number * factor;
}
``````
• In this example, by typing in the function name, without parentheses, we receive back the function itself. So, in this case, this is like setting `const x = 2`, typing `x`, and getting the value `2`. I’ve read so many times that, in JavaScript, we can treat “functions as values”. I’m slowly starting to understand that.
``````> multiplierArrow()
number => number * factor
``````
• Here, note the parentheses. Now we are invoking the function. `multiplierArrow()` is a function that takes the parameter `number`.
``````> multiplierArrow(3)
< number => number * factor
undefined
``````
• This is similar to the example just above. However, in this case, we’ve passed the argument `3`. So, the return value of this is: a function that takes the parameter `number`, with `factor` is bound to `3`.
``````> multiplierArrow(3)(5)
< 15
``````
• Now I understand why the book’s example gave us 10. Here, we are calling `multiplierArrow(3)` (a function that takes one parameter with factor bound to `3`) and passing the argument `5`.
• In the book’s example, `twice` was set to `multiplier(2)`. So `twice` itself is a function that takes a parameter `number`.

I’m still new to JavaScript and I think the arrow function syntax was throwing me off a bit. That’s why I made the same function shown in the book through a function declaration. I went through the same examples as I did with the arrow function:

``````> multiplierDeclaration
< ƒ multiplierDeclaration(factor) {
return function multiply(number) {
return number * factor;
}
}
> multiplierDeclaration()
< ƒ multiply(number) {
return number * factor;
}
> multiplierDeclaration()
< ƒ multiply(number) {
return number * factor;
}
> multiplierDeclaration(2)
< ƒ multiply(number) {
return number * factor;
}
> multiplierDeclaration(2)(8)
< 16
``````

As I continue trying to learn web development, I see that, as with many things, “attention to detail” is important. Going through these examples gave me a better understanding of closures and values relating to functions. Particularly, it was reminder to ask myself, “what value am I expecting here” and to pay attention to the differences between values of a function, function call, and function return value.