Why is this an issue?

Arrow functions in JavaScript provide a concise syntax to write function expressions. However, the use of braces {} and parentheses () should be consistent in arrow functions for the following reasons:

• Readability: Consistent use of braces and parentheses improves the readability of the code. It makes it easier for other developers to understand the code quickly and reduces the chances of misinterpretation.
• Predictability: When braces and parentheses are used consistently, it makes the code more predictable. Developers can easily predict the outcome of the function.
• Avoid Errors: Inconsistent use of braces and parentheses can lead to errors. For example, if braces are omitted for a function that has more than one statement, it will result in a syntax error.
• Code Maintenance: Consistent use of braces and parentheses makes the code easier to maintain. It’s easier to add or remove code lines without worrying about adjusting braces or parentheses.

Shared coding conventions allow teams to collaborate effectively. This rule raises an issue when using parentheses and curly braces with an arrow function does not conform to the configured requirements.

How to fix it

Code examples

Use parentheses and curly braces with arrow functions consistently. By default, the rule forbids arrow functions to have parentheses around single parameters and curly braces around single-return bodies.

Noncompliant code example

const foo = (a) => { /* ... */ };  // Noncompliant; remove the parentheses from the parameter
const bar = (a, b) => { return 0; };  // Noncompliant; remove the curly braces from the body

Compliant solution

const foo = a => { /* ... */ };
const bar = (a, b) => 0;

Resources

Documentation

• MDN web docs - Arrow function expressions