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
};