Javascript for loop index variables become part of

Question

Perhaps I'm not aware of how for loop index variables get scoped, but I was very surprised when one of my loops didn't complete, seemingly because a function called from within a loop contained an i for its for loop index as well.

Here's a little script I put together to demonstrate this behavior:

var loopOne = function(test) {
    for(i = 0; i < test.length; i++)
        console.log(getMask(test));
};

var getMask = function(pass) {      
    var s = "";
    for (i = 0; i < pass.length; i++) {
        s = s + "*";
    }
    return s;      
};

loopOne('hello');

If I run this in Chrome and look at the console log, I should see ***** five times. However, I only see it once. Upon further inspection, if I type i in the Chrome javascript console, it will output 6 ( = 'hello'.length + 1). This makes me think that i has become a part of the global scope and is not limited to the scope of the for loop for which it was needed.

Is this correct? If so, what's a better practice for defining the index variable of a for loop in javascript?

Answer 1

You should always declare your variables with var:

for(var i = 0; i < test.length; i++) ...

Answer 2

When you declare your variables with var, you scope them to the current execution context.

When you don't, they become properties of the global object (window in a browser).

Answer 3

In Javascript, variables are scoped with the var keyword. When declaring variables with var, the variable is scoped to the current function. When assigning to a variable without using the var keyword, it is assumed you're talking about an already defined variable in the same or a higher scope. If none is found, the variable is created in the highest scope.

Bottom line: declare all your variables using var.