225

Are trailing commas standard in JavaScript, or do most browsers like Chrome and Firefox just tolerate them?

I thought they were standard, but IE8 puked after encountering one—of course IE not supporting something hardly means it’s not standard.

Here’s an example of what I mean (after the last element of the books array):

var viewModel = {
    books: ko.observableArray([
        { title: "..", display: function() { return ".."; } },
        { title: "..", display: function() { return ".."; } },
        { title: "..", display: function() { return ".."; } }, // <--right there
    ]),
    currentTemplate: ko.observable("bookTemplate1"),
    displayTemplate: function() { return viewModel.currentTemplate(); }
};
4
  • Found this the other day. Being a C# programmer I was so used to them being allowed...
    – CaffGeek
    Aug 30, 2011 at 16:35
  • 5
    I dealt with this a few weeks ago. Imagine trying to find this in IE7 without any of the newer debugging tools... Aug 30, 2011 at 16:37
  • 4
    It made me happy when I discovered languages like JS, Ruby, C# support this—makes copy pasting test data easy...it made me angry when I realized IE sucks in even this... Aug 30, 2011 at 16:40
  • I wonder if significant whitespace instead of commas (kind of like CoffeeScript) would cause any syntactic ambiguity?
    – Andy
    Sep 1, 2015 at 18:45

6 Answers 6

218

Specs: ECMAScript 5 and ECMAScript 3


Section 11.1.5 in the ECMAScript 5 specification:

ObjectLiteral :
    { }
    { PropertyNameAndValueList }
    { PropertyNameAndValueList , }

So yes, it is part of the specification.

Update: Apparently this is new in ES5. In ES3 (page 41), the definition was just:

ObjectLiteral :
    { }
    { PropertyNameAndValueList }

For arrays literals (Section 11.1.4) it is even more interesting (Update: this already existed in ES3):

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

(where Elision_opt is Elisionopt, meaning the Elision is optional)

Elision is defined as

Elision :
    ,
    Elision ,

So, an array literal like

var arr = [1,2,,,,];

is perfectly legal. This creates an array with two elements but sets the array length to 2 + 3 = 5.

Don't expect too much from IE (before IE9)...

5
  • 1
    As I asked EndoPhage, do you happen to know whether this was standard in ES3 as well? I can't seem to find the spec for it Aug 30, 2011 at 16:48
  • 2
  • 1
    Apparently, the trailing comma in object literals was not in the ES3 spec. But the definition for arrays is the same. Aug 30, 2011 at 16:57
  • Well it was array elements that I ran into this with, so I guess there's no excuse for MS no matter how you cut it. Thanks again Aug 30, 2011 at 17:07
  • IIRC IE 8 will parse the array but place a null value in the array rather than ignoring it. IE7 and below would fail to parse.
    – wedstrom
    Mar 1, 2019 at 16:51
95

Just a quick reminder/warning that this is one of the areas in which the JavaScript/ECMAScript standard and JSON standard differ; trailing commas are valid in JS but not valid in JSON.

1
  • 1
    But then again, if superset is in for a "Change Of Heart" , "Could you (still) be loved" if you just for once adjusted? Nov 13, 2016 at 23:33
54

What is even funnier, IE7 gives

[1,].length  --> 2

while Firefox and Chrome

[1,].length  --> 1
5
  • 17
    But [1,,].length gives 2. Sense: browsers make none. Jul 3, 2012 at 8:04
  • 88
    Makes perfect sense, the spec says that a (note: singular) trailing comma does not add to the length of an array. Chrome and Firefox have implemented ES5 correctly. Nov 19, 2012 at 22:48
  • 7
    When there are 2 (plural) trailing commas, only one adds to the length of the array, so it seems more accurate to say that the final trailing comma is ignored than to say a single trailing comma is ignored.
    – iconoclast
    Dec 11, 2014 at 2:17
  • @JaredMcAteer There is an exception to the trailing comma rule: [,].length gives 1. Jan 19, 2021 at 16:20
  • 1
    @ElijasDapšauskas that's not really an exception. The singular trailing comma doesn't add anything to the length but for it to exist there needs to be something to the left of it so [,] is equivalent to [undefined,] and [undefined].length === 1. Perhaps the wording of my comment leaves this case ambiguous but the specification does not. Jan 19, 2021 at 17:42
4

You can find the specification for javascript (aka ECMA Script) here. You can find the relevant definition for arrays on page 63 and as Felix noted, the object definition a couple of pages later on page 65.

While this specification says it is fine to have a trailing , I don't know if that would be true looking back a few versions. As you've noted IE8- will crap itself if you leave a trailing comma but Chrome and FF handle it fine.

3
  • Off the top of your head, was this part of the ES3 standard? I can't seem to find the ES3 spec Aug 30, 2011 at 16:47
  • 1
    @Adam I've been trying to find it... Given the release dates (ES3 was published in 1999, ES4 was abandoned and ES5 was only published in 2009), it would make sense that it was in the ES3 standard. Or it could just be that MS screwed up one more thing.
    – Endophage
    Aug 30, 2011 at 16:54
  • Looks like MS screwed up one more thing given Felix's answer. Thanks again for yours Aug 30, 2011 at 17:06
4

Let's break this down.

Are trailing commas standard in JavaScript?

Yes. As of the ECMAScript 5 specification (also part of the Google and Airbnb style guide)

Do most browsers like Chrome and Firefox just tolerate them?

This is an ECMAScript 5 support question.

Transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers.

So that means:

var heroes = [
  'Batman',
  'Superman',
];
// heroes.length === 2 (not 3)

So chances are if you're using anything ES5 and up you don't need to worry about it.

I thought they were standard, but IE8 puked after encountering one—of course IE not supporting something hardly means it’s not standard.

Again, that's an ECMAScript 5 support question. IE8 doesn't support ECMAScript 5 (only IE9 and up)

I would highly recommend taking a look Airbnb's ES5 deprecated Documentation https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas

I would also recommend the Mozilla's Docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

1

On Chrome 52 :

[1,].length --> 1
[1,2,].length --> 2
[].length --> 0 
[,].length --> 1    <<<<=== OUHHHHH !!!!

I just don't like trailing commas. People usually use them in Open Source projects for avoiding to erase the line written by another commiter. See the same question in Python : https://stackoverflow.com/a/11597911/968988

2
  • 14
    Why 'OUHHHHH'? What else did you expect there if not 1? You clearly 'have an element' before that comma, just like [1,] (which is length: 1).
    – Fygo
    Dec 6, 2016 at 11:33
  • 1
    Why 'OUHHHHH'? because I don't expect anything from a code that I don't understand without reading the RFC. And yes, it works just like [1,] : there is clearly something before the comma. But in [,] there is as much before and after the comma. So because I don't understand [,] alone, I dont think using [1,] is good idea. Sep 16, 2019 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.