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?
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
15 Responses
Also useful in SQL queries
In below code we need comma, sonar java script code review plugin complaining like avoid trailling comma.
As per ExtJS standard if we remove we will get syntax error.
Ext.apply(Ext.form.VTypes, {
});
Ext.define(‘AddressState’, { });
how to resolve this.
I agree.. good idea..
I couldn’t agree more with the leading commas. I actually started this a long time ago with my SQL scripts. I did this for similar reasons: it was a lot easier to comment out lines (fields) if the comma preceded the statement and still have the script run. In my opinion this should be the standard for coding or at least a recognized option. Also, thanks for helping out us noobs!
Two more points in support:
* diff in case of leading point will give only one line difference;
* using an IDE when one comment a single line (in case of commenting last line of csv-like block of code) there’s no worry about fixing one extra comma issue from previous line.
I always use trailing comma’s… indeed, now i read your article it seem plausible to use leading comma’s.
Still, i just don’t like the sight of it, and i like to see my code in beauty 🙂
I have been using ExtJs for a couple months now, using editor as simple as VIM. Being bitten by the IE issues, also cases where I would append additional line at the end for declaration and forget to add a comma at the end of previous line, and keep wandering about wierd errors…
Couldn\’t make my mind to change the coding style proven by years and move my code to use leading commas.. Until this point.
Thanks for your post Saki, it finally made up my mind.
I use spket plugin for Eclipse when coding and it’s validation throws a warning for extra commas. I find that trailing commas are more pleasant to read, so I think this is very workable.
Thanks Saki for all of this excellent content.
@nesha,
thank you for your comment. Nevertheless, I won’t change my coding style.
I think that if several people should inspect your code, work on it and reuse it, it is better to keep up with common practice which is, trailing commas. IE glitch (so as many other syntax error) can be fixed by using appropriate tools/editors. Eclipse with Spket plugin and ExtJS support added to it works like a charm. Not only that it marks syntax errors, but it allow code completions, better code colors… It made life of all in my team soooo easier.
Initially I was confused by the leading comma – now i am a big fan.
Thanks for showing us this.
I only wish I could get Aptana’s sh-ctrl-F reformatter to not undo all my hard work 🙂
Good point. I had never tried that JSLint option. It solves the issue. Thanks!
I’d say it is only the matter of jslint config. I also use it to “qual-check” my code and if I remember well the option “Allow sloppy line breaking” will do the trick.
All other useful detections are retained, such as global variables, missing semicolons, etc.
Give it a try.
I think this is a great idea! I have often been bitten by the IE issue with an extra common.
The only thing I don\’t like about leading commas is that one of my favorite JS tools (http://jslint.com) complains about leading commas to no end.
The only consolation is that JSlint does also point out extra trailing commas… so if I use JSLint religiously with the trailing commas style, I win!