Closure Demo in JS

by basarat

JavaScript

// Clear
var funcs = [];
// Setup 
for (var i = 0 ; i < 10 ; i++) {
    funcs.push(function () { console.log(i) });
}
// Call
for (var j = 0 ; j < funcs.length ; j++) {
    funcs[j]();
}

// Clear
funcs = [];
// Setup 
for (var i = 0 ; i < 10 ; i++) {
    var foo = i;
    funcs.push(function () {
        console.log(foo)
    });
}
// Call
for (var j = 0 ; j < funcs.length ; j++) {
    funcs[j]();
}

// -------------- GOOD CODE:
// Clear
funcs = [];
// Setup 
for (var i = 0 ; i < 10 ; i++) {
    (function () {
        var foo = i;
        funcs.push(function () {
            console.log(foo)
        });
    })();
}
// Call
for (var j = 0 ; j < funcs.length ; j++) {
    funcs[j]();
}

//---------------- BAD CODE: 
// Clear
funcs = [];
// Setup 
for (var i = 0 ; i < 10 ; i++) {        
    funcs.push(function () {
        var foo = i;
        console.log(foo)
    });    
}
// Call
for (var j = 0 ; j < funcs.length ; j++) {
    funcs[j]();
}