This article discusses pros and cons of using leading or trailing commas in the code and it also explains why I have decided to use leading commas.

Share This Post

I have found another post that others could be interested in, originally posted on May 25, 2007. The original text follows:
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 Linux vx. Window$, 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. Why? 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 at the code as a whole if it has the expected appearance (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?
Follow me:
Latest posts by saki (see all)

Want to collaborate on an upcoming project?