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

Question

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.metho         


        

Answer 1

Other than the on-wire size, it probably helps interpreter performance as well. From Professional Java Script for Web Developers:

A single statement can complete multiple operations faster than multiple statements each performing a single operation. The task, then, is to seek out statements that can be combined in order to decrease the execution time of the overall script.

It went on to recommend declaring variables in a single line.

Answer 2

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.

Answer 3

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

Answer 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)

Answer 5

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.