Leading comma or Trailing comma: that is the question.

[jsakalos]

As you may have noticed from code fragments I've posted on this forum that I'm using leading commas in my code. People keep asking me about reasons why I have decided so and if there are any positive or negative consequences of this so I have decided to write this article where I would explain my whys. What I would like to state at the beginning is that I do now want this thread to become a war of friends and enemies like some Windows vs. Linux, or Intel vs. AMD, discussions. I do not want anybody to change their coding practices because: The truth for you is that what works for you.

What works for me are leading commas. Wky?

First, compiler or script interpreter doesn't care if I've written leading or trailing commas. The only who cares is myself and other human beings that will read, understand, modify and debug the code.

So first comes reading and understanding. Lets take the following examples:



var o = {
id: 2,
useAccessibilityFeatures: true,
autoLoad: true,
name: 'demo',
translateHelpTexts: true
};

In this example, if I want to check if I haven't forgotten a comma or if I don't have an extra comma there (infamous IE extra comma error) I have to look at the ends of all five lines with various lengths to see if comma is there and, in the case of the last line, to check that comma is not there.





var o = {
id:2
, useAccessibilityFeatures:true
, autoLoad:true
, name:'demo'
, translateHelpTexts:true
};
In this example I just look to the code as a whole if it has the expected apperance (first line w/o comma to the left and then column of commas).

You know, one line will always be different because number of commas is one less than number of properties.

The modifying of the code or putting some leading comments before the properties to temporarily disable them is pretty same in both cases. What makes bigger difference is a handling of errors I may have done in the code by browser. Let's make an error in the examples:





var o = {
id: 2,
useAccessibilityFeatures: true,
autoLoad: true,
name: 'demo',
// translateHelpTexts: true
};

What happens here? Please-help-my-app-works-in-FF-but-not-in-IE help forum query, waiting for some hours for reply and then not believing: How could I be that stupid?





var o = {
// id:2
, useAccessibilityFeatures:true
, autoLoad:true
, name:'demo'
, translateHelpTexts:true
};
And what happens here? Nice fat syntax error in both Firefox and IE with line number. Finding the line in the code and fix it is the matter of seconds and I can continue with some more important things.



I have better things to do as to hunt a stray extra trailing comma in the code for hours. And you?

[jay@moduscreate.com]

I read the perl best practices book a long while ago and it's transformed my programming style a lot.

It's all preference. I choose commas at the end but concatenation in the front.




myobj = { x : '1',
y : '2',
z : '3'
};

// PHP/perl
$var = "data"
. $row["data1"]
. $row["data2"]
. "etc";

//JavaScript
var myVar = 'data'
+ row['data1']
+ row['data2']
+ 'etc';

[timb]

I was think of switching to using leading commas in my code. I already do it with sql statements, why not with javascript? Here's a sample of my sql formatting:
SELECT
field1
, field2
, field3
FROM
table1
WHERE
field1 = somevalue1
AND field2 = somevalue2
AND field3 = somevalue3

[jsakalos]

I read the perl best practices book a long while ago and it's transformed my programming style a lot.

It's all preference. I choose commas at the end but concatenation in the front.

[
//JavaScript
var myVar = 'data'
+ row['data1']
+ row['data2']
+ 'etc';


[/php]

I use also leading operators like this:


//JavaScript
var myVar =
'data'
+ row['data1']
+ row['data2']
+ 'etc'
;


It's very easy to let's say comment out +'etc'.

[jay@moduscreate.com]

I think the leading commas just don't look that pleasing to the eye. that's just me though ;)

[jsakalos]

I think the leading commas just don't look that pleasing to the eye. that's just me though ;)

Beauty is just matter of consideration. I like women you would maybe not and vice versa. ;) I've taken the practical approach to speedup devel/debug.

[jsakalos]

I was think of switching to using leading commas in my code. I already do it with sql statements, why not with javascript? Here's a sample of my sql formatting:
SELECT
field1
, field2
, field3
FROM
table1
WHERE
field1 = somevalue1
AND field2 = somevalue2
AND field3 = somevalue3

Same as mine. :)

[willgillen]

I had started using leading commas about a year ago for the same reasons that Saki mentioned in the lead of this post. It is just so much easier to debug. Although, I hadn't though of using the leading commas in SQL, and leading operators, but you can bet I will now.

Just another reason this forum has become my favorite.

As an aside, I have to say that I've been in the extjs.com forum (and originally the forum as it existed on jackslocum.com before Ext went final). I've screened through many posts that have rocketed my understanding of javascript and sharpened my coding practices. But most recently, I've noticed that Saki has contributed a wealth of information and takes his time to make some of the most informative posts I've seen in here. I wish there was an award we could give to Saki for the time that he takes to contribute to the forums here!

Thank you Saki!

-- W.G.

[jack.slocum]

IMO, leading commas make code difficult to read. Notice in your first example how each "block" lines up perfectly. This means you can look at code and easily scan for blocks. This is critical for someone like me who likes to "scan" code. I can digest a lot of code quickly by looking at it and following the flow. With leading commas (or by omitting braces), I wouldn't be able to do that because I can't quickly decipher where each block begins and ends because they don't line up. Just my opinion. :)

[jsakalos]

IMO, leading commas make code difficult to read. Notice in your first example how each "block" lines up perfectly. This means you can look at code and easily scan for blocks. This is critical for someone like me who likes to "scan" code. I can digest a lot of code quickly by looking at it and following the flow. With leading commas (or by omitting braces), I wouldn't be able to do that because I can't quickly decipher where each block begins and ends because they don't line up. Just my opinion. :)

Once I used this "blocking" for the same reasons: Look and know. Maybe I'll start again. :)



var o = {
id:2
, useAccessibilityFeatures:true
, autoLoad:true
, name:'demo'
, translateHelpTexts:true
};

[jsakalos]

I had started using leading commas about a year ago for the same reasons that Saki mentioned in the lead of this post. It is just so much easier to debug. Although, I hadn't though of using the leading commas in SQL, and leading operators, but you can bet I will now.

Just another reason this forum has become my favorite.

As an aside, I have to say that I've been in the extjs.com forum (and originally the forum as it existed on jackslocum.com before Ext went final). I've screened through many posts that have rocketed my understanding of javascript and sharpened my coding practices. But most recently, I've noticed that Saki has contributed a wealth of information and takes his time to make some of the most informative posts I've seen in here. I wish there was an award we could give to Saki for the time that he takes to contribute to the forums here!

Thank you Saki!

-- W.G.

Thanks Will,

also posts like this your are a kind of a reward.

[corey.gilmore]

I'm definitely a comma at the end of the line guy, jslint.com will pick up an extra trailing comma for you.

One thing I found while looking at some of Jack's code is a way around what I now consider to be the messy concatenation (+) operator.

Instead of

var myVar =
'data'
+ row['data1']
+ row['data2']
+ 'etc'
;

Use the Array join (http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:join) method.


var myVar = [
'data',
row['data1'],
row['data2'],
'etc'
].join();

[brian.moeskau]

The only thing I'll say is that if you are writing your own code, or dictating coding practices to your own team, then you are obviously free to do as you want. However, in general, when coding against an established library, if you intend for other people to use your code, you should try to adhere to the established coding conventions. Otherwise, you force people who have been using the library to either manually edit a lot of code with each new release (probably not going to happen) or live with a mixed coding convention, which is arguably worse than either way by itself.

[GalaxySong]

One thing I found while looking at some of Jack's code is a way around what I now consider to be the messy concatenation (+) operator.

Instead of

var myVar =
'data'
+ row['data1']
+ row['data2']
+ 'etc'
; Use the Array join (http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:join) method.


var myVar = [
'data',
row['data1'],
row['data2'],
'etc'
].join();

In IE, you must write "join('')" for the default seperator is "," and thus "join()" makes no difference from "toString()" for an array.

Sometimes when writing methods of an object, I used a tradeoff:

var o = {
method1: function(){
....
}
,
method2: function(){
....
}
,
method3: function(){
....
}
};
However, I prefer trailing comma now since it is most friendly to read and no longer inconvenient to me since I found the macro of EditPlus, the editor I use, very helpful. If I want to append a property of an object, I just need to locate the last line and press "Ctrl + M", then the editor will automatically add a comma and insert a new blank line for me. And if I want to remove the last property, "Ctrl + ,".

[mdm-adph]

I, too, put my commas on their own seperate line.

However, considering my recent programming experience (IBM Notes/Domino), I've decided this is a moot point, since where a person puts commas is kind of irrelevant when you're trying to edit pages of pages of Formula code that don't have any line breaks.

[JorisA]

Check out http://www.jslint.com/
If you experience errors in IE, just run your script thru jslint.

[jsakalos]

I have just found this tool: http://www.linuxuser.at/js_dev_tools

If you throw a minified js code there and if you de-minify it you'll get leading commas.

[fsakalos]

I prefer trailing commas. Why?
Reason is simple. The principle of programming is, that the final result which u want to achieve is done step by step. In C, for example after every "step" you put ;. So that semicolon indicates end of each "step". When such symbols are at the beginning of new "step", it creates the code hardly readable for me.

[TommyMaintz]

I prefer trailing comma's myself aswell. To be honest I never have much problems with forgotten or extra comma's, cause i thaught myself to double check this :)

I also agree with Brian saying when coding against an established library, you should try to adjust to the established coding conventions.

[jay@moduscreate.com]

definitely trailing commas - to keep up w/ current programming standards ;)