Satish Chilukuri’s Blog 

How many elements does this JavaScript array object have? (note the comma at the end after which there is no element):

var an_array = [1, 2, 3, ]

This is what the ECMASript Language Specification says about commas in array initialisers:

Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.

So the answer to our question would be 3 as the trailing comma would be ignored. You can confirm this by bringing up the console in developer tools in Firefox or Chrome entering the array definition and printing out its length:

> var an_array = [1, 2, 3, ]
            
> an_array.length

< 3

IE 8 treats trailing commas differently

Internet Explorer 8 doesn’t ignore the trailing comma. So in IE8, the length our an_array object will be four, not three. The fourth element will be null. Sometimes this can lead to errors. For example, if you loop over an array and try to read a property in each element, the code will work perfectly fine in browsers like Firefox, Chrome, or IE 10. But in IE 8, it will result in an error as the last element will be null:

var an_array = [obj1, obj2, obj3, ];

alert(an_array.length); // 4

for (var i = 0; i < an_array.length; i++) {
  // This will not work in IE 8 as last element of an_array is null
  alert(an_array[i].some_property);
}

Errors because of trailing commas in arrays can be hard to debug. This is especially true if your application is heavy on JavaScript and extensively uses JavaScript frameworks. When you pass an array with trailing commas in arguments to framework functions and the framework attempts to loop over the array, it will throw an error. Depending on where in the framework the error occurs, Internet Explorer may just blurt out a cryptic message like “x object is null or not an object” instead of showing the point of origin of the error.

Detecting trailing commas in your code

If your JavaScript codebase is big and you can’t find a trailing comma just by reading through the code, you need to use a tool that can detect trailing commas. JSLint is one such tool. But if JSLint finds too many problems, it will halt scanning after reporting a few errors. You can set a high value for “Maximum number of errors”, but that still may not be enough as JSLint will always halt when it encounters certain types of errors - like when you use ‘var’ declarations in for statements like we did above. It will continue the scan only after you fix those errors. Doing that for every halting error is cumbersome when all you want is a full list of errors to see if a trailing comma is among those.

Luckily, Google’s Closure Compiler detects trailing commas without any fuss. Though the tool is for minifying JavaScript, it compiles the code before it does the minification and will report any error it finds from its list of errors. So if you run the compiler on a JavaScript file with trailing commas, it will report an error:

$ java -jar compiler.jar --js file_with_error.js --js_output_file ignore.js

file_with_error.js:1: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
var an_array = [1, 2, 3, ];
^

1 error(s), 0 warning(s)

Update — There is a fork of JSLint called JSHint that is less opinionated and gives you more flexibility in configuring which errors it should catch. There is a JSHint plugin for Eclipse. Intellij Idea has out of the box support for JSLint and JSHint. You just need to enable them from the settings dialog — JavaScript -> Code Quality Tools