2 title: no-mixed-operators
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.
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*/
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:
23 var foo = a && b || c || d;
29 1:13 Unexpected mix of '&&' and '||'. (no-mixed-operators)
30 1:18 Unexpected mix of '&&' and '||'. (no-mixed-operators)
35 This rule checks `BinaryExpression`, `LogicalExpression` and `ConditionalExpression`.
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.
40 Examples of **incorrect** code for this rule:
45 /*eslint no-mixed-operators: "error"*/
47 var foo = a && b < 0 || c > 0 || d + 1 === 0;
53 Examples of **correct** code for this rule:
58 /*eslint no-mixed-operators: "error"*/
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;
74 "no-mixed-operators": [
78 ["+", "-", "*", "/", "%", "**"],
79 ["&", "|", "^", "~", "<<", ">>", ">>>"],
80 ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
84 "allowSamePrecedence": true
90 This rule has 2 options.
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.
94 * `allowSamePrecedence` (`boolean`) - specifies whether to allow mixed operators if they are of equal precedence. Default is `true`.
98 The following operators can be used in `groups` option:
100 * Arithmetic Operators: `"+"`, `"-"`, `"*"`, `"/"`, `"%"`, `"**"`
101 * Bitwise Operators: `"&"`, `"|"`, `"^"`, `"~"`, `"<<"`, `">>"`, `">>>"`
102 * Comparison Operators: `"=="`, `"!="`, `"==="`, `"!=="`, `">"`, `">="`, `"<"`, `"<="`
103 * Logical Operators: `"&&"`, `"||"`
104 * Coalesce Operator: `"??"`
105 * Relational Operators: `"in"`, `"instanceof"`
106 * Ternary Operator: `?:`
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.
113 Examples of **incorrect** code for this rule with `{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}` option:
118 /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
120 var foo = a && b < 0 || c > 0 || d + 1 === 0;
129 /*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/
131 var foo = a || b ? c : d;
133 var bar = a ? b || c : d;
135 var baz = a ? b : c || d;
140 Examples of **correct** code for this rule with `{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}` option:
145 /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
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);
154 var foo = a + (b * c);
155 var foo = (a + b) * c;
163 /*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/
165 var foo = (a || b) ? c : d;
166 var foo = a || (b ? c : d);
168 var bar = a ? (b || c) : d;
170 var baz = a ? b : (c || d);
171 var baz = (a ? b : c) || d;
176 ### allowSamePrecedence
178 Examples of **correct** code for this rule with `{"allowSamePrecedence": true}` option:
183 /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/
185 // + and - have the same precedence.
191 Examples of **incorrect** code for this rule with `{"allowSamePrecedence": false}` option:
196 /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
198 // + and - have the same precedence.
204 Examples of **correct** code for this rule with `{"allowSamePrecedence": false}` option:
209 /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
211 // + and - have the same precedence.
212 var foo = (a + b) - c;
217 ## When Not To Use It
219 If you don't want to be notified about mixed operators, then it's safe to disable this rule.