JavaScript

Are you using Trailing Commas in your JavaScript?

In multi-line objects & arrays in JavaScript, Trailing Commas can be very useful; being part of ES5 standard, see how it can help you in your JS Apps.

Pankaj

Sep 1, 2020 • 3 min read

I am presuming that you use objects and arrays daily in your JavaScript.

And I am sure that most of them are not single lines. These arrays and objects with items spread over many lines.

Though my question here is:

Do you leave a trailing comma at the end of the last item before closing the object or array creation?

If you are not using any trailing commas, then why not?

Let’s start with Why trailing commas could help you

Reasons to keep Trailing Comma

No False diff counts

The Commit Messages are going to be of exactly the line when you add or remove items, i.e. no false diff counts ?

  const ACTIONS = {
    ADD_ITEM: 'ADD_ITEM',
-   UPDATE_ITEM: 'UPDATE_ITEM'
+   UPDATE_ITEM: 'UPDATE_ITEM',
+   DELETE_ITEM: 'DELETE_ITEM'
  }

Here we have diff counts of +2-1
OR

  const ACTIONS = {
    ADD_ITEM: 'ADD_ITEM',
    UPDATE_ITEM: 'UPDATE_ITEM',
+   DELETE_ITEM: 'DELETE_ITEM',
  }

And here, we have diff counts of +1

Which one do you prefer to in the Pull/Merge Requests?

New items are always in the end.

We can add new items at the end of the Object or Array, rather than being in the middle to avoid multiline changes ?

Considering the above example, we would have to add the new item in the middle of the object to keep the edit count as 1 Line

  const ACTIONS = {
    ADD_ITEM: 'ADD_ITEM',
+   DELETE_ITEM: 'DELETE_ITEM',
    UPDATE_ITEM: 'UPDATE_ITEM'
  }

Or we can have trailing commas and add the new item at the end of the object all the time.

  const ACTIONS = {
    ADD_ITEM: 'ADD_ITEM',
    UPDATE_ITEM: 'UPDATE_ITEM',
+   DELETE_ITEM: 'DELETE_ITEM',
  }

No Fear of Breaking Production

Transpilers and Bundlers will omit trailing commas and not break the production ?

The modern browser will not complain about the trailing commas as it is part of the ES5 standard.

But the old browser might complain, and in that case, before IE9.

Even though finding such an old browser is a good expedition. We can enable our bundlers to omit the trailing commas from production bundles so that it is safe to ship.

The trailing comma would be the least of the problems for that old browser. It is because the old browsers’ capability to parse and run large JS apps is also questionable.

Use babel-plugin-syntax-trailing-function-commas in the babel configuration to enable trailing commas in your JavaScript source code.

If you are using Prettier, you can configure it with the following:

trailingComma in.prettierrc
--trailing-comma if using Prettier via CLI

Possible values are:

es5 only on arrays and objects
none nowhere, no trailing commas
and all everywhere possible; arrays, objects, function params etc

Biases

It looks like something is missing

I have heard this argument many times. If there is a trailing comma, it feels like something is missing or wrong.

You will get used to it.

We have got used to writing HTML in JS, trailing comma is a very small thing in front of it.

Why extra character for nothing?

This comma is an extra character which is not helpful for any execution.

We write code in Clean way for other developers to understand.

Machines can understand comma or no-comma in the same way. Then why not help the other developers in reviewing the code.

References

javascript - Are trailing commas in arrays and objects part of the spec? - Stack Overflow