Interesting things about Trailing comma in JavaScript

Tram Ho

What is Trailing Comma?

Trailing comma (trailing comma, comma) is the leaving a comma after the last element at the end of a list (it can be an element in an Array literal, a property in an Object literal, a function parameter … ).

For example:

Often a comma is used to separate elements in a list. And in the above example the comma at the end is grammatically redundant. And if you use an old browser that only supports ECMAScript 3 and earlier (IE8), then when you translate the code:

Then what you get will look like this:

However, everything has changed 360 * since the introduction of ECMAScript 5. trailing comma is acceptable for Array and Object property lists.

Why does trailing comma become best practice?

Now let’s find out if trailing comma is interesting.

1. Elements that are added at the end will always be identical and separate

When trailing comma is not used, adding an element to the end of the list affects the next element just added with a comma. And when you commit the code to Git, everything looks like this:

Tired, right! So the trailing comma has the opportunity to work again. Just a light “comma” is already different

2. Easily reorder and update the list

For a better view, you can follow the GIF below:

3. Reduce the number of conflict lines when merging with version control

In the above example, as you can see, when the trailing comma is not used, even though the female element adds the same comma, Git does not automatically merge this line and still reports a conflict with the next line of changes. Keeping track of these meaningless conflicts will make it difficult for the merge person to do the same, and it is easy to make mistakes in losing code after resolving.

And the solution is nothing but trailing comma

But be careful when using trailing comma

1. Trailing comma in function parameters

Trailing comma is only useful for lists on multiple lines, so when short lists are on the same line, you don’t need any extra commas.

With the parameter list of the function, trailing comma was only accepted in ES2017 . If the JS engine does not support it, and when running it directly it will cause syntax errors. So it is safer if your code is compiled via Babel and using preset-env.

Therefore, you should still avoid trailing comma in function parameters, and when writing functions with too long parameter lists, you should use object literal to gather a list of parameters like this:

2. Can’t use Trailing comma in variable declaration

A typical case, which often involves commas, is when you declare multiple variables with the var / let. keyword var / let. And with JS syntax, you cannot add Trailing comma when declaring variables

Instead, keep “nice code” when declaring many local variables like this:


Thus, the appearance of Trailing comma has partly brought about significant benefits in coding and committing to version control. However, there are still notes you need to pay attention to so that the use of “residual commas” is beneficial and not harmful . Hopefully, through this article, you can understand more about the miracles that appear in JS.

Share the news now

Source : Viblo