With the dangling comma only the new entry is visible in the diff.

2. Easier Code-Manipulations

Goal: Copy the line of the last entry & paste it to any position except the last in the target object/array.

With dangling commas: Easy, no trouble here … 👌

Without dangling commas: Annoyingly you need to remove the comma on the pasted line and remove the comma on the second last line of the original object/array.

As you can see dangling commas make your life easier. I need to point out that this is only one of a couple of workflow that become simpler. 😃

Why only Multiline Statements?

In the title I explicitly mentioned multiline statements since both of the benefits don’t apply to one-line definitions of objects & arrays and prefer to not have them in one-lines.

// no comma before the closing bracket

const fuits = ['apple', 'pear'];

Enforce it with Linting

I highly recommend to lint your code as it helps you to detect mistakes early on and keep the entire codebase in a consistent style. Personally, I prefer ESLint for JavaScript.

Fortunately ESLint has the comma-dangle rule which allows you to enforce dangling commas for multiline statements.

comma-dangle: “always-multiline”

With Airbnb’s ESLint configuration you get this rule out of the box.

What about IE8?

IE8 and below will throw an error when it encounters a dangling comma. When using the JavaScript compiler Babel you don’t have to worry about it. Babel removes the trailing comma.

Conclusion

I wouldn’t pick a fight over enforcing dangling commas. Still I noticed most developers care about these little details and it’s fairly easy to convince your colleagues by explaining the benefits of clean diffs & easier code-manipulations.

Thanks to Max Stoiber for proof-reading.

This is the first post of a series of lessons learned being a Front-end developer. If you are interested to learn more follow me on Medium or Twitter. 🙌