Beware the Trailing Comma of Death

An article by Dan Lee    6 Comments

JavaScript libraries like jQuery and my beloved Dojo are nothing short of miracle workers when it comes to enabling developers to write code that works consistently across multiple browsers. These libraries provide simple APIs and perform an unfathomable amount of work “under the covers” to ensure that these APIs work consistently. They save us countless hours of debugging browser-specific problems, and more importantly, keep us from inventing hacks to work around these bugs. Really and truly, the developers that maintain these libraries are heroes. The web would look nothing like it does without them.

Not out of the woods

Does the use of a JavaScript library mean your days of browser-specific issues are over? Should you just test your code in the latest version of Chrome and call it a day? Of course not. There still exists an entire class of programming errors that only appear as bugs in certain browsers. Of these, none is more sinister than……..the Trailing Comma of Death.

This is my affectionate nickname for the oh-so-common mistake of adding a comma after the final declared property within a JavaScript object. Here is a contrived example. Note the extra comma after the declaration of the get2 function.

dojo.ready(function() {
	var testObject = function() {
		var testString1 = "Trailing commas? ";
		var testString2 = "They don't scare me.";
		return {
			get1 : function() {
				return testString1;
			},
			get2 : function(){
				return testString2;
			},
          // ^ Trailing Comma of Death
		};
	};

	var t = testObject();
	dojo.byId("commaTest").innerHTML = t.get1() + t.get2();
});

Let’s look at a series of screenshots that shows the output of the above code in Firefox, Chrome, and Internet Explorer. Assume that Dojo is included in the page, and that there exists a div element with an id of ‘commaTest‘.

Here’s what it looks like in Firefox 3.6:

In Google Chrome 9:

And in Internet Explorer 8:

Wuh-oh, what happened in Internet Explorer? It turns out that the trailing comma is right on the edge as to what is permissible JavaScript syntax. Internet Explorer does not tolerate a trailing comma while the rest of the browsers do. The lesson? Internet Explorer is terrified of the Trailing Comma of Death.

That this issue is specific to Internet Explorer makes for a very dicey situation. Web developers tend to use the “any-browser-but-IE” strategy as they develop their JavaScript code because the debugging tools provided by those browsers are so much better. This means that most developers fire up Internet Explorer only as a last step in code verification, and will not catch trailing comma problems until that point. Thankfully the Developer Tools console of IE8 usually gives a nice, clear error when a trailing comma is encountered:

A Harrowing Tale

You may be wondering why I think the trailing comma problem is a big deal. How on Earth could it make its way into a production code-base? Well, my skeptical friends, let me tell you a story…..

There once was a newly minted JavaScript programmer who was given his very first assignment. We’ll call him Stan Dee. Stan was asked to write a simple Dojo widget, something his boss thought would be a good introductory work item. Naturally, Stan wanted his first code delivery to be flawless, elegant, and clever. You know, in case any of his new team-mates happened to see it in the commit logs. Stan wrote the widget and tested it obsessively in all of the product’s supported browsers, and even in one that isn’t officially supported. It looked great. As he was about to commit his work and move on, Stan noticed a block of code in his widget that was unnecessarily repeated. A firm believer in the DRY principle, Stan could not do the commit before abstracting the duplicate code into its own function. He was using Dojo’s animation features to pull off a fade-out technique and had almost exactly the same code in two places.

Stan sought to DRY this situation out a bit. He created a new function in the file. Stan, like all developers, is lazy. Instead of typing out the necessary code, he swiped an already existing function, copied it, and pasted it at the end of the widget’s function declarations, and changed the name:

Stan then cleaned up the rest of the code, replacing the contents of the new function with the appropriate code and updating the other functions to invoke the new common one:

Along the way, Stan made one glaring mistake. Did you catch it? What’s that laughter? Oh, it appears as though somebody has spotted the problem:

Gah! The Trailing Comma of Death found its way into the code! That’s OK though, surely Stan tested in IE before he dropped his code, right? Well…..Stan had a deadline, and his thought patterns were something along the lines of this:

“Oh crap, the build is about to kickoff. If I want to get this code in, I need to commit it now. It’s just a little function refactor, how could that not work in IE? I better test it though….. Oh man, IE is so slow, it’s going to take me 15 minutes to test this…. Forget it. Let me verify it real quick in Firefox. Yup, it works. It’ll work in IE, I just know it.” *CLICK*

And with that, the Trailing Comma of Death was committed to the source code repository. The build ran that night and was first picked up by Stan’s colleagues in the UK. The build failed violently in Internet Explorer. As Stan slept, a British colleague of his was forced to investigate the failure and checked the commit history of the previous day. Stan’s colleague, who was no stranger to the Trailing Comma of Death, found the problem and delivered a fix. When Stan checked his email that morning, he found a note in his inbox. The note was short and painful:

Hey Stan. Your commit broke the build.
Watch out for those trailing commas.

-[Name redacted]

Defending Against the Trailing Comma

Trailing Commas are no joke. As Stan learned the hard way, they are extremely easy to introduce. And when working on a large and complex JavaScript application, they can be increasingly hard to find and troubleshoot. Oh, and as Stan also learned, there are few things that Development Managers hate more than bugs introduced by trailing commas!

So how do we make sure that they never make it into the code in the first place? Sadly, there is no magic bullet here. The best way to stop trailing commas is a two-pronged approach of disciplined programming and configuring your development tools to flag them. The discipline part is easy; always validate in IE while developing. I know that IE’s Developer Tools are not the best, but that’s no excuse. As developers, each day is filled with temptations to take short-cuts. Skipping IE testing is a short-cut that you can’t afford to take.

On the tools front, my preference for combating these devils is the Eclipse JavaScript Development Tools. The JavaScript source editor in JSDT flags trailing commas as errors:

The venerable JSLint can be configured to flag them as well. The next level in protection after arming developers with tools is to add a trailing comma check to your build facility such that they can be sniffed out at build-time. I’ve heard of home-brewed systems based on JSLint used for this purpose, but there may be other solutions out there as well.

A Call for Discussion

If you’ve been a JavaScript programmer for any length of time, you’ve almost certainly had a run-in or two with the Trailing Comma of Death. Maybe you’ve developed your own tactics for defeating it? I am sure that there are tools and techniques out there that I have not heard of. I would love to hear your stories. Please, add a comment to this post if your team has found a good solution. Together, we can help our fellow developers defeat this pesky adversary!