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

Javascript

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

What is even funnier, IE7 gives

[1,].length  --> 2

while Firefox and Chrome

[1,].length  --> 1

Solution 4 - Javascript

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.

Solution 5 - Javascript

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

Solution 6 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdam RackisView Question on Stackoverflow
Solution 1 - JavascriptFelix KlingView Answer on Stackoverflow
Solution 2 - JavascriptJoey SabeyView Answer on Stackoverflow
Solution 3 - JavascriptseegView Answer on Stackoverflow
Solution 4 - JavascriptEndophageView Answer on Stackoverflow
Solution 5 - JavascriptgarrettmacView Answer on Stackoverflow
Solution 6 - JavascriptNicolas ZozolView Answer on Stackoverflow