CODEWITHSUNDEEP
javascriptnested-loops
bsr
bsr

Reputation: 58662

Javascript - scope of nested for loop index

I remember variables are function scoped in Javascript. But, how is the behavior if I redefine the local variable in a loop. One common use case is nested loops. In the below code, if I change j to i, the outer for loop terminates after one iteration as the value of i in outer scope is same as inner for loop. Since I use var, I was expecting (similar to other language) it is redefined inside inner fo loop. Does this mean in JS, there is no way to redeclare and use local variable within function scope.

for (var i = 0, len = x.length; i < len; i++) {
            ...
            for (var j = 0, len = y.length; j < len; j++) {
                ...
            }
        }

Upvotes: 7

Views: 6467

Answers (3)

Kenny Ki
Kenny Ki

Reputation: 3430

There's no block level scope in JS.

But if it's utmost necessary to have/re-declare the same variable name in your code, you can do:

function loopIt(arr, fn, scope) {
    for (var i = 0, len = arr.length; i < len; i++) {
        fn.call(scope || this, arr[i], i, arr);
    }
}

And use it like:

var firstArr = ["a", "b"];
var secondArr = ["c", "d"];

loopIt(firstArr, function(item, i) {
    var msg = "Hey it's '" + item + "'";
    console.log(msg);

    // if you want access to the parent scope's var
    var scopedItem = item;

    loopIt(secondArr, function(item, i) {
        var msg = "Hello it's '" + item + "' in '" scopedItem + "'";
        console.log(msg);
    });
});

That will give us results of:

Hey it's 'a'
Hello it's 'c' in 'a'
Hello it's 'd' in 'a'
Hey it's 'b'
Hello it's 'c' in 'b'
Hello it's 'd' in 'b'

Upvotes: 0

James Allardice
James Allardice

Reputation: 165951

As you said, JavaScript only has function scope. Variable declarations are hoisted to the top of the scope in which they are declared. Your example is interpreted like this:

var i, j, len; //Declarations are hoisted...
for (i = 0, len = x.length; i < len; i++) { //Assignments happen in place
    for (j = 0, len = y.length; j < len; j++) {

    }
}

As for this part:

if I change j to i, the outer for loop terminates after one iteration

If you replace j with i, then after the first iteration of the inner loop, i will be y.length - 1, and the outer loop will either continue or stop, depending on the difference between x.length and y.length.

If you're interested in the real explanation of the internal workings, the ECMAScript spec (Declaration Binding Instantiation) covers it in detail. To summarise, every time control enters a new execution context, the following happens (a lot more than this happens, but this is part of it):

For each VariableDeclaration and VariableDeclarationNoIn d in code, in source text order do

  • Let dn be the Identifier in d.
  • Let varAlreadyDeclared be the result of calling env’s HasBinding concrete method passing dn as the argument.
  • If varAlreadyDeclared is false, then
    • Call env’s CreateMutableBinding concrete method passing dn and configurableBindings as the arguments.
    • Call env’s SetMutableBinding concrete method passing dn, undefined, and strict as the arguments.

This means that if you declare a variable more than once per execution context, it will effectively be ignored.

Upvotes: 8

xdazz
xdazz

Reputation: 160833

Every var declarement will be put into the top of the current scope, so your code is same as:

   var i, j, len;
   for (i = 0, len = x.length; i < len; i++) {
        ...
        for (j = 0, len = y.length; j < len; j++) {
            ...
        }
    }

Check this: JavaScript Scoping and Hoisting

Upvotes: 4

Related Questions