JavaScript: Why does closure only happen if I assign the return function to a variable?

user_1290457 0
Viewed 2268

Even after reading You don't know JS and JavaScript: The Core I still couldn't understand the behavior of the following code.

Why, when I call counter()(), do I get no closure, but if I assign a variable to the result of counter(), like var getClosure = counter(), I then get a closure when calling getClosure()?

function counter() {

    var _counter = 0;

    function increase() { return _counter++ }

    return increase;
}

// Double ()() to call the returned function always return 0, so no closure. 
counter()() // returns 0
counter()() // returns 0
counter()() // returns 0
counter()() // returns 0

var createClosure = counter();

createClosure() // returns 0
createClosure() // returns 1
createClosure() // returns 2
createClosure() // returns 3
closures javascript
3 Answers

_counter is the local variable within function counter(). Every time when you call counter() a new _counter will be created.

But var createClosure = counter() only called the function 1 time, that's why _counter is not newly created every time and 'remembered' there (that's where closure happens)

user_44686480

Each time you call counter()(), it creates a new function and a new closure. So the result is always 0.

On the contrary, when var createClosure = counter(); is executed, a function and closure are created and saved in the variable createClosure. Next time when you call createClosure(), the saved one is invoked and the created closure is used. Therefore the results are 0, 1, 2, 3, ...

user_52472120

To put in another way, the return value of the counter() function, which is the closure, isn't persisted or rather it is discarded when you simply call the function as is.

However after assigning that return value to var createClosure. You are able to call the closure as many times as needed

user_57547230
Related