Are trailing commas in arrays and objects part of the spec?

Question

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(); }
};

Answer 1

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 Elision_opt, 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)...

Answer 2

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.

Answer 3

What is even funnier, IE7 gives

[1,].length  --> 2

while Firefox and Chrome

[1,].length  --> 1

Answer 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

Answer 5

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.

Answer 6

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