Use parentheses for an arrow function parameters

— 2 minute read

Many people prefer arrow functions for their conciseness. To make arrow functions even more concise, some developers prefer to avoid parentheses for an arrow function parameter, if there is only one. Usually, it's enforced by ESLint rule arrow-parens or Prettier option arrowParens. While it looks nicer for these developers, it creates more work for all developers, when they need to change a number of arguments in an arrow function.

The problem arises from the JavaScript syntax: Arrow function could omit parentheses around its parameters in only one case — when a function has exactly one parameter. In all other cases, parentheses should be there. Every time the number of parameters changes developers need to add parentheses, and it happens very ofter. And tooling can automate this in a single case only: when one parameter is used. In all other cases, it should be fixed manually. There is nothing worse than fixing stylistic issues manually in an era of Prettier and ESLint.

Let me show situations, where developers have to add parentheses.

Add another parameter:

- let test = param => {};
+ let test = (param, param2) => {};

Remove parameter:

- let test = param => {};
+ let test = () => {};

Introduce destructuring:

- let test = props => {};
+ let test = ({prop1, ...props}) => {};

Add type, if using TypeScript:

- let test = param => {};
+ let test = (param: string) => {};

Make your colleagues and yourself a favor: setup tools to always use parentheses for an arrow function parameters.

For Prettier:

"arrowParens": "always"

For ESLint:

"arrow-parens": ["warn", "always"]