Behaviors of Javascript closures and global functions

Question

While learning about javascript closures, I came across this answer https://stackoverflow.com/a/111111/3886155 on stackoverflow. It's a very good explanation of closures. But I have some confusion in Example 4 and Example 5.

I just copy entire snippet here:

Example 4:

var gLogNumber, gIncreaseNumber, gSetNumber;
function setupSomeGlobals() {
    // Local variable that ends up within closure
    var num = 666;
    // Store some references to functions as global variables
    gLogNumber = function() { console.log(num); }
    gIncreaseNumber = function() { num++; }
    gSetNumber = function(x) { num = x; }
}

setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); // 667
gSetNumber(5);
gLogNumber(); // 5

var oldLog = gLogNumber;

setupSomeGlobals();
gLogNumber(); // 666

oldLog() // 5

After reading some examples I can say that whenever function inside the function executes it can always remember the variables declared inside outer function. I agree that if these closure variable updated anyway it still refers to the new variable value. My problem in this example is specially related to var oldLog=gLogNumber; How it can return old number after call to the setupSomeGlobals();?

because now the var num has reset.So why it is not using this new num value 666?

Now Example 5:

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + i;
        result.push( function() {console.log(item + ' ' + list[i])} );
    }
    return result;
}

function testList() {
    var fnlist = buildList([1,2,3]);
    // Using j only to help prevent confusion -- could use i.
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

Here they have pushed functions into array and executed them after loop finishes.But now reference to the closure variables is the latest one after loop finishes.Why not old one?

In both examples you are just assigning function definition to variable or array index.But first one points to old and second one points to latest.Why?

score 0 · Answer 1 · edited May 23 '17 at 12:10

How it can return old number after call to the setupSomeGlobals()

num is not globally scoped, so the value num is in the context of which reference of gLogNumber is invoked.

After invocation of setupSomeGlobals method again, reference to gLogNumber got changed. try this

console.log(Object.is( gLogNumber, oldLog )); //true
setupSomeGlobals();
console.log(Object.is( gLogNumber, oldLog )); //false

So, oldLog retained old reference and hence old value of num, but gLogNumber got new num.

But now reference to the closure variables is the latest one after loop finishes.Why not old one?

For this problem, have a look at

JavaScript closure inside loops – simple practical example.

Behaviors of Javascript closures and global functions

1 Answers1