16

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.

Leopd
  • 41,333
  • 31
  • 129
  • 167
  • 1
    Well it isn't any faster, sadly: http://jsperf.com/number-of-vars – Alex Wayne Mar 28 '11 at 06:44
  • 1
    The first says: *These are the variables. Period.* The second says: *Here’s one, and then another one, and then another one, and …* – Gumbo Mar 28 '11 at 06:47

5 Answers5

9

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.

Cebjyre
  • 6,552
  • 3
  • 32
  • 57
  • 5
    +1, this is IMO a much better version of my answer. And the last point, about using semicolon instead of comma, is exactly why our team has stopped doing commas---way too many globals got introduced in exactly that fashion. – Domenic Mar 29 '11 at 03:24
4

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

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
3

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)

Dmitry Evseev
  • 11,533
  • 3
  • 34
  • 48
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.

Domenic
  • 110,262
  • 41
  • 219
  • 271
0

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.

Decoder
  • 501
  • 4
  • 5