Use of commas versus semicolons in JavaScript?

Question

Given the following code

var fn = function () {
    var x = 'x',
    y = 'y';
    this.a = 'a',
    this.b = 'b',
    this.c = 'c';
    this.d = 'd',
    this.e = 'e';   
}

You can see that there is a mix of both.
What would be the benefit of using one or the other?

My understanding is that the semicolon is to end the statement. And comma should be used to string together multiple declarations.

So is it safe to say that with this example then there should only be two semicolon?

var fn = function () {
    var x = 'x',
    y = 'y';
    this.a = 'a',
    this.b = 'b',
    this.c = 'c',
    this.d = 'd',
    this.e = 'e';   
}

Answer 1

No, comma has three meanings.

1. With variable declartions, it just let you omit the var before each variable.
2. With expressions, "The comma operator evaluates both of its operands (from left to right) and returns the value of the second operand."
3. Separate arguments in function declarations and function calls, but that should be obvious to every programmer.

Example for two;

alert((2,3)); //3

Note that the comma in the var statement is not the comma operator, because it doesn't exist within an expression. Rather, it is a special character in var statements to combine multiple of them into one. Practically, that comma behaves almost the same as the comma operator, though.

MDN

When is the comma operator useful?

Answer 2

It's best to always remain consistent with convention. It's either all semi-colons or all commas, and I'm sure you'd prefer to use semi-colons rather than commas everywhere.

There is no speed gain as well, so there's nothing to worry about.

Answer 3

It really doesn't matter. There's no speed benefit to using commas as far as I know.

Just use whatever you prefer :)

This is what JavaScript - The Good Parts has to say:

The comma operator can lead to excessively tricky expressions. It can also mask some programming errors.

JSLint expects to see the comma used as a separator, but not as an operator (except in the initialization and incrementation parts of the for statement). It does not expect to see elided elements in array literals. Extra commas should not be used. A comma should not appear after the last element of an array literal or object literal because it can be misinterpreted by some browsers.

Answer 4

The comma operator is an operator that can be used inside an expression. It is used to separate out multiple different expressions and has the meaning "evaluate all of the following expressions, then produce the value of the final expression." For example:

a = 1, b = 2, c = 3

means "evaluate a = 1, then b = 2, then c = 3, then evaluate to the value of the expression c = 3.

The semicolon is not an operator and cannot be used inside an expression. It is used as part of JavaScript syntax to mark the end of an expression that is being treated as a statement. For example, you could say

a = 1; b = 2; c = 3;

And this would mean "there are three statements to do in sequence: evaluate the first expression as the first statement, the second expression as the second statement, and the third expression as the third statement."

In this regard, the two are not completely interchangeable. For example, you cannot write

var a = 1, var b = 2;

Because var a = 1 and var b = 2 are statements, not expressions, and thus can't be separated by commas. You would have to use a semicolon here.

(A note: you could say

var a = 1, b = 2;

because the language specifically permits this use of comma as a part of the syntax of a declaration statement. Here, comma is not used as an operator.)

Similarly, you can't say

a = (b = 1; c = 2);

Because here the right-hand side of the expression must be an expression, not a statement, and ; is used to separate statements. The inner semicolon would have to be a comma instead. (Then again, this code is pretty awkward and unusual in the first place, so you probably shouldn't do this at all!)

From a stylistic perspective, the comma operator is rarely used and is obscure enough that it might trip up reasonably competent JavaScript coders. As a result, I would strongly suggest not using it and instead following the established conventions in JavaScript about using semicolons to terminate statements, even if it would be equivalent and syntactically legal to use commas to separate out expressions that are each used as statements.

Hope this helps!