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

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