What is the advantage of initializing multiple javascript variables with the same var keyword?

When I read javascript code that is clean and written by people who are obviously very good at it, I often see this pattern

var x = some.initialization.method(),
    y = something.els(),
    z;

What is the advantage of that over writing

var x = some.initialization.method();
var y = something.els();
var z;

The second format is easier to maintain, since each line exists by itself. So you can erase a line or add a line, and not have to look around to see if it's the first or last variable to be initialized. This also means source control diffs/merges will work better. Given these disadvantages, I'm guessing there's some advantage to the first format -- but what is it? Surely they execute identically because it's the same to the parser.

Solution 1:

There's a slight advantage with the size of the javascript that is sent to the browser; Google's Closure compiler in 'whitespace only' mode will compile the single var version into:

var x=some.initialization.method(),y=something.els(),z;

and the multi as:

var x=some.initialization.method();var y=something.els();var z;

I changed your else to els so that it would compile.

This isn't a massive gain (especially if you are also compressing the files), and the 'simple' compilation mode will do this for you anyway, so I probably wouldn't be too concerned about it unless you can find more compelling reasons.

One reason you may not want to do this is that if you accidentally use a semicolon instead of a comma you've just found a global.

Solution 2:

I can't stand all variables in one statement because the variable declaration may be very far from where it's actually used. I know all the arguments for it, and that variable hoisting moves all the vars to the top of the function anyway. But when I see a variable declared at the top of a function and it doesn't get used for another 20 lines, it drives me kind of crazy, specially for loop index variables

Solution 3:

The only real advantage is that it saves a couple of bytes per variable, which in a large JS file can add up; remember that JS files are often sent over the wire.

Personally I much prefer a single var per line.

Solution 4:

Using a single var statement at the top of your functions is a useful pattern to adopt. It has the following benefits:

• Provides a single place to look for all the local variables needed by the function

• Prevents logical errors when a variable is used before it’s defined

• Helps you remember to declare variables and therefore minimize globals

• Is less code (to type and to transfer over the wire:)

• JSLint likes this pattern

The single var pattern looks like this:

function func() {
    var a = 1,
        b = 2,
        sum = a + b,
        myobject = {},
        i,
        j;

    // function body...

}

For more info look there

The main advantage is that you'll have all variables defined at the very beginning of your function, so you won't end up with a lot of globals occured from variables declared without var, and your code won't fall because of misplaced var statement (calling variable before declaring it)