eslint/docs/src/rules/arrow-parens.md

   1 ---
   2 title: arrow-parens
   3 rule_type: layout
   4 further_reading:
   5 - https://github.com/airbnb/javascript#arrows--one-arg-parens
   6 ---
   7
   8
   9
  10 Arrow functions can omit parentheses when they have exactly one parameter. In all other cases the parameter(s) must
  11 be wrapped in parentheses. This rule enforces the consistent use of parentheses in arrow functions.
  12
  13 ## Rule Details
  14
  15 This rule enforces parentheses around arrow function parameters regardless of arity. For example:
  16
  17 ```js
  18 /*eslint-env es6*/
  19
  20 // Bad
  21 a => {}
  22
  23 // Good
  24 (a) => {}
  25 ```
  26
  27 Following this style will help you find arrow functions (`=>`) which may be mistakenly included in a condition
  28 when a comparison such as `>=` was the intent.
  29
  30 ```js
  31 /*eslint-env es6*/
  32
  33 // Bad
  34 if (a => 2) {
  35 }
  36
  37 // Good
  38 if (a >= 2) {
  39 }
  40 ```
  41
  42 The rule can also be configured to discourage the use of parens when they are not required:
  43
  44 ```js
  45 /*eslint-env es6*/
  46
  47 // Bad
  48 (a) => {}
  49
  50 // Good
  51 a => {}
  52 ```
  53
  54 ## Options
  55
  56 This rule has a string option and an object one.
  57
  58 String options are:
  59
  60 * `"always"` (default) requires parens around arguments in all cases.
  61 * `"as-needed"` enforces no parens where they can be omitted.
  62
  63 Object properties for variants of the `"as-needed"` option:
  64
  65 * `"requireForBlockBody": true` modifies the as-needed rule in order to require parens if the function body is in an instructions block (surrounded by braces).
  66
  67 ### always
  68
  69 Examples of **incorrect** code for this rule with the default `"always"` option:
  70
  71 :::incorrect
  72
  73 ```js
  74 /*eslint arrow-parens: ["error", "always"]*/
  75 /*eslint-env es6*/
  76
  77 a => {};
  78 a => a;
  79 a => {'\n'};
  80 a.then(foo => {});
  81 a.then(foo => a);
  82 a(foo => { if (true) {} });
  83 ```
  84
  85 :::
  86
  87 Examples of **correct** code for this rule with the default `"always"` option:
  88
  89 :::correct
  90
  91 ```js
  92 /*eslint arrow-parens: ["error", "always"]*/
  93 /*eslint-env es6*/
  94
  95 () => {};
  96 (a) => {};
  97 (a) => a;
  98 (a) => {'\n'}
  99 a.then((foo) => {});
 100 a.then((foo) => { if (true) {} });
 101 ```
 102
 103 :::
 104
 105 #### If Statements
 106
 107 One of the benefits of this option is that it prevents the incorrect use of arrow functions in conditionals:
 108
 109 ```js
 110 /*eslint-env es6*/
 111
 112 var a = 1;
 113 var b = 2;
 114 // ...
 115 if (a => b) {
 116  console.log('bigger');
 117 } else {
 118  console.log('smaller');
 119 }
 120 // outputs 'bigger', not smaller as expected
 121 ```
 122
 123 The contents of the `if` statement is an arrow function, not a comparison.
 124
 125 If the arrow function is intentional, it should be wrapped in parens to remove ambiguity.
 126
 127 ```js
 128 /*eslint-env es6*/
 129
 130 var a = 1;
 131 var b = 0;
 132 // ...
 133 if ((a) => b) {
 134  console.log('truthy value returned');
 135 } else {
 136  console.log('falsy value returned');
 137 }
 138 // outputs 'truthy value returned'
 139 ```
 140
 141 The following is another example of this behavior:
 142
 143 ```js
 144 /*eslint-env es6*/
 145
 146 var a = 1, b = 2, c = 3, d = 4;
 147 var f = a => b ? c: d;
 148 // f = ?
 149 ```
 150
 151 `f` is an arrow function which takes `a` as an argument and returns the result of `b ? c: d`.
 152
 153 This should be rewritten like so:
 154
 155 ```js
 156 /*eslint-env es6*/
 157
 158 var a = 1, b = 2, c = 3, d = 4;
 159 var f = (a) => b ? c: d;
 160 ```
 161
 162 ### as-needed
 163
 164 Examples of **incorrect** code for this rule with the `"as-needed"` option:
 165
 166 :::incorrect
 167
 168 ```js
 169 /*eslint arrow-parens: ["error", "as-needed"]*/
 170 /*eslint-env es6*/
 171
 172 (a) => {};
 173 (a) => a;
 174 (a) => {'\n'};
 175 a.then((foo) => {});
 176 a.then((foo) => a);
 177 a((foo) => { if (true) {} });
 178 const f = /** @type {number} */(a) => a + a;
 179 const g = /* comment */ (a) => a + a;
 180 const h = (a) /* comment */ => a + a;
 181 ```
 182
 183 :::
 184
 185 Examples of **correct** code for this rule with the `"as-needed"` option:
 186
 187 :::correct
 188
 189 ```js
 190 /*eslint arrow-parens: ["error", "as-needed"]*/
 191 /*eslint-env es6*/
 192
 193 () => {};
 194 a => {};
 195 a => a;
 196 a => {'\n'};
 197 a.then(foo => {});
 198 a.then(foo => { if (true) {} });
 199 (a, b, c) => a;
 200 (a = 10) => a;
 201 ([a, b]) => a;
 202 ({a, b}) => a;
 203 const f = (/** @type {number} */a) => a + a;
 204 const g = (/* comment */ a) => a + a;
 205 const h = (a /* comment */) => a + a;
 206 ```
 207
 208 :::
 209
 210 ### requireForBlockBody
 211
 212 Examples of **incorrect** code for the `{ "requireForBlockBody": true }` option:
 213
 214 :::incorrect
 215
 216 ```js
 217 /*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
 218 /*eslint-env es6*/
 219
 220 (a) => a;
 221 a => {};
 222 a => {'\n'};
 223 a.map((x) => x * x);
 224 a.map(x => {
 225   return x * x;
 226 });
 227 a.then(foo => {});
 228 ```
 229
 230 :::
 231
 232 Examples of **correct** code for the `{ "requireForBlockBody": true }` option:
 233
 234 :::correct
 235
 236 ```js
 237 /*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
 238 /*eslint-env es6*/
 239
 240 (a) => {};
 241 (a) => {'\n'};
 242 a => ({});
 243 () => {};
 244 a => a;
 245 a.then((foo) => {});
 246 a.then((foo) => { if (true) {} });
 247 a((foo) => { if (true) {} });
 248 (a, b, c) => a;
 249 (a = 10) => a;
 250 ([a, b]) => a;
 251 ({a, b}) => a;
 252 ```
 253
 254 :::