Consequences of missing a comma when declaring multiple variables in javascript?

Question

I'm new to javascript and have picked up an application developed by another team recently.

In this program in one place where they declare several variables at once there is a missing comma like:

var me = this,
    missing = this.missingComma
    grid = something.Something;

What if any are the consequences of there not being a comma after the second entry. The relevant bit appears to work when just running it. The code has no tests and since it's javascript I cant compile it, also I dont really know what its supposed to do so unfortunately 'not falling over' is currently my best guess at 'does what its supposed to do'!

Why does it work? Isn't this a syntax error?

score 4 · Accepted Answer · answered Jan 22 '14 at 15:41

In JavaScript the semi-colons aren't required to indicate the end of a line. A linebreak is sufficient to indicate that the next line is a separate statement rather than a continuation of the previous line of code (as is the case when you use the comma to indicate multiple variables).

Your code is essentially the same as this:

var me = this, missing = this.missingComma;
grid = something.Something;

Since that declares the grid variable without the var keyword, you'd end up with grid being created in the global, rather than the current, scope. That's generally something you want to avoid but it's not going to be the end of the world if it does happen - in this case it may even be intended (though I'd guess not).

are there any consequences to putting extra newlines inbetween the comma seperated values? One of the things I've seen (and dont like!) is lots of query logic being done all in one big assignment block at the top of a method. Since there is only 1 var and commas you cant see any logical structure to the statements even though there are little interrelated groups — JonnyRaa, Jan 22 '14 at 17:22

score 0 · Answer 2 · answered Jan 22 '14 at 15:48

0

Javascript is ubiguitous with a a lot of freedom ;)

Maybe it helps you to understand some peculiarity of JS if you read some additional info about semicolons, commas and newlines in Javascript:

http://www.codecademy.com/blog/78-your-guide-to-semicolons-in-javascript

For the sake of readability, I would suggest you to use the classic approach, anyway.

var me  = this;
var you = that;

or at least

var me = this, you = that;

For the rest, I think that Anthony Grist has brought it to the point.

answered Jan 22 '14 at 15:48

alphabit

454
3
8

1

I'd say that doing `var me = this, you = that;` is more readable than not including the new line, to be honest. For me, at least, it makes it easier/faster to scan the code and see which variables are being declared and what their values are going to be, since each line is a separate variable. Obviously everybody has different ideas on what makes code the most readable though. – Anthony Grist Jan 22 '14 at 15:59
That's true and it's a matter of personal preference and style. :) Coming from other languages, I tend to work in the mentioned classic approach (that is what my eyes like). – alphabit Jan 22 '14 at 16:19
I definitely prefer using both vars - using the commas seems dangerous based on this example + the different indentation makes it look wrong to me – JonnyRaa Jan 22 '14 at 17:08
Me too, and there are other reasons for using semicolons and the "classic" declaration approach (i.e. minifiers, packers, obfuscators, editor bracket assistance). – alphabit Jan 22 '14 at 18:29

score 0 · Answer 3 · edited May 23 '17 at 11:56

Well even though in javascript the semicolon is not required it is a must now a days, because if you want your JavaScript to get minimized, it must have all semicolons. Minimization puts your complete JavaScript in one line... replacing long variable names with short ones, etc.

On the other hand... back to you question.

If you declare your var inside a JavaScript "namespace" (actually an object) then all the variables are "private" and you could choose to make the ones "public" by using the reveal pattern.

This is a good practice, else all you variables are declared on the windows scope... which actually can then be overwritten by any other part of your page that uses the same variable name, even if you thought it was completely independent.

So you could actually do something like this :

var MyNamespace || {} 
// this delcares an object MyNamespace only if it doesn't exists yet
MyNamespace.Logic = function(){
    var self = this,
    myPrivateVariable = "Hello",
    self.myPublicVariable = "World",
    self.printHello = function(){
        alert(myPrivateVariable +' ' +self.myPublicVariable );
    };//this semicolon closes the var statement
};

Now you can use somehwer on you page folowing logic

var newInstanceOnMyLogic = new MyNamespace.Logic()

This is equivalent of writing var newInstanceOnMyLogic = new window.MyNamespace.Logic();

But your variables myPrivateVariable and myPublicVariable are no longer on the windows context and can't be overwritten

Now if you write something like

alert(newInstanceOnMyLogic.myPublicVariable);

you'll get a "World"

But

alert(newInstanceOnMyLogic.myPrivateVariable );

you'll get an undefined

and newInstanceOnMyLogic.printHello();

will get an alert of "Hello World"

Consequences of missing a comma when declaring multiple variables in javascript?

3 Answers3