# Trying to understand closure

Hello, I’m not at my desk at the moment so hopefully this post is not too janky.

I am reviewing the YDKJS book (3rd Ed) and I am having trouble understanding one of the examples they gave to explain the concept of closure.

Can someone explain (like I’m a 5 year old) how/why console.log(twice(5)) returns 10.

I’ve read it several times and I am not getting it:

Happy to type it out once I’m back at my desk if it’s not legible in the photo.

Many thanks.

`multiplier` accept a number and returns a function
the function returned for `multiplier(2)` is `number => number * 2`
this function is stored in `twice` and when you call `twice(5)`, the number 5 is passed in the `number` parameter so it returns 10

Let’s rewrite that example a bit…

``````function multiplier(factor) {
// return a function...
// this function takes a number and
// multiplies by factor (a value in the enclosing scope, closure, of the multiplier function
return function(number) { return number * factor }
}

const multiplyBy2 = multiplier(2)
/*
under the hood multiplyBy2 looks like this.
multiplyBy2(number){
return number * 2; // factor (is a variable in the closure its value is 2)
}
*/

const multiplyBy11 = multiplier(11)
/*
under the hood multiplyBy11 looks like this.
multiplyBy2(number){
return number * 11; // factor (is a variable in the closure its value is 11)
}
*/

console.log(multiplyBy2(10)); // 20
console.log(multiplyBy11(8)); // 88
``````

Javascript creates those functions and when it is time to run them it will evaluate ‘factor’ to the value that
is in closure (the local enclosing scope)

1 Like

Thanks @milesmeow and @ilenia.

I’m still a little confused though. Following the “under the hood” explanations, what happens under the hood at this stage: `console.log(multiplyBy2(10));`

This is what I understand happens under the hood:

1. `multiplyBy2` returns `number * 2`
2. So then we have `console.log((number*2)(10))`…?
3. How does that become `console.log(10 * 2)`…?

I guess I don’t get how 10 becomes the `number` parm…?

Thanks!

Oh wait…scratch that. Is this it:

1. `multiplyBy2` returns `number => number * 2`
2. So then we have `console.log(number(10))`
3. This becomes `console.log(10 * 2)`

Just for clarification, the example is from Eloquent JavaScript, not YDKJS. Here is the chapter for anyone interested. And here is YDKJS Scope & Closures book as well, just for good measure.

Anyway, you seem to have your answer so I’m guessing there is no need for further explanations.

1 Like

You’re getting really close. I think maybe the thing that’s tripping you up is not understanding that functions can be assigned to variables in JavaScript.

Using @milesmeow 's code, the function `multiplier` returns a function. The line `const multiplyBy2 = multiplier(2)` is assigning the function returned from `multiplier` to the variable named `multiplyBy2`.

We can now call `multiplyBy2` just like any other function, by using `()`. It also takes one argument, in this case we called it `number`. So the line `multiplyBy2(10)`, is calling the function `multiplyBy2` with the argument `number` as the value `10`.

So the second step you wrote

1. So then we have `console.log(number(10))`

should instead be `console.log(multiplyBy2(10))` which evaluates down to `console.log(10 * 2)`.

1 Like

So sorry. Yes you are right. I mixed up the two books. Thanks for setting it straight.

This is incorrect. And if you will understand why - you will understand closure `multiplyBy2` returns `number => number * factor`, not `2`

This would be much greater example of closure in my opinion:

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

let multiply = multiplier(1);
multiply(5); // 5
multiply(5); // 10
multiply(5); // 15
multiply(5); // 20
``````
2 Likes

Great thread! Thought I knew what was going on but then I got confused. And I realized I’d never seen this before.

Thank you.

Still not sure I understand why/when to use in practice though OK, I think I’m getting it. I’m sure I’m only repeating exactly what has been said before but I need to put it in my own words:

Following the same code as @milesmeow:

``````function multiplier(factor) {
return function(number) { return number * factor }
}

const multiplyBy2 = multiplier(2)

multiplyBy2(10)
``````

So - this is how the code would run:

1. `multiplier(2)` returns: `function(number) {return number * 2}`
2. Therefore, `multiplyBy2` = `function(number) {return number * 2}`
3. So `multiplyBy2(10)` just means run the returned function with the argument of 10: `function(10) {return 10 * 2}`