]>
Commit | Line | Data |
---|---|---|
8f9d1d4d DC |
1 | --- |
2 | title: arrow-parens | |
8f9d1d4d DC |
3 | rule_type: layout |
4 | further_reading: | |
5 | - https://github.com/airbnb/javascript#arrows--one-arg-parens | |
6 | --- | |
7 | ||
8 | ||
eb39fafa DC |
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 | ||
eb39fafa DC |
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. | |
5422a9cc | 61 | * `"as-needed"` enforces no parens where they can be omitted. |
eb39fafa DC |
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 | ||
8f9d1d4d DC |
71 | :::incorrect |
72 | ||
eb39fafa DC |
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 | ||
8f9d1d4d DC |
85 | ::: |
86 | ||
eb39fafa DC |
87 | Examples of **correct** code for this rule with the default `"always"` option: |
88 | ||
8f9d1d4d DC |
89 | :::correct |
90 | ||
eb39fafa DC |
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 | ||
8f9d1d4d DC |
103 | ::: |
104 | ||
eb39fafa DC |
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 { | |
f2a92ac6 | 136 | console.log('falsy value returned'); |
eb39fafa DC |
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 | ||
8f9d1d4d DC |
166 | :::incorrect |
167 | ||
eb39fafa DC |
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) {} }); | |
ebb53d86 TL |
178 | const f = /** @type {number} */(a) => a + a; |
179 | const g = /* comment */ (a) => a + a; | |
180 | const h = (a) /* comment */ => a + a; | |
eb39fafa DC |
181 | ``` |
182 | ||
8f9d1d4d DC |
183 | ::: |
184 | ||
eb39fafa DC |
185 | Examples of **correct** code for this rule with the `"as-needed"` option: |
186 | ||
8f9d1d4d DC |
187 | :::correct |
188 | ||
eb39fafa DC |
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; | |
ebb53d86 TL |
203 | const f = (/** @type {number} */a) => a + a; |
204 | const g = (/* comment */ a) => a + a; | |
205 | const h = (a /* comment */) => a + a; | |
eb39fafa DC |
206 | ``` |
207 | ||
8f9d1d4d DC |
208 | ::: |
209 | ||
eb39fafa DC |
210 | ### requireForBlockBody |
211 | ||
212 | Examples of **incorrect** code for the `{ "requireForBlockBody": true }` option: | |
213 | ||
8f9d1d4d DC |
214 | :::incorrect |
215 | ||
eb39fafa DC |
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 | ||
8f9d1d4d DC |
230 | ::: |
231 | ||
eb39fafa DC |
232 | Examples of **correct** code for the `{ "requireForBlockBody": true }` option: |
233 | ||
8f9d1d4d DC |
234 | :::correct |
235 | ||
eb39fafa DC |
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 | ||
8f9d1d4d | 254 | ::: |