JavaScript variable definition: Commas vs. Semicol

Question

What are the differences and/or advantages, if any, of using commas when declaring a group of variables rather than semicolons.

For example:

var foo = 'bar', bar = 'foo';

versus

var foo = 'bar';
var bar = 'foo';

I know that if you specify the var keyword on the first variable in the first example it persists across all of the variables, so they both produce the same end result regarding scope. Is it just personal preference, or is there a performance benefit to doing it either way?

Answer 1

No performance benefit, just a matter of personal choice and style.

The first version is just more succinct.

---

Update:

In terms of the amount of data going over the wire, of course less is better, however you would need a hell of a lot of removed var declarations in order to see a real impact.

Minification has been mentioned as something that the first example will help with for better minification, however, as Daniel Vassallo points out in the comments, a good minifier will automatically do that for you anyways, so in that respect no impact whatsoever.

Answer 2

I prefer the var-per-variable notation:

var a = 2
var b = 3

because the other comma-instead-of-another-var notation have these three shortcomings:

1. Hard to maintain
Consider this code:

var a = 1,
    b = mogrify(2),
    c = 3

But hey, what does the mogrify do? Let's print b to find out:

var a = 1,
    b = mogrify(2),
    console.log(b)
    c = 3

breaks stuff

2. Hard to read

The var in the begging of the line clearly communicates that there will be a new variable initiated.

var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => {
        unicorn.legs.map((leg) => {
            leg.log('yes')
        })
    }).sort(),
    c = 3

What the hell is the c = 3 doing there right?

3. Not consistent

Consider this:

var a = 1,
    b = 2,
    c = 3

With var-per-variable every declaration follow the same structure. With comma-instead-of-another-var the first variable is declared in different way than others. If you decide to, say, move the first variable inside a for cycle, you will have to add var to the middle of declarations

Other than preference, it seems like majority of notable projects use the var-per-variable notation

Answer 3

I agree with the other answerers that this is mainly a matter of personal style. But to bring an "Authoritative" opinion into the discussion, this is what Douglas Crockford says on the website of the popular JSLint tool:

But because JavaScript does not have block scope, it is wiser to declare all of a function's variables at the top of the function. It is recommended that a single var statement be used per function. This can be enforced with the onevar option.

Answer 4

I don't think there's any noticeable difference, as far as I'm concerned it's just personal preference.

I hate having multiple var declarations so I usually do:

var 
   one
  ,two
  ,three
  ,four
;

As it's shorter and arguably more readable, no var noise to look at.