JavaScript variable definition: Commas vs. Semicolons.

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

Answer 3

The first saves a few characters--so there is a very small saving in terms of the JS filesize and therefore bandwidth consumption. The only time this would become noticable would be in extreme cases.

Answer 4

I prefer the second version (each has its own var). I think that's because I come from a C++ background. In C++, you can declare variables like you do in your first example, but it is frowned upon (it easily leads to mistakes when you're trying to create pointers that way).

Answer 5

If you are minifying your javascript, there is a fairly large benefit:

var one, two, three, four;

becomes

var a, b, c, d;

Where as

var one;
var two;
var three;
var four;

becomes

var a;
var b;
var c;
var d;

That's an additional three instances of var, which can add up over time.

See The "A List Apart" article series "Better Javascript Minification" Part 1 and Part 2

Answer 6

As others have noted, it is a style preference. JSLint might tell you to only have one var per function (if you use the "Good Parts"). Thus if using JSLint to check your code (not a bad idea, IMHO), you'll end up using the first format more than the latter.

On the other hand, the same author, Douglas Crockford, says to put each variable in its own line in his coding conventions. So you may want to uncheck the "All one var per function" checkbox in JSLint if you use it. ;-)

Answer 7

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 8

Fun Fact of the Day: In Javascript you can use commas to group any number of expressions into a single statement. This is basicly an artifact of the for statement, where multiple assignment expressions are often grouped together in the header. Most people do not know that such syntax is still valid outside a for loop. So you can do this

var i=0;
while(i < 10)
  alert(i + ' * ' + i + ' = '),
  alert(i * i + '!!'),
  i++;

alert("Wasn't that fun??");

Instead of

var i=0;
while(i < 10) {
  alert(i + ' * ' + i + ' = ');
  alert(i * i + '!!');
  i++;
}

alert("Wasn't that fun??");

Though most people would advise you not to.

Statements, such as var, cannot be used this way. That is you cannot have var in the middle of a bunch of other comma separated expressions.

Anyway...the more you know...