Menu
JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals, and more recently, to function parameters and to named imports and named exports. JSON, however, disallows trailing commas.
In general, you should make use of trailing commas when you frequently copy/paste properties or add new items to the end of a list. You can also take advantage of them to produce cleaner diff outputs.
It helps to eliminate a certain kind of bug. It's sometimes clearer to write lists on multiple lines. But in, later maintenace you may want to rearrange the items. But if you allow trailing commas, and use them, you can easily rearrange the lines without introducing an error.
Using SubStr to remove trailing comma from JSON What we do is use SubStr the second we leave the while loop. We reformat the current $json variable by removing the last character in the $json variable, which, will be the trailing comma. After that, we can then add the last bracket to complete our JSON.
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)...
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.
What is even funnier, IE7 gives
[1,].length --> 2
while Firefox and Chrome
[1,].length --> 1
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With