OMG the comma! WARNING RANT!

[Lobos]

I spent my time learning extJS writing code with the coma after the value not before the name (or whatever the correct terminology is) like this:



EditWindow.superclass.constructor.call(this, {
modal: true,
plain: true,
shim: false,
layout:'fit',
defaults: {
msgTarget: 'side'
},
buttons:[
this.saveButton = new Ext.Button({
text:'Save',
handler: this.onSaveButton,
scope: this,
minWidth: 80
}),
this.cancelButton = new Ext.Button({
text: 'Cancel',
handler: this.onCancelButton,
scope: this,
minWidth: 80
})]
});


Now I am seeing lots of user extensions cropping up like this:



EditWindow.superclass.constructor.call(this, {
modal: true
, plain: true
, shim: false
, layout:'fit'
, defaults: {
msgTarget: 'side'
}
, buttons:[

this.saveButton = new Ext.Button({
text:'Save'
, handler: this.onSaveButton
, scope: this
, minWidth: 80
})
, this.cancelButton = new Ext.Button({
text: 'Cancel'
, handler: this.onCancelButton
, scope: this
, minWidth: 80
})]
});


So now my code has portions coded with the coma before and the coma after and I find it as confusing as hell. I learning with the coma after so I HATE seeing the coma before - there is also the fact that it throws an error in JS lint so it is MALFORMED JAVASCRIPT so to all you people putting the coma before STOP IT DAMMIT PLEASE!!!!!!!!!!!!!!

yes I know, shut up and don't look a gift horse in the mouth... move along nothing to see here.... um err sorry.

-Lobos

[shane.fox]

I always put the comma after the field, but I can understand why people do it the other way.

In case you didn't know, a trailing comma in IE will cause a difficult to debug error and putting the comma first prevents this mistake.

If JS Lint is throwing an error on this then I would say that it has a bug. How would JS lint react if I ran my code through YUI Compressor then through JS Lint? My code would be all on one line and thus the commas would be both before and after.

[precariouspanther]

Completely agree - its as annoying as hell. The reason for it is that it makes it easier to comment out a line without having to think about the comma on the previous one - however it actually doesn't help much. Consider the following:


{
fish:true,
chicken:false,
duck:true
}

Commenting out chicken still works exactly the same way:

{
fish:true,
//chicken:false,
duck:true
}
(Still synatically correct)

The only annoying thing is when you comment out the last item in the list, you have to go back and remove the comma from the second last item - so in theory comma before circumvents this.
Problem is - all that it really does is moves the annoyance from the last item, to the first item:


{
fish:true
,chicken:false
,duck:true
}

Commenting out the first item in the list still requires deleting the comma on the following line:


{
//fish:true
chicken:false
,duck:true
}


Still, the main person I see contributing extensions in this format is leet so who am I to complain :p. Just download JavascriptEclipse (https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fjseclipse) and press CTRL + SHIFT + F (by default) and it will fix it all up for you automatically :D. I use Zend studio so integrates nicely with my PHP IDE.

## EDIT ##
Whoops apparently its not due to this but to prevent an annoying debug problem in IE. I personally dev everything in Firefox then "hack it to bits to work in IE". Still - Have to say I prefer the commas after rather than before...

[hendricd]

As long as FF ignores the extra commas in scripts (no it's not IE in this case):



params: { a:1,
b:'tragedy',
reality : "far away",
}

IMHO, I've found that the leading comma approach helps keep me (and others) honest. B)

JS doesn't care if you do this:


params:
{
a
:
1
,
b:'tragedy'
,
reality : "far away",

}
but,,,,,,,, apparently Mr. Crockford does. 8-|

[precariouspanther]

shane.fox - JSLint treats it as "if there is a comma at the end of this line, then the next line should be treated as part of this line".
The reason for this is that javascript does not require semicolons to terminate each line, it autmatically determines wether or not the current line requires a semicolon - or if the newline should be ignored as whitespace and the following line is a continuation. When a comma is present the engine automatically skips the process (as syntatically if nothing follows the next line MUST be past of the following). Putting the comma on the following results in extra work for the engine as it has to determine whether the next line is part of the former - or wether the statement should logically terminate. (All part of ECMA).
Whilst it might make debugging easier for IE (I imagine this is because the error is reported on the line that the comma is actually present on?) it quite likely results in additonal work for the javascript parser. Whether this does or doesn't have an impact I'm unsure - but might be fun for somebody to profile.

[jay@moduscreate.com]

The main problem with adding the comma before your code is that it is absolutely counter intuitive to reading compared to any language that uses the Latin alphabet. If you read books on proper coding technique, they state 'code in blocks, paragraphs and sentences'.

What does that mean? Well, sentences never begin with commas. Paragraphs or blocks of text never begin with commas. So, with that stated, this is probably the main reason why people are going nuts over this relatively new way of coding (thank you saki! :) ).

It has it's advantages, but it is absolutely against the modern way of coding.

I'll be honest. I dislike it.

[jay@moduscreate.com]

To add to my comment above.

What if people wrote like this,
, or like this
, or like that
, or over here
, and here
, and over there.

Makes no sense!

[precariouspanther]

Okay... so I decided to do a little test over my lunchbreak. Keep in mind that with almost all profiling its completely subjective as cosmic rays hitting my processor could affect the results - but here is what I got anyway:



Average Min Max
After 1434.8ms 1382ms 1498ms

Before 1508.1ms 1434ms 1680ms


I ran the below tests 10 times each using the firebug profiler. Whilst there is a difference I doubt many people would be creating objects with 300,000 boolean properties :p

This was to create a simple object with 300,000 properties in both styles. The code I used for this is:

COMMA BEFORE:


<html>
<head>
<title>JS Profile</title>
</head>
<body>
<button onClick="eval(document.getElementById('objectCode').innerHTML);"> Click Me!</button>
<div id="objectCode">
var k = {
"First Item": false
<?php
for($x=0;$x<300000;$x++){
echo ", \"item$x\": true \n";
}
?>
}
</div>
</body>
</html>



COMMA BEFORE:


<html>
<head>
<title>JS Profile</title>
</head>
<body>
<button onClick="eval(document.getElementById('objectCode').innerHTML);"> Click Me!</button>
<div id="objectCode">
var k = {
<?php
for($x=0;$x<300000;$x++){
echo "\"item$x\": true, \n";
}

?>
"First Item": false
}
</div>
</body>
</html>


### Edit ### Left out the newlines!

[mystix]

i dislike leading commas too, but hey, whatever tinkers their bells... ;)

p.s. if anyone has any free standalone tools that are able to perform the conversion between the two schools, that would ease the pain of reading code for people in either camp. (sounds like a fun little spare-time programming project)

now excuse me while i sun the flip-side of my refolded underwear...

[stever]

In case you didn't know, a trailing comma in IE will cause a difficult to debug error and putting the comma first prevents this mistake.

Use a debugger and it is not difficult to debug.

[precariouspanther]

JsEclipse is free Mystix :) ((https://www.adobe.com/cfusion/entitl...bs%5Fjseclipse)) its just an extension for Eclipse - an open source IDE. Also quite handy with things like autocompletion and is aware of properties and methods of classes that you create etc.

To switch all the code to using post rather than pre commas, just press "CTRL + SHIFT + F" and it will auto format the code based on how you've set it up (i.e newlines for braces { or not)

[mystix]

JsEclipse is free Mystix :) ((https://www.adobe.com/cfusion/entitl...bs%5Fjseclipse)) its just an extension for Eclipse - an open source IDE. Also quite handy with things like autocompletion and is aware of properties and methods of classes that you create etc.

To switch all the code to using post rather than pre commas, just press "CTRL + SHIFT + F" and it will auto format the code based on how you've set it up (i.e newlines for braces { or not)

yeah i know it's free, but i'm not an avid Eclipse user ;)

was looking for a standalone (preferably command-line) tool to do the job.
no worries. thanks for the suggestion though. might take a look into JSEclipse when my hands aren't so full :)

[edit]
now i know why the name looked familiar. i used JSEclipse more than a year ago, before interAkt was acquired by Adobe.
d'oh.

[precariouspanther]

Yeah Eclipse can take some getting used to... The way your forced to work in projects rather than just opening a file to edit is quite irritating sometimes - but its great when working on large projects.
Another one which I believe has a decent autoformatted is http://www.aptana.com/

[brian.moeskau]

Leading commas are the devil's spawn. I leave an accidental trailing comma about once every month or two when I'm sleepy, and my code breaks in IE, and I spend about 12 seconds scanning my code (or running JSLint) -- problem solved. I really don't understand why anyone would write unreadable code to "solve" that problem.

BTW, in Aptana, highlight the offending code and Ctl-Shift-F to format (or "Fix") it. Even Aptana knows that the "right" way is trailing commas. ;)

[mjlecomte]

When I use Aptana, the syntax error checking flags any problems immediately if I use leading commas. If I use trailing commas, neither Aptana nor Firefox care. So it seemed easier to just convert to the leading comma mentality. Does anyone's IDE catch trailing comma syntax errors? It's not an extensive effort to go hunting down the trailing commas, but the point is I don't know about it until I do a separate check in IE.

[jay@moduscreate.com]

Technically, any javascript engine should be throwing a syntax error for extra commas. I know just about all other languages are not as forgiving as the mozilla javascript engine.

[mystix]

Does anyone's IDE catch trailing comma syntax errors?


mine does -- IntelliJ IDEA 7x. whoopeee :>



I know just about all other languages are not as forgiving as the mozilla javascript engine.

bet you didn't know this -- i didn't till today. =P~
http://hanuska.blogspot.com/2007/02/trailing-comma-in-arrays.html

[jay@moduscreate.com]

I did not as I am not a java developer. Bravo for pasting the link :).

[mystix]

I did not as I am not a java developer. Bravo for pasting the link :).
after reading that blog, i felt somewhat cheated...
after 5 years of thinking java was just plain anal. oh well. :))

[jay@moduscreate.com]

I know that PHP and Perl (My origins) complain. :-\ I should have not made the assumption. ;)

[OutpostMM]

I don't really mind it either way, although when I'm looking at code with leading commas it does make me have to stop and think about the structure, which takes away from my train of thought of the semantics, but those benchmark numbers posted earlier are interesting. If I have to stop and think about the structure it would make sense that the parser would also.

[mjlecomte]

I wouldn't think performance to be an issue, wouldn't you minify anyway? I would think this would be about what's better for the developer, not the enduser.

[mdm-adph]

I'm torn. I believe the comma makes more sense to be before the name, but I can't put it anywhere but after, or else it looks weird. What to do!

[devnull]

Aptana complains about extra trailing commas for me (Aptana Studio). and yeah, the auto-format feature is killer :D
trailing commas all the way for me.

*edit*
Having gone back and tried to replicate the behavior, I seem to have been incorrect; Aptana does not throw an error for this. I am not sure why I thought it did...

[Eric Suen]

Spket IDE 1.6.10 now has an option "Report Unnecessary Trailing Comma" in JavaScript Editor preferences help you to avoid this issue, and a new option "Remove unnecessary trailing comma" in JavaScript Formatter Braces page was added.

[cafebabe]

my 2 cents.
1) i love leading commas, for me it's easier to read, it lets me know that was follows is a new element, and it avoids the whole issue w/ IE
2) i hate leading commas, because my fav. editor spket in eclipse will not recognize js doc comments if you use leading commas.
/** @param {String} x */,myFun:function(x){/*no code complete for x here, it's treated as a vanilla object*/}

[deanna]

Spket seems to detect the trailing comma problem. So that ceases to be an issue if you use that. I prefer to see the code with trailing comma's. It is more intuitive at a glance. Leading comma's does save you the trailing comma bug when commenting out the last item of a list, but it moves the problem to the first item in the list.

[jay@moduscreate.com]

trailing commas mimic most languages that use commas to separate statements, etc, thus making it more easier to read for most of the people.

[arthurakay]

Aptana complains about extra trailing commas for me (Aptana Studio).

Visual Studio quietly complains about JS code that isn't syntactically correct. It highlights the point in your statement (usually the closing curly brace) with a green underline.

VS doesn't prevent your code from running... something I actually wish it would do in the build process. There may be a way to actually force VS to throw a verbose error in JS files, but I never bothered to look into it.

[tonedeaf]

Aptana can be configured to catch trailing comma errors. You just have to switch to JSLint Javascript Validator instead of Mozilla Javascript Validator (active by default). Explained here: http://www.isomorphic.dreamhosters.com/?p=56

My favourite JS IDE is Netbeans IDE 6.5, allows you to debug Javascript both in IE and Firefox, with the same session debugging of your server side language (RoR, PHP, Java). I use CakePHP on server side and its a snap to monitor AJAX requests and responses using NetBeans switching between the breakpoints in both PHP and Javascript on a AJAX request. It also catches all my trailing comma errors too :)

[csky]

To add to my comment above.

What if people wrote like this,
, or like this
, or like that
, or over here
, and here
, and over there.

Makes no sense!

What if you put a comma at the end of a sentence and the person you were talking to froze and fell to the ground ;)

I've been bitten by the trailing comma in IE a few times and its a royal PITA to debug. Most of the time IE can't even give you any sort of hint as to what the hell is wrong.

[carl23934]

I am torn on this.

I like the comma first because it is easier to read and you don't have to think as much about remembering trailing commas for large blocks of code... but...

I still fall back into put them at the end. Saki turned me onto leading commas, but after a while I switched back to trailing.

:-?:-?:-?

[mschwartz]

Komodo Edit is built on Mozilla sources; it runs the JS compiler in the background as you type and warns you of trailing commas and other things quite nicely.

It also lets you save your files with unix line endings so your stuff works on server. :D

[mxracer]

I have to admit that when I first saw leading commas I did not like it.

But after many times of being bit by an extra trailing comma causing an IE error, I use the leading comma method and have found that (for me anyways) my code is easier for me to read.

It comes down to personal preference though.

[Lukman]

I'd vote for:



{
title: 'My Window'
,
floating: true
,
closable: false
}

;)

[jay@moduscreate.com]

I'd vote for:



{
title: 'My Window'
,
floating: true
,
closable: false
}

;)

http://www.ltlprints.com/blog/wp-content/uploads/2009/05/fail2.jpg

just kidding ;)