eslint/docs/rules/prefer-arrow-callback.md

   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
  89 someArray.map(function(itm) { return this.doSomething(itm); }, someObject);
  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)