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:
1 2 3 4 5 6 7 8 9 10 11 12 | //trailing comma trong Object literal var viblo = { tab1: 'Newest', tab2: 'Series', tab3: 'Trending', } //trailing comma trong tham số của hàm (và trong lời gọi hàm) function defName(param1, param2,) { /* ... */ } |
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:
1 2 | namePost = ['post1', 'post2', 'post3',] |
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:
1 2 3 4 5 6 7 8 | var viblo = { tab1: 'Newest', tab2: 'Series', - tab3: 'Trending' + tab4: 'Video', + tab5: 'My Clips', } |
Tired, right! So the trailing comma has the opportunity to work again. Just a light “comma” is already different
1 2 3 4 5 6 7 8 | var viblo = { tab1: 'Newest', tab2: 'Series', tab3: 'Trending', + tab4: 'Video', + tab5: 'My Clips', } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Cách viết thông thường của hàm có nhiều tham số function getContent(title, time, content, author) { /* ...*/ } // Khi hàm có nhiều tham số, bạn nên sử dụng object literal function getContent(options = {}) { /* ...*/ } // Và bạn cũng hoàn toàn có thể gọi hàm bằng cách giá trị cho tham số thông qua object literal getContent({ title, time, content, author, }) |
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
1 2 3 4 5 6 | // lỗi cú pháp unexpected token... var a, b, c, ; |
Instead, keep “nice code” when declaring many local variables like this:
1 2 3 4 5 6 7 8 9 10 | // Với danh sách biến không gán giá trị ban đầu, // có thể viết trên cùng một hàng: var a, b, c, d, e; // Với danh sách biến có gán giá trị ban đầu, // hãy xuống dòng và bắt đầu với từ khóa var / let: var x = 1; var y = 2; var z = 3; |
Conclude
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.