What are the benefits of commas compared to semicolons in jQuery? [duplicate]

This question already has answers here: Closed 11 years ago.

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(),
pr开发者_JAVA技巧ofessional = $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?

---

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.

---

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

---

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.

---

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?

---

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.