# 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.