2

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.

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

3 Answers3

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
2

By calling add() you are not actually executing outer function but instead you are executing inner function. For inner functtion, 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 increamenting counter.

Zohaib Ijaz
  • 21,926
  • 7
  • 38
  • 60
2

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;};
})();
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • So what my code does is run the outer function _once_, which sets the variable counter to zero, and then sets add to a function that increments counter? So it would be technically referring the variable counter from another function, the one that is self invoking? – Mister_Maybe Apr 29 '17 at 13:15
  • @Mister_Maybe Yes, exactly that. And "referring to the variable from another scope" is exactly what [closures](http://stackoverflow.com/q/111102/1048572) are about – Bergi Apr 29 '17 at 16:05
  • Ah, I get it now. Thank you! – Mister_Maybe Apr 29 '17 at 18:28