JavaScript Variable Definition: Commas VS. Semicolons

JavaScript variable definition: Commas vs. Semicolons

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.

Use of commas versus semicolons?

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!

Is the use of , (comma) instead of a proper variable definition like const, var or let, in a chain of declarations, a good JS practice?

It is totally equivalent same.

You can refer Declaring and initializing two variables

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

JavaScript variable definition: Commas vs. Semicolons

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.

jQuery - commas vs. semicolons

Normally commas are used to separate out variable declarations, but the version you have shown is using them to separate out expressions. While this is nuanced, it is still significant.

Note that all of the expressions are assigning variable names to the global scope (technically the Lexical Environment in the case of your example, it is possible those variables are defined in a more local scope than the global one).

A better example would have been

var one = 1, two = 2, sum = function(a,b){ return a+b; };

_{Note that if you tried to call a function in the variable declaration here it would have caused an Uncaught SyntaxError: Unexpected token (.}

As all of the declarations are inherently prefaced by the var and are therefore local variables (in the Variable Environment).

Contrast the example with

one = 1, two = 2, sum = function(a,b){ return a+b; }, sum(one,two);

which is essentially your example in the question, and the difference is mostly the scope of the variables and also that as each is simply an expression, the function call is allowed.

More on the Comma operator^MDN

Concatenating multiple statements using Commas vs Semi colons

Minifiers tend to favour commas where possible because it allows things like if statement bodies to be shortened. For example:

if (x) {
    y = 10;
    z = 20;
}

The above can be minified using a comma to remove the curly braces (since they are optional if the if statement body is only a single statement):

if (x) y = 10, z = 20;

In cases like this it does result in shorter code, which is what minifiers are aiming for.

Javascript statement ending with comma or semicolon when object definition

1. You must define a function before calling it.
2. Semicolons in javascript are optional. Basically, a semicolon is used to end the statement while comma is when you working with objects. You could try reading these article JavaScript variable definition: Commas vs. Semicolons and
   Do you recommend using semicolons after every statement in JavaScript?

Javascript can be written in an oop way *see defining javascript class but i recommended to use Base.js, it will make your life easier.

You probably need this but it is not that fun to read :) javascript patterns

What is the difference between a single comma-separated variable declaration, and multiple declarations?

The comma separated declaration is just a short hand. Executing-wise there's no difference. But it can help reduce the size of your javascript file if you are declaring a lot of variables.

You can even do:

var a = 1, b = 'string', c = new Date();

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

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.

Using comma in Javascript variable declaration

It equivalent to

var res = []; 
var matches; 

where matches is undefined

---

Related Topics