Return to Answer

##JavaScript does not have block scope. Variables introduced with a block are scoped to the containing function or script

JavaScript does not have block scope. Variables introduced with a block are scoped to the containing function or script

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};
var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
 funcs[i] = function() {
 console.log("My value: " + i); //each should reference its own local variable
 };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
 funcs[j]();
}

Update

With ES6 now mainstream, we can now use the new let keyword to create block-scoped variables:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};
var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
 funcs[i] = function() {
 console.log("My value: " + i); //each should reference its own local variable
 };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
 funcs[j]();
}

Look how easy it is now! For more information see this answer , which my info is based off of.

This is exactly why this bug is so tricky. Even though you are redeclaring a variable, Javascript won't throw an error, and JSLint won't even throw a warning. This is also why the best way to solve this is with a closure, which is essentially the idea that in Javascript, inner functions have access to outer variables because inner scopes "enclose" outer scopes.

This also means that inner functions "hold onto" outer variables and keep them alive, even if the outer function returns. To utilize this, we create and call a wrapper function purely to make a new scope, declare ilocal in the new scope, and return the inner function that uses ilocal:

This is exactly why this bug is so tricky. Even though you are redeclaring a variable, Javascript won't throw an error, and JSLint won't even throw a warning. This is also why the best way to solve this is to take advantage of closures, which is essentially the idea that in Javascript, inner functions have access to outer variables because inner scopes "enclose" outer scopes.

This also means that inner functions "hold onto" outer variables and keep them alive, even if the outer function returns. To utilize this, we create and call a wrapper function purely to make a new scope, declare ilocal in the new scope, and return an inner function that uses ilocal (more explanation below):