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