JavaScript Array and Object Comments

5.1.2011

The other day I saw an interesting bit of code. It went a little like this:

var books = {
  "1953": "Casino Royale"
  ,"1954": "Live and Let Die"
  ,"1955": "Moonraker"
  ,"1956": "Diamonds Are Forever"
  ,"1957": "From Russia, with Love"
  ,"1958": "Dr. No"
  ,"1959": "Goldfinger"
};
var bonds = [
  "Sean Connery"
  , "George Lazenby"
  , "Roger Moore"
  , "Timothy Dalton"
  , "Pierce Brosnan"
  , "Daniel Craig"            
];

Commas to the End?

Note the commas at the beginning of the lines. Instantly, the compulsive coder inside me started to reformat this to the more common:

var books = {
  "1953": "Casino Royale",
  "1954": "Live and Let Die",
  "1955": "Moonraker"
  ...
};
...

Comenting Bug

All better, right? But hold on a sec. There is a huge advantage to commas at the beginning of array and object lines in JavaScript. Namely, when commenting out lines from the array, it makes it much easier. Observe the problem that occurs when commenting out the last two Bonds from an array with trailing commas:

var bonds = [
  "Sean Connery",
  "George Lazenby",
  "Roger Moore",
  "Timothy Dalton", // uh oh
  // "Pierce Brosnan",
  // "Daniel Craig"            
];

The trailing comma after Mr Dalton needs to be removed. Worse still, the trailing comma will work in browsers we are likely to actually be coding in (Chrome, FireFox) but break horribly in browsers that we don't give a damn about care deeply for (IE7).

The Benefit of Leading Commas

If we move to the leading comma, this goes away:

var books = {
  "1953": "Casino Royale"
  ,"1954": "Live and Let Die"
  //,"1955": "Moonraker"
  //,"1956": "Diamonds Are Forever"
  //,"1957": "From Russia, with Love"
  ,"1958": "Dr. No"
  ,"1959": "Goldfinger"
};
var bonds = [
  "Sean Connery"
  , "George Lazenby"
  , "Roger Moore"
  , "Timothy Dalton" // ok
  //, "Pierce Brosnan"
  //, "Daniel Craig"            
];

Of course, we shouldn't be leaving comments like this in our production JavaScript. But, it helps make development and debugging easier. In these modern times, our JS should be stripped of all comments, minimized, and gzipped before getting sent over the wire. So, leading or trailing commas is purely developer preference.

Retraining our muscle memory to lead with commas first takes a bit of getting used to. But it also might protect against worse errors in the future.

Update

After sleeping on this, I realize the trouble. The leading comma moves the problem from the end of the array to the front of the array. Now you can't comment out the first line in the array. In practice, I believe I more often comment out the last items from an object or an array, but this isn't a silver bullet solution. Worse still, if you comment out the first line, you have to edit the second line. With trailing commas you can comment out the trailing comma temporarily.

In theory then, this technique may not be much better than trailing commas. In practice, if you often find yourself commenting out the last item, this may save you some time.

From @rosko:

"Another possible advantage: appending to the list can be done without modifying adjacent lines."

Read More
JS