Why Don't Variables Reset in a Closure (Javascript)

Question

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.

Answer 1

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.

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

Answer 3

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;};
})();