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.