]>
Commit | Line | Data |
---|---|---|
eb39fafa DC |
1 | # Require using arrow functions for callbacks (prefer-arrow-callback) |
2 | ||
3 | Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments. | |
4 | ||
5 | For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior. | |
6 | ||
7 | Additionally, arrow functions are: | |
8 | ||
9 | - less verbose, and easier to reason about. | |
10 | ||
11 | - bound lexically regardless of where or when they are invoked. | |
12 | ||
13 | ## Rule Details | |
14 | ||
15 | This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result. | |
16 | ||
17 | The following examples **will** be flagged: | |
18 | ||
19 | ```js | |
20 | /* eslint prefer-arrow-callback: "error" */ | |
21 | ||
22 | foo(function(a) { return a; }); // ERROR | |
23 | // prefer: foo(a => a) | |
24 | ||
25 | foo(function() { return this.a; }.bind(this)); // ERROR | |
26 | // prefer: foo(() => this.a) | |
27 | ``` | |
28 | ||
29 | Instances where an arrow function would not produce identical results will be ignored. | |
30 | ||
31 | The following examples **will not** be flagged: | |
32 | ||
33 | ```js | |
34 | /* eslint prefer-arrow-callback: "error" */ | |
35 | /* eslint-env es6 */ | |
36 | ||
37 | // arrow function callback | |
38 | foo(a => a); // OK | |
39 | ||
40 | // generator as callback | |
41 | foo(function*() { yield; }); // OK | |
42 | ||
43 | // function expression not used as callback or function argument | |
44 | var foo = function foo(a) { return a; }; // OK | |
45 | ||
46 | // unbound function expression callback | |
47 | foo(function() { return this.a; }); // OK | |
48 | ||
49 | // recursive named function callback | |
50 | foo(function bar(n) { return n && n + bar(n - 1); }); // OK | |
51 | ``` | |
52 | ||
53 | ## Options | |
54 | ||
55 | Access further control over this rule's behavior via an options object. | |
56 | ||
57 | Default: `{ allowNamedFunctions: false, allowUnboundThis: true }` | |
58 | ||
59 | ### allowNamedFunctions | |
60 | ||
61 | By default `{ "allowNamedFunctions": false }`, this `boolean` option prohibits using named functions as callbacks or function arguments. | |
62 | ||
63 | Changing this value to `true` will reverse this option's behavior by allowing use of named functions without restriction. | |
64 | ||
65 | `{ "allowNamedFunctions": true }` **will not** flag the following example: | |
66 | ||
67 | ```js | |
68 | /* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */ | |
69 | ||
70 | foo(function bar() {}); | |
71 | ``` | |
72 | ||
73 | ### allowUnboundThis | |
74 | ||
75 | By default `{ "allowUnboundThis": true }`, this `boolean` option allows function expressions containing `this` to be used as callbacks, as long as the function in question has not been explicitly bound. | |
76 | ||
77 | When set to `false` this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception. | |
78 | ||
79 | `{ "allowUnboundThis": false }` **will** flag the following examples: | |
80 | ||
81 | ```js | |
82 | /* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */ | |
83 | /* eslint-env es6 */ | |
84 | ||
85 | foo(function() { this.a; }); | |
86 | ||
87 | foo(function() { (() => this); }); | |
88 | ||
5422a9cc | 89 | someArray.map(function(item) { return this.doSomething(item); }, someObject); |
eb39fafa DC |
90 | ``` |
91 | ||
92 | ## When Not To Use It | |
93 | ||
94 | - In environments that have not yet adopted ES6 language features (ES3/5). | |
95 | ||
96 | - In ES6+ environments that allow the use of function expressions when describing callbacks or function arguments. | |
97 | ||
98 | ## Further Reading | |
99 | ||
100 | - [More on ES6 arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) |