Fork me on GitHub

JSLint Error Explanations

JSLint will hurt your feelings. It's time to make them better!

Extra comma

When do I get this error?

JSHint (version 2.0.0 and above) will throw the "Extra comma" error when it encounters a comma following the final element of an array or object literal, but only when the es3 option is set to true. In the following example we declare an object literal x:

Prior to version 2.0.0, JSHint raised the "Extra comma" error in the same situation, but only when the es5 option was not set to true. This time the example is using JSHint 1.0.0:

Prior to version 1.0.0, JSHint would raise this error regardless of the state of the aforementioned options.

Why do I get this error?

This error is raised to highlight a potential fatal syntax error. When it comes to object literals, the difference in the ECMAScript specification from version 3 to version 5 is quite clear. Here's the relevant snippet of grammar from the ES3 spec:

ObjectLiteral :
    { }
    { PropertyNameAndValueList }

The PropertyNameAndValueList production simply gives the grammar for property names and values, followed by a comma if that comma is followed by another property name and value.

When you look at the same section from the ECMAScript 5 specification you can see a simple addition that makes it possible to include a trailing comma after the final property name and value (ES5 §11.1.5):

ObjectLiteral :
    { }
    { PropertyNameAndValueList }
    { PropertyNameAndValueList , }

In environments that do not support ECMAScript 5, the above code will cause a syntax error. Therefore, if you may need to support such environments, it's best to remove the trailing comma:

However, if you know you won't need to support these older environments (and you're using a version of JSHint older than 2.0.0), you can set the es5 option to tell JSHint to allow this syntax:

In the case of array literals, the situation is a bit less clear. The specification does not differ from ECMAScript 3 to 5 and has always allowed the use of a trailing comma (ES5 §11.1.4):

ArrayLiteral :
    [ Elisionopt ]
    [ ElementList ]
    [ ElementList , Elisionopt ]

Unfortunately, browser implementations of ECMAScript differ in their treatment of trailing commas. More recent environments will all treat such syntax as valid, as per the spec, hence the use of the es5 option in JSHint to allow it. Therefore, as with object literals, if your code needs to run is pre-ES5 environments, it's highly recommended that you remove any trailing commas:

In JSHint 1.0.0 and above you have the ability to ignore any warning with a special option syntax. The identifier of this warning is W070. This means you can tell JSHint to not issue this warning with the /*jshint -W070 */ directive.

James Allardice

This article was written by James Allardice, an enthusiastic young JavaScript developer at Global Personals (we're looking for developers so please apply). He is passionate about writing clean, maintainable JavaScript and uses JSHint every day to help achieve this.

You can follow him on Twitter, fork him on GitHub and find him on Google+.

Proceeds generated by this site are donated to help advance other open source projects

comments powered by Disqus