Trailing Commas
Version: ES2015 (destructuring, import, export), ES2017 (functions)
Level: Intermediate
In certain list-like syntaxes JavaScript supports trailing commas. Trailing commas are commas at the end of a list of items that serve no functional purpose. Syntaxes that support trailing commas include:
- Object literals
- Array literals
- Function parameter lists
- Function argument lists
- Destructuring lists
- Named exports
- Named imports
let obj = {
prop: 1,
another: 2, // <- trailing comma ok
};
Trailing commas aren’t supported everywhere. There are other list-like syntaxes that they cannot be used with. These include (but may not be limited to):
- Declaration lists (
var,let,const) - Groupings with the comma operator
let a = 1, b = 2, // SyntaxError
Also, though JSON uses a form of the Object and Array literal syntaxes, they do not support trailing commas.
JSON.parse('{ "prop": 1, }'); // SyntaxError
There are also other special cases where they are supported. For example array literals can support multiple trailing commas. Each comma except the last will add an undefined element in the array.
let falsies = [null, 0,,,]; // Ok
console.log(falsies.length); // 4
console.log(falsies[3]); // undefined
Rest parameters also cannot have trailing commas follow them since they should always be the last in a list (even though a trailing comma does not actually add another parameter).
function params (first, second) {} // Ok
function params (first, second,) {} // Ok
function params (first, second, ...rest) {} // Ok
function params (first, second, ...rest,) {} // SyntaxError
Not everyone uses trailing commas but they can be useful. Not only do they add consistency to your code, especially in lists that span across multiple lines, but they also play a role in version control.
Whenever a change is made to code, a version control system like git will see what lines changed and assign accountability (aka “blame”) for those changes to the user that made them. If you add code that is at the end of a multi-line syntax list, and that list does not have a trailing comma, you would need to add a new comma to separate the previous line from your new line. In doing so you’ve modified the previous line making it your own.
// Original code
let users = [
{ name: 'Alice', id: 1 },
{ name: 'Bob', id: 1 }
];
// Updated code
let users = [
{ name: 'Alice', id: 1 },
{ name: 'Bob', id: 2 }, // <- added comma, now your line too
{ name: 'Eve', id: 3 } // only real addition
];
If a trailing comma was used in the users array for its last entry, the addition of another user object wouldn’t also require changing the line before it to add the comma. In that case, the only line changed would be the line with the new user that you had added. Unfortunately, as it is now, when your boss tries to figure out who added this “Bob” to the users list of the all-girls swimming team, the first person they’re coming to is you.
More info:
More tips: JavaScript Tips of the Day