2

Possible Duplicate:
Declaring Multiple Variables in JavaScript

I was setting some variables in jQuery and someone suggested I do it this way:

var $wrapper = that.parents(".wrapper"),
$prettyCheckBox0 = $wrapper.find(".prettyCheckbox small:eq(0)"),
$prettyCheckBox1 = $wrapper.find(".prettyCheckbox small:eq(1)"),
$prettyCheckBox2 = $wrapper.find(".prettyCheckbox small:eq(2)"),
standard = $prettyCheckBox0.parents("span").parents("label").prev("input").val(),
professional = $prettyCheckBox1.parents("span").parents("label").prev("input").val(),
premium = $prettyCheckBox2.parents("span").parents("label").prev("input").val();

Though this works, I was wondering if anyone has a reason on why to pick commas over semicolons. How does it work? It seems like it would cause syntax errors. Also, why is there one one var?

0

5 Answers 5

5

The end of your question contains the answer to the beginning: var can be used for defining multiple variables in the same statement, like this:

var a = 1, b = "foo", bar = xyzzy(), baz = $('#something');

This is what happens in your snippet, and it's equivalent to

var a = 1;
var b = "foo";
var bar = xyzzy();
var baz = $('#something');

There isn't an objective benefit from picking one over the other, it is a matter of coding style/convention.

2
  • [cue angry True Believers of both camps pouncing on me for not praising The Only True Way To Initialize Variables, worse, for Supporting The Clearly Inferior Heresy Of The Other Way] Jun 8, 2011 at 15:17
  • Don't worry...I did the same thing. I haven't gotten any nasty comments yet either. Jun 8, 2011 at 15:21
3

The example you posted is a single long line with multiple var declarations on it.

Putting a semi-colon at the end would require you to repeat the var keyword each time (to keep things technically the same):

var $wrapper = that.parents(".wrapper");
var $prettyCheckBox0 = $wrapper.find(".prettyCheckbox small:eq(0)");
// and so on

I'm not sure if either is technically better. Personally I prefer semi-colons and repeating my var keyword to so everything lines up the same, is more readable, and more maintainable since I don't have to worry about missing commas when adding a new declaration (but that's strictly personal preference).

2

Basically, you've defined a comma-separated list of variables with names and initializers, which is why you don't need to repeat var.

The main advantage of using commas over semi-colons might be that you don't have to type var so often. Otherwise, the two mechanisms are essentially the same.

2
  • may I request you to have a look at a jquery question on a different topic here : stackoverflow.com/questions/13137404/… ? Oct 31, 2012 at 7:37
  • @IstiaqueAhmed: I went, I looked, I comprehended not; I left. I didn't know I'd got any up-votes for JavaScript questions! I'm not sure what particular combination of circumstances induced me to answer a JavaScript question well enough to get an up-vote, but there are more lines of JS in the question than there are in the corpus of JS that I've written. Oct 31, 2012 at 16:18
1

I think that's because in javascript, you can initialize variables like:

var $a=0,$b=2;

That looks fine for small variables, but I think it looks ugly and has poor maintainability to do it for large operations such as your example. For the purpose of readability, I'd stick with semicolons when you have a large line for one variable.

Compare:

var $wrapper         = that.parents(".wrapper");
var $prettyCheckBox0 = $wrapper.find(".prettyCheckbox small:eq(0)");
var $prettyCheckBox1 = $wrapper.find(".prettyCheckbox small:eq(1)");
var $prettyCheckBox2 = $wrapper.find(".prettyCheckbox small:eq(2)");
var standard         = $prettyCheckBox0.parents("span").parents("label").prev("input").val();
var professional     = $prettyCheckBox1.parents("span").parents("label").prev("input").val();
var premium          = $prettyCheckBox2.parents("span").parents("label").prev("input").val();

If there is any performance difference, it's negligible. But this version is much easier to read and understand for the programmer. It's also easier to see that some variables have '$' and some don't.... was that intentional?

1

Have a look at the MDC docs for the var keyword.

You can use the var keyword once, and initialise multiple variables in one go. This has several advantages:

  • File-size. You can save a few bytes each time by missing out the var keyword.
  • Code cleanliness. You can indent the code nicely (your example doesn't do this) so you can see at a glance that all the lines of code are initialising variables.
  • Logic. The variable definition will always be "hoisted" by the JS parser to the top of the function. If you put all your variable definitions at the top of your code with one var keyword, it will remind you that they are defined once, at the very beginning of your function.

Not the answer you're looking for? Browse other questions tagged or ask your own question.