eslint/docs/rules/no-mixed-operators.md

   1 # Disallow mixes of different operators (no-mixed-operators)
   2
   3 Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable.
   4 This rule warns when different operators are used consecutively without parentheses in an expression.
   5
   6 ```js
   7 var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
   8 var foo = a && b ? c : d;      /*BAD: Unexpected mix of '&&' and '?:'.*/
   9 var foo = (a && b) ? c : d;    /*GOOD*/
  10 var foo = (a && b) || c || d;  /*GOOD*/
  11 var foo = a && (b || c || d);  /*GOOD*/
  12 ```
  13
  14 **Note:**
  15 It is expected for this rule to emit one error for each mixed operator in a pair. As a result, for each two consecutive mixed operators used, a distinct error will be displayed, pointing to where the specific operator that breaks the rule is used:
  16
  17 ```js
  18 var foo = a && b || c || d;
  19 ```
  20
  21 will generate
  22
  23 ```sh
  24 1:13  Unexpected mix of '&&' and '||'. (no-mixed-operators)
  25 1:18  Unexpected mix of '&&' and '||'. (no-mixed-operators)
  26 ```
  27
  28 ```js
  29 var foo = a && b ? c : d;
  30 ```
  31
  32 will generate
  33
  34 ```sh
  35 1:13  Unexpected mix of '&&' and '?:'. (no-mixed-operators)
  36 1:18  Unexpected mix of '&&' and '?:'. (no-mixed-operators)
  37 ```
  38
  39
  40 ## Rule Details
  41
  42 This rule checks `BinaryExpression`, `LogicalExpression` and `ConditionalExpression`.
  43
  44 This rule may conflict with [no-extra-parens](no-extra-parens.md) rule.
  45 If you use both this and [no-extra-parens](no-extra-parens.md) rule together, you need to use the `nestedBinaryExpressions` option of [no-extra-parens](no-extra-parens.md) rule.
  46
  47 Examples of **incorrect** code for this rule:
  48
  49 ```js
  50 /*eslint no-mixed-operators: "error"*/
  51
  52 var foo = a && b < 0 || c > 0 || d + 1 === 0;
  53 var foo = a + b * c;
  54 ```
  55
  56 Examples of **correct** code for this rule:
  57
  58 ```js
  59 /*eslint no-mixed-operators: "error"*/
  60
  61 var foo = a || b || c;
  62 var foo = a && b && c;
  63 var foo = (a && b < 0) || c > 0 || d + 1 === 0;
  64 var foo = a && (b < 0 || c > 0 || d + 1 === 0);
  65 var foo = a + (b * c);
  66 var foo = (a + b) * c;
  67 ```
  68
  69 ## Options
  70
  71 ```json
  72 {
  73     "no-mixed-operators": [
  74         "error",
  75         {
  76             "groups": [
  77                 ["+", "-", "*", "/", "%", "**"],
  78                 ["&", "|", "^", "~", "<<", ">>", ">>>"],
  79                 ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
  80                 ["&&", "||"],
  81                 ["in", "instanceof"]
  82             ],
  83             "allowSamePrecedence": true
  84         }
  85     ]
  86 }
  87 ```
  88
  89 This rule has 2 options.
  90
  91 * `groups` (`string[][]`) - specifies operator groups to be checked. The `groups` option is a list of groups, and a group is a list of binary operators. Default operator groups are defined as arithmetic, bitwise, comparison, logical, and relational operators. Note: Ternary operator(?:) can be part of any group and by default is allowed to be mixed with other operators.
  92
  93 * `allowSamePrecedence` (`boolean`) - specifies whether to allow mixed operators if they are of equal precedence. Default is `true`.
  94
  95 ### groups
  96
  97 The following operators can be used in `groups` option:
  98
  99 * Arithmetic Operators: `"+"`, `"-"`, `"*"`, `"/"`, `"%"`, `"**"`
 100 * Bitwise Operators: `"&"`, `"|"`, `"^"`, `"~"`, `"<<"`, `">>"`, `">>>"`
 101 * Comparison Operators: `"=="`, `"!="`, `"==="`, `"!=="`, `">"`, `">="`, `"<"`, `"<="`
 102 * Logical Operators: `"&&"`, `"||"`
 103 * Relational Operators: `"in"`, `"instanceof"`
 104 * Ternary Operator: `?:`
 105
 106 Now, consider the following group configuration: `{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}`.
 107 There are 2 groups specified in this configuration: bitwise operators and logical operators.
 108 This rule checks if the operators belong to the same group only.
 109 In this case, this rule checks if bitwise operators and logical operators are mixed, but ignores all other operators.
 110
 111 Examples of **incorrect** code for this rule with `{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}` option:
 112
 113 ```js
 114 /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
 115
 116 var foo = a && b < 0 || c > 0 || d + 1 === 0;
 117 var foo = a & b | c;
 118 ```
 119
 120 ```js
 121 /*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/
 122
 123 var foo = a || b ? c : d;
 124 ```
 125
 126 Examples of **correct** code for this rule with `{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}` option:
 127
 128 ```js
 129 /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
 130
 131 var foo = a || b > 0 || c + 1 === 0;
 132 var foo = a && b > 0 && c + 1 === 0;
 133 var foo = (a && b < 0) || c > 0 || d + 1 === 0;
 134 var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
 135 var foo = (a & b) | c;
 136 var foo = a & (b | c);
 137 var foo = a + b * c;
 138 var foo = a + (b * c);
 139 var foo = (a + b) * c;
 140 ```
 141
 142 ```js
 143 /*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/
 144
 145 var foo = (a || b) ? c : d;
 146 var foo = a || (b ? c : d);
 147 ```
 148
 149 ### allowSamePrecedence
 150
 151 Examples of **correct** code for this rule with `{"allowSamePrecedence": true}` option:
 152
 153 ```js
 154 /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/
 155
 156 // + and - have the same precedence.
 157 var foo = a + b - c;
 158 ```
 159
 160 Examples of **incorrect** code for this rule with `{"allowSamePrecedence": false}` option:
 161
 162 ```js
 163 /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
 164
 165 // + and - have the same precedence.
 166 var foo = a + b - c;
 167 ```
 168
 169 Examples of **correct** code for this rule with `{"allowSamePrecedence": false}` option:
 170
 171 ```js
 172 /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
 173
 174 // + and - have the same precedence.
 175 var foo = (a + b) - c;
 176 ```
 177
 178 ## When Not To Use It
 179
 180 If you don't want to be notified about mixed operators, then it's safe to disable this rule.
 181
 182 ## Related Rules
 183
 184 * [no-extra-parens](no-extra-parens.md)