1 # Require parens in arrow function arguments (arrow-parens)
3 Arrow functions can omit parentheses when they have exactly one parameter. In all other cases the parameter(s) must
4 be wrapped in parentheses. This rule enforces the consistent use of parentheses in arrow functions.
8 This rule enforces parentheses around arrow function parameters regardless of arity. For example:
20 Following this style will help you find arrow functions (`=>`) which may be mistakenly included in a condition
21 when a comparison such as `>=` was the intent.
35 The rule can also be configured to discourage the use of parens when they are not required:
49 This rule has a string option and an object one.
53 * `"always"` (default) requires parens around arguments in all cases.
54 * `"as-needed"` enforces no parens where they can be omitted.
56 Object properties for variants of the `"as-needed"` option:
58 * `"requireForBlockBody": true` modifies the as-needed rule in order to require parens if the function body is in an instructions block (surrounded by braces).
62 Examples of **incorrect** code for this rule with the default `"always"` option:
65 /*eslint arrow-parens: ["error", "always"]*/
73 a(foo => { if (true) {} });
76 Examples of **correct** code for this rule with the default `"always"` option:
79 /*eslint arrow-parens: ["error", "always"]*/
87 a.then((foo) => { if (true) {} });
92 One of the benefits of this option is that it prevents the incorrect use of arrow functions in conditionals:
101 console.log('bigger');
103 console.log('smaller');
105 // outputs 'bigger', not smaller as expected
108 The contents of the `if` statement is an arrow function, not a comparison.
110 If the arrow function is intentional, it should be wrapped in parens to remove ambiguity.
119 console.log('truthy value returned');
121 console.log('falsey value returned');
123 // outputs 'truthy value returned'
126 The following is another example of this behavior:
131 var a = 1, b = 2, c = 3, d = 4;
132 var f = a => b ? c: d;
136 `f` is an arrow function which takes `a` as an argument and returns the result of `b ? c: d`.
138 This should be rewritten like so:
143 var a = 1, b = 2, c = 3, d = 4;
144 var f = (a) => b ? c: d;
149 Examples of **incorrect** code for this rule with the `"as-needed"` option:
152 /*eslint arrow-parens: ["error", "as-needed"]*/
160 a((foo) => { if (true) {} });
161 const f = /** @type {number} */(a) => a + a;
162 const g = /* comment */ (a) => a + a;
163 const h = (a) /* comment */ => a + a;
166 Examples of **correct** code for this rule with the `"as-needed"` option:
169 /*eslint arrow-parens: ["error", "as-needed"]*/
177 a.then(foo => { if (true) {} });
182 const f = (/** @type {number} */a) => a + a;
183 const g = (/* comment */ a) => a + a;
184 const h = (a /* comment */) => a + a;
187 ### requireForBlockBody
189 Examples of **incorrect** code for the `{ "requireForBlockBody": true }` option:
192 /*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
205 Examples of **correct** code for the `{ "requireForBlockBody": true }` option:
208 /*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
217 a.then((foo) => { if (true) {} });
218 a((foo) => { if (true) {} });
227 * The `"as-needed", { "requireForBlockBody": true }` rule is directly inspired by the Airbnb
228 [JS Style Guide](https://github.com/airbnb/javascript#arrows--one-arg-parens).