eslint/docs/src/rules/no-confusing-arrow.md

   1 ---
   2 title: no-confusing-arrow
   3 layout: doc
   4 rule_type: suggestion
   5 related_rules:
   6 - no-constant-condition
   7 - arrow-parens
   8 ---
   9
  10
  11
  12 Arrow functions (`=>`) are similar in syntax to some comparison operators (`>`, `<`, `<=`, and `>=`). This rule warns against using the arrow function syntax in places where it could be confused with a comparison operator.
  13
  14 Here's an example where the usage of `=>` could be confusing:
  15
  16 ```js
  17 // The intent is not clear
  18 var x = a => 1 ? 2 : 3;
  19 // Did the author mean this
  20 var x = function (a) {
  21     return 1 ? 2 : 3;
  22 };
  23 // Or this
  24 var x = a <= 1 ? 2 : 3;
  25 ```
  26
  27 ## Rule Details
  28
  29 Examples of **incorrect** code for this rule:
  30
  31 ::: incorrect
  32
  33 ```js
  34 /*eslint no-confusing-arrow: "error"*/
  35 /*eslint-env es6*/
  36
  37 var x = a => 1 ? 2 : 3;
  38 var x = (a) => 1 ? 2 : 3;
  39 ```
  40
  41 :::
  42
  43 Examples of **correct** code for this rule:
  44
  45 ::: correct
  46
  47 ```js
  48 /*eslint no-confusing-arrow: "error"*/
  49 /*eslint-env es6*/
  50 var x = a => (1 ? 2 : 3);
  51 var x = (a) => (1 ? 2 : 3);
  52 var x = (a) => {
  53     return 1 ? 2 : 3;
  54 };
  55 var x = a => { return 1 ? 2 : 3; };
  56 ```
  57
  58 :::
  59
  60 ## Options
  61
  62 This rule accepts two options argument with the following defaults:
  63
  64 ```json
  65 {
  66     "rules": {
  67         "no-confusing-arrow": [
  68             "error",
  69             { "allowParens": true, "onlyOneSimpleParam": false }
  70         ]
  71     }
  72 }
  73 ```
  74
  75 `allowParens` is a boolean setting that can be `true`(default) or `false`:
  76
  77 1. `true` relaxes the rule and accepts parenthesis as a valid "confusion-preventing" syntax.
  78 2. `false` warns even if the expression is wrapped in parenthesis
  79
  80 Examples of **incorrect** code for this rule with the `{"allowParens": false}` option:
  81
  82 ::: incorrect
  83
  84 ```js
  85 /*eslint no-confusing-arrow: ["error", {"allowParens": false}]*/
  86 /*eslint-env es6*/
  87 var x = a => (1 ? 2 : 3);
  88 var x = (a) => (1 ? 2 : 3);
  89 ```
  90
  91 :::
  92
  93 `onlyOneSimpleParam` is a boolean setting that can be `true` or `false`(default):
  94
  95 1. `true` relaxes the rule and doesn't report errors if the arrow function has 0 or more than 1 parameters, or the parameter is not an identifier.
  96 2. `false` warns regardless of parameters.
  97
  98 Examples of **correct** code for this rule with the `{"onlyOneSimpleParam": true}` option:
  99
 100 ::: correct
 101
 102 ```js
 103 /*eslint no-confusing-arrow: ["error", {"onlyOneSimpleParam": true}]*/
 104 /*eslint-env es6*/
 105 () => 1 ? 2 : 3;
 106 (a, b) => 1 ? 2 : 3;
 107 (a = b) => 1 ? 2 : 3;
 108 ({ a }) => 1 ? 2 : 3;
 109 ([a]) => 1 ? 2 : 3;
 110 (...a) => 1 ? 2 : 3;
 111 ```
 112
 113 :::