eslint/docs/rules/no-extra-parens.md

   1 # disallow unnecessary parentheses (no-extra-parens)
   2
   3 This rule restricts the use of parentheses to only where they are necessary.
   4
   5 ## Rule Details
   6
   7 This rule always ignores extra parentheses around the following:
   8
   9 * RegExp literals such as `(/abc/).test(var)` to avoid conflicts with the [wrap-regex](wrap-regex.md) rule
  10 * immediately-invoked function expressions (also known as IIFEs) such as `var x = (function () {})();` and `var x = (function () {}());` to avoid conflicts with the [wrap-iife](wrap-iife.md) rule
  11 * arrow function arguments to avoid conflicts with the [arrow-parens](arrow-parens.md) rule
  12
  13 ## Options
  14
  15 This rule has a string option:
  16
  17 * `"all"` (default) disallows unnecessary parentheses around *any* expression
  18 * `"functions"` disallows unnecessary parentheses *only* around function expressions
  19
  20 This rule has an object option for exceptions to the `"all"` option:
  21
  22 * `"conditionalAssign": false` allows extra parentheses around assignments in conditional test expressions
  23 * `"returnAssign": false` allows extra parentheses around assignments in `return` statements
  24 * `"nestedBinaryExpressions": false` allows extra parentheses in nested binary expressions
  25 * `"ignoreJSX": "none|all|multi-line|single-line"` allows extra parentheses around no/all/multi-line/single-line JSX components. Defaults to `none`.
  26 * `"enforceForArrowConditionals": false` allows extra parentheses around ternary expressions which are the body of an arrow function
  27 * `"enforceForSequenceExpressions": false` allows extra parentheses around sequence expressions
  28 * `"enforceForNewInMemberExpressions": false` allows extra parentheses around `new` expressions in member expressions
  29 * `"enforceForFunctionPrototypeMethods": false` allows extra parentheses around immediate `.call` and `.apply` method calls on function expressions and around function expressions in the same context.
  30
  31 ### all
  32
  33 Examples of **incorrect** code for this rule with the default `"all"` option:
  34
  35 ```js
  36 /* eslint no-extra-parens: "error" */
  37
  38 a = (b * c);
  39
  40 (a * b) + c;
  41
  42 for (a in (b, c));
  43
  44 for (a in (b));
  45
  46 for (a of (b));
  47
  48 typeof (a);
  49
  50 (function(){} ? a() : b());
  51
  52 class A {
  53     [(x)] = 1;
  54 }
  55
  56 class B {
  57     x = (y + z);
  58 }
  59 ```
  60
  61 Examples of **correct** code for this rule with the default `"all"` option:
  62
  63 ```js
  64 /* eslint no-extra-parens: "error" */
  65
  66 (0).toString();
  67
  68 (Object.prototype.toString.call());
  69
  70 ({}.toString.call());
  71
  72 (function(){}) ? a() : b();
  73
  74 (/^a$/).test(x);
  75
  76 for (a of (b, c));
  77
  78 for (a of b);
  79
  80 for (a in b, c);
  81
  82 for (a in b);
  83
  84 class A {
  85     [x] = 1;
  86 }
  87
  88 class B {
  89     x = y + z;
  90 }
  91 ```
  92
  93 ### conditionalAssign
  94
  95 Examples of **correct** code for this rule with the `"all"` and `{ "conditionalAssign": false }` options:
  96
  97 ```js
  98 /* eslint no-extra-parens: ["error", "all", { "conditionalAssign": false }] */
  99
 100 while ((foo = bar())) {}
 101
 102 if ((foo = bar())) {}
 103
 104 do; while ((foo = bar()))
 105
 106 for (;(a = b););
 107 ```
 108
 109 ### returnAssign
 110
 111 Examples of **correct** code for this rule with the `"all"` and `{ "returnAssign": false }` options:
 112
 113 ```js
 114 /* eslint no-extra-parens: ["error", "all", { "returnAssign": false }] */
 115
 116 function a(b) {
 117   return (b = 1);
 118 }
 119
 120 function a(b) {
 121   return b ? (c = d) : (c = e);
 122 }
 123
 124 b => (b = 1);
 125
 126 b => b ? (c = d) : (c = e);
 127 ```
 128
 129 ### nestedBinaryExpressions
 130
 131 Examples of **correct** code for this rule with the `"all"` and `{ "nestedBinaryExpressions": false }` options:
 132
 133 ```js
 134 /* eslint no-extra-parens: ["error", "all", { "nestedBinaryExpressions": false }] */
 135
 136 x = a || (b && c);
 137 x = a + (b * c);
 138 x = (a * b) / c;
 139 ```
 140
 141 ### ignoreJSX
 142
 143 Examples of **correct** code for this rule with the `all` and `{ "ignoreJSX": "all" }` options:
 144
 145 ```js
 146 /* eslint no-extra-parens: ["error", "all", { ignoreJSX: "all" }] */
 147 const Component = (<div />)
 148 const Component = (
 149     <div
 150         prop={true}
 151     />
 152 )
 153 ```
 154
 155 Examples of **incorrect** code for this rule with the `all` and `{ "ignoreJSX": "multi-line" }` options:
 156
 157 ```js
 158 /* eslint no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
 159 const Component = (<div />)
 160 const Component = (<div><p /></div>)
 161 ```
 162
 163 Examples of **correct** code for this rule with the `all` and `{ "ignoreJSX": "multi-line" }` options:
 164
 165 ```js
 166 /* eslint no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
 167 const Component = (
 168     <div>
 169         <p />
 170     </div>
 171 )
 172 const Component = (
 173     <div
 174         prop={true}
 175     />
 176 )
 177 ```
 178
 179 Examples of **incorrect** code for this rule with the `all` and `{ "ignoreJSX": "single-line" }` options:
 180
 181 ```js
 182 /* eslint no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
 183 const Component = (
 184     <div>
 185         <p />
 186     </div>
 187 )
 188 const Component = (
 189     <div
 190         prop={true}
 191     />
 192 )
 193 ```
 194
 195 Examples of **correct** code for this rule with the `all` and `{ "ignoreJSX": "single-line" }` options:
 196
 197 ```js
 198 /* eslint no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
 199 const Component = (<div />)
 200 const Component = (<div><p /></div>)
 201 ```
 202
 203 ### enforceForArrowConditionals
 204
 205 Examples of **correct** code for this rule with the `"all"` and `{ "enforceForArrowConditionals": false }` options:
 206
 207 ```js
 208 /* eslint no-extra-parens: ["error", "all", { "enforceForArrowConditionals": false }] */
 209
 210 const b = a => 1 ? 2 : 3;
 211 const d = c => (1 ? 2 : 3);
 212 ```
 213
 214 ### enforceForSequenceExpressions
 215
 216 Examples of **correct** code for this rule with the `"all"` and `{ "enforceForSequenceExpressions": false }` options:
 217
 218 ```js
 219 /* eslint no-extra-parens: ["error", "all", { "enforceForSequenceExpressions": false }] */
 220
 221 (a, b);
 222
 223 if ((val = foo(), val < 10)) {}
 224
 225 while ((val = foo(), val < 10));
 226 ```
 227
 228 ### enforceForNewInMemberExpressions
 229
 230 Examples of **correct** code for this rule with the `"all"` and `{ "enforceForNewInMemberExpressions": false }` options:
 231
 232 ```js
 233 /* eslint no-extra-parens: ["error", "all", { "enforceForNewInMemberExpressions": false }] */
 234
 235 const foo = (new Bar()).baz;
 236
 237 const quux = (new Bar())[baz];
 238
 239 (new Bar()).doSomething();
 240 ```
 241
 242 ### enforceForFunctionPrototypeMethods
 243
 244 Examples of **correct** code for this rule with the `"all"` and `{ "enforceForFunctionPrototypeMethods": false }` options:
 245
 246 ```js
 247 /* eslint no-extra-parens: ["error", "all", { "enforceForFunctionPrototypeMethods": false }] */
 248
 249 const foo = (function () {}).call();
 250
 251 const bar = (function () {}).apply();
 252
 253 const baz = (function () {}.call());
 254
 255 const quux = (function () {}.apply());
 256 ```
 257
 258 ### functions
 259
 260 Examples of **incorrect** code for this rule with the `"functions"` option:
 261
 262 ```js
 263 /* eslint no-extra-parens: ["error", "functions"] */
 264
 265 ((function foo() {}))();
 266
 267 var y = (function () {return 1;});
 268 ```
 269
 270 Examples of **correct** code for this rule with the `"functions"` option:
 271
 272 ```js
 273 /* eslint no-extra-parens: ["error", "functions"] */
 274
 275 (0).toString();
 276
 277 (Object.prototype.toString.call());
 278
 279 ({}.toString.call());
 280
 281 (function(){} ? a() : b());
 282
 283 (/^a$/).test(x);
 284
 285 a = (b * c);
 286
 287 (a * b) + c;
 288
 289 typeof (a);
 290 ```
 291
 292 ## Further Reading
 293
 294 * [MDN: Operator Precedence](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
 295
 296 ## Related Rules
 297
 298 * [arrow-parens](arrow-parens.md)
 299 * [no-cond-assign](no-cond-assign.md)
 300 * [no-return-assign](no-return-assign.md)