I've been trying to learn about closures, but one thing still perplexes me. If I have the following code:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// Returns "3"

If I call add() three times, why dosen't it set counter to zero every time, then return the anonymous funtion that increments counter by one? Does it skip over it once the self-invoking function runs? Sorry if the question seems simple, I'm having a hard time understanding it. Any help would be greatly appreciated.

I've been trying to learn about closures, but one thing still perplexes me. If I have the following code:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// Returns "3"

If I call add() three times, why dosen't it set counter to zero every time, then return the anonymous funtion that increments counter by one? Does it skip over it once the self-invoking function runs? Sorry if the question seems simple, I'm having a hard time understanding it. Any help would be greatly appreciated.

• javascript
• scope
• closures
• self-invoking-function

Share Improve this question Follow asked Apr 29, 2017 at 11:34 Mister_MaybeMister_Maybe 14711 gold badge11 silver badge1515 bronze badges 2

• 2 add is not the outside function, declaring counter; it's the inside function, referring to counter. Look real close. – user663031 Commented Apr 29, 2017 at 11:37
• just console.log(String(add)) and you'll see. There's no counter = 0 in that function. – georg Commented Apr 29, 2017 at 11:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

If I call add() three times, why dosen't it set counter to zero every time, then return the anonymous funtion that increments counter by one?

Because add is that anonymous function, because the function containing counter got called and its result was assigned to add:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
//^^----------- calls the outer function, returns the anonymous inner function

If you didn't call it:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
});
//^--- no () here

...then add would do what you said, it would return a new function with its own counter, each time you called it:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
});

var a = add();
var b = add();
var c = add();

console.log("a's first call:  " + a());
console.log("a's second call: " + a());
console.log("a's third call:  " + a());
console.log("b's first call:  " + b());
console.log("b's second call: " + b());
console.log("b's third call:  " + b());

console.log("a's fourth call: " + a());
console.log("b's fourth call: " + b());

.as-console-wrapper {
  max-height: 100% !important;
}

That's not resetting counter, that's creating a new counter each time.

The value assigned to add is the result of the IIFE, in which the closure was created. Maybe it's more obvious what will happen when add() is called, when its creating is written as follows (equivalent to your original code):

var add;
(function () {
    var counter = 0;
    add = function () {return counter += 1;};
})();

By calling add() you are not actually executing outer function but instead you are executing inner function. For inner function, counter is like a global variable that has been set once to 0 and then it was never set again to 0. On calling add() you are executing lines inside inner function thus incrementing counter.