Photo by Spisharam

Why you should enforce Dangling Commas for Multiline Statements

We all have different opinions on what code should look like. Most of the time it’s a matter of preference based on good arguments. When it comes to dangling commas I noticed most people didn’t like them until they understood the benefits. I didn’t either, until recently …

Before we dig into the benefits let’s briefly explore what I mean with dangling commas.

Code without dangling commas:

const fruits = [
'apples',
'banana' // <- no comma before the closing bracket
];
const godzilla = {
teeth: 213,
kind: 'giant monster' // <- no comma before the closing brace
};

Code with dangling commas:

const fruits = [
'apples',
'banana', // <- comma before the closing bracket
];
const godzilla = {
teeth: 213,
kind: 'giant monster', // <- comma before the closing brace
};

Benefits

At the first glance, it might look a bit weird. Let’s dig into it and find out why so many people use dangling commas.🤓

1. Clean Diffs

Clean diffs become increasingly more important as your codebase & team grows. Especially while reviewing Pull-Requests.

Adding ‘pineapple’ to the fruits array

We want to add an entry to an array.


Addition without a dangling comma

Without the dangling comma an additional entry leads to a change of two lines.


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


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. 🙌