Scope and maintainance of variable state in self invoking anonymous function vs anonymous functions

Question

I want to understand the way anonymous self invoking function is able to maintain the last updated state of variable but why is it not possible in case of normal anonymous functions .Both functions are closures still are behaving differently while maintaining the previous state of variable. ex:

var selfInvokingfunc= (function () {
    var a=2;
    var myprivatefunction = function () {
        a=a+2;
        console.log(a);

    }
    return {
        mypublicfunction : function () {
            myprivatefunction();
        }
    }
})();

selfInvokingfunc.mypublicfunction() ;//a is 4
selfInvokingfunc.mypublicfunction();  // a is 6

var nonSelfInvokingAnonymousFunction = function () {
    var a=2;
    var myprivatefunction = function () {
        a=a+2;
        console.log(a);
    }

    return {
        mypublicfunction : function () {
            myprivatefunction();
        }
    }
};

nonSelfInvokingAnonymousFunction().mypublicfunction(); //a is 2
nonSelfInvokingAnonymousFunction().mypublicfunction(); //a is 2

Same works fine for non self invoking if invoked as :

var temp=nonSelfInvokingAnonymousFunction();
temp.mypublicfunction() ; // a is 4
temp.mypublicfunction(); // a is 6

Please help me understand the same.

Answer 1

Every time the main body of the outer function is executed and the lines:

var a=2;
var myprivatefunction = function () {
// ...

are run, a new binding for those variables are created in memory.

With the self-invoking function, since it's executed immediately and once, there then exists one binding for the a variable, which the mypublicfunction property can see via the closure.

In contrast, with your nonSelfInvokingAnonymousFunction, every time you invoke it, you create a separate binding for a:

nonSelfInvokingAnonymousFunction().mypublicfunction(); //a is 2
// ^^^ creates an a           ^^^^
nonSelfInvokingAnonymousFunction().mypublicfunction(); //a is 2
// ^^^ creates a SEPARATE a   ^^^^

When you have two separate bindings for the a variable, calling mypublicfunction on a function that closes over one of the bindings will have no effect on the other binding.

In your last code, when you do

var temp = nonSelfInvokingAnonymousFunction();
//         ^^^ creates an a           ^^^^
temp.mypublicfunction() ; // a is 4
temp.mypublicfunction(); // a is 6

You create a single a, and a temp whose mypublicfunction function closes over that one a, so calling mypublicfunction multiple times results in that a changing multiple times.