Javascript中变量赋值后的逗号

Question

function ReplaceContentInContainer(matchClass,content)
    {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems)
        {
        if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1)
            {
            elems[i].innerHTML = content;
            }
        }
    }

I'm trying to figure out what the comma does in the variable assignment ('*'), i; and what that means in the for (i in e) loop.

My best guess is that e is assigned to both all the elements in the document node as well as i . So does that mean that i is a count or reference of the number of elements in the array e (is it an array?)?

edit: Okay. It's just instantiating the variable ( i ) and then i , in the for loop, counts all the elements in the object elem .

Answer 1

That simply separate the declarations.

var elems = document.getElementsByTagName('*'), i;

is the same as

var elems = document.getElementsByTagName('*');
var i;

One is more concise, the other one might be seen as more readable.

In your precise case, you could have used

var elems = document.getElementsByTagName('*');
for (var i in elems)

which would be, in my opinion, the best as the purpose of i would have been obvious.

As the scope of a variable is the function (or global) and not the block, it would have been exactly identical.

Answer 2

That comma is because you define the variable i in the local scope, it's simply part of the var statement. If there wasn't a comma i would be a global.

Your statement is the same as:

var elems = document.getElementsByTagName('*');
var i;

If you use tool for static analysis of the quality of your code, like JSLint for example, it'll force you to write:

var elems = document.getElementsByTagName('*'),
    i;

In few reasons:

1. You define both variables (so you don't have globals)
2. You don't have extra var (you write less... :-))
3. Your code is more readable than the one line version

4. You define all your variables at the same place which is easier for reading than:

   for (var i in elems) { //do something }

There's similar concept in perl, for example:

my ($var1, $var2);

In JavaScript it's the same but you don't need to put the variables inside a list.

Answer 3

i is the part of the var statement.. so it is just creating a new variable... you code is same as

var elements=document.getElementsByTagName('*');
var i;