return (h ^ h >>> 9) >>> 0;

Close

Disallow mixes of different operators (no-mixed-operators)

Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

Note: 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:

var foo = a && b || c || d;

will generate

1:13  Unexpected mix of '&&' and '||'. (no-mixed-operators)
1:18  Unexpected mix of '&&' and '||'. (no-mixed-operators)

Rule Details

This rule checks BinaryExpression and LogicalExpression.

This rule may conflict with [no-extra-parens](no-extra-parens.md) rule. 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.

Examples of incorrect code for this rule:

/*eslint no-mixed-operators: "error"*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a + b * c;

Examples of correct code for this rule:

/*eslint no-mixed-operators: "error"*/

var foo = a || b || c;
var foo = a && b && c;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 || c > 0 || d + 1 === 0);
var foo = a + (b * c);
var foo = (a + b) * c;

Options

{
    "no-mixed-operators": [
        "error",
        {
            "groups": [
                ["+", "-", "*", "/", "%", "**"],
                ["&", "|", "^", "~", "<<", ">>", ">>>"],
                ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                ["&&", "||"],
                ["in", "instanceof"]
            ],
            "allowSamePrecedence": true
        }
    ]
}

This rule has 2 options.

• 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.
• allowSamePrecedence (boolean) - specifies whether to allow mixed operators if they are of equal precedence. Default is true.

groups

The following operators can be used in groups option:

• Arithmetic Operators: "+", "-", "*", "/", "%", "**"
• Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"
• Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="
• Logical Operators: "&&", "||"
• Relational Operators: "in", "instanceof"

Now, consider the following group configuration: {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}. There are 2 groups specified in this configuration: bitwise operators and logical operators. This rule checks if the operators belong to the same group only. In this case, this rule checks if bitwise operators and logical operators are mixed, but ignores all other operators.

Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a & b | c;

Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a || b > 0 || c + 1 === 0;
var foo = a && b > 0 && c + 1 === 0;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
var foo = (a & b) | c;
var foo = a & (b | c);
var foo = a + b * c;
var foo = a + (b * c);
var foo = (a + b) * c;

allowSamePrecedence

Examples of correct code for this rule with {"allowSamePrecedence": true} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/

// + and - have the same precedence.
var foo = a + b - c;

Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = a + b - c;

Examples of correct code for this rule with {"allowSamePrecedence": false} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = (a + b) - c;

When Not To Use It

If you don't want to be notified about mixed operators, then it's safe to disable this rule.

Related Rules

• [no-extra-parens](no-extra-parens.md) Source: http://eslint.org/docs/rules/

      { all.map((quad) => <Quadicon key={hObj(quad)} data={quad} />)}

Close

Require parens in arrow function arguments (arrow-parens)

Arrow functions can omit parentheses when they have exactly one parameter. In all other cases the parameter(s) must be wrapped in parentheses. This rule enforces the consistent use of parentheses in arrow functions.

Rule Details

This rule enforces parentheses around arrow function parameters regardless of arity. For example:

/*eslint-env es6*/

// Bad
a => {}

// Good
(a) => {}

Following this style will help you find arrow functions (=>) which may be mistakenly included in a condition when a comparison such as >= was the intent.

/*eslint-env es6*/

// Bad
if (a => 2) {
}

// Good
if (a >= 2) {
}

The rule can also be configured to discourage the use of parens when they are not required:

/*eslint-env es6*/

// Bad
(a) => {}

// Good
a => {}

Options

This rule has a string option and an object one.

String options are:

• "always" (default) requires parens around arguments in all cases.
• "as-needed" allows omitting parens when there is only one argument.

Object properties for variants of the "as-needed" option:

• "requireForBlockBody": true modifies the as-needed rule in order to require parens if the function body is in an instructions block (surrounded by braces).

always

Examples of incorrect code for this rule with the default "always" option:

/*eslint arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

a => {};
a => a;
a => {'\n'};
a.then(foo => {});
a.then(foo => a);
a(foo => { if (true) {} });

Examples of correct code for this rule with the default "always" option:

/*eslint arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

() => {};
(a) => {};
(a) => a;
(a) => {'\n'}
a.then((foo) => {});
a.then((foo) => { if (true) {} });

If Statements

One of benefits of this option is that it prevents the incorrect use of arrow functions in conditionals:

/*eslint-env es6*/

var a = 1;
var b = 2;
// ...
if (a => b) {
 console.log('bigger');
} else {
 console.log('smaller');
}
// outputs 'bigger', not smaller as expected

The contents of the if statement is an arrow function, not a comparison.

If the arrow function is intentional, it should be wrapped in parens to remove ambiguity.

/*eslint-env es6*/

var a = 1;
var b = 0;
// ...
if ((a) => b) {
 console.log('truthy value returned');
} else {
 console.log('falsey value returned');
}
// outputs 'truthy value returned'

The following is another example of this behavior:

/*eslint-env es6*/

var a = 1, b = 2, c = 3, d = 4;
var f = a => b ? c: d;
// f = ?

f is an arrow function which takes a as an argument and returns the result of b ? c: d.

This should be rewritten like so:

/*eslint-env es6*/

var a = 1, b = 2, c = 3, d = 4;
var f = (a) => b ? c: d;

as-needed

Examples of incorrect code for this rule with the "as-needed" option:

/*eslint arrow-parens: ["error", "as-needed"]*/
/*eslint-env es6*/

(a) => {};
(a) => a;
(a) => {'\n'};
a.then((foo) => {});
a.then((foo) => a);
a((foo) => { if (true) {} });

Examples of correct code for this rule with the "as-needed" option:

/*eslint arrow-parens: ["error", "as-needed"]*/
/*eslint-env es6*/

() => {};
a => {};
a => a;
a => {'\n'};
a.then(foo => {});
a.then(foo => { if (true) {} });
(a, b, c) => a;
(a = 10) => a;
([a, b]) => a;
({a, b}) => a;

requireForBlockBody

Examples of incorrect code for the { "requireForBlockBody": true } option:

/*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
/*eslint-env es6*/

(a) => a;
a => {};
a => {'\n'};
a.map((x) => x * x);
a.map(x => {
  return x * x;
});
a.then(foo => {});

Examples of correct code for the { "requireForBlockBody": true } option:

/*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
/*eslint-env es6*/

(a) => {};
(a) => {'\n'};
a => ({});
() => {};
a => a;
a.then((foo) => {});
a.then((foo) => { if (true) {} });
a((foo) => { if (true) {} });
(a, b, c) => a;
(a = 10) => a;
([a, b]) => a;
({a, b}) => a;

Further Reading

• The "as-needed", { "requireForBlockBody": true } rule is directly inspired by the Airbnb JS Style Guide. Source: http://eslint.org/docs/rules/

  return (h ^ h >>> 9) >>> 0;

Close

Disallow mixes of different operators (no-mixed-operators)

Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

Note: 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:

var foo = a && b || c || d;

will generate

1:13  Unexpected mix of '&&' and '||'. (no-mixed-operators)
1:18  Unexpected mix of '&&' and '||'. (no-mixed-operators)

Rule Details

This rule checks BinaryExpression and LogicalExpression.

This rule may conflict with [no-extra-parens](no-extra-parens.md) rule. 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.

Examples of incorrect code for this rule:

/*eslint no-mixed-operators: "error"*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a + b * c;

Examples of correct code for this rule:

/*eslint no-mixed-operators: "error"*/

var foo = a || b || c;
var foo = a && b && c;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 || c > 0 || d + 1 === 0);
var foo = a + (b * c);
var foo = (a + b) * c;

Options

{
    "no-mixed-operators": [
        "error",
        {
            "groups": [
                ["+", "-", "*", "/", "%", "**"],
                ["&", "|", "^", "~", "<<", ">>", ">>>"],
                ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                ["&&", "||"],
                ["in", "instanceof"]
            ],
            "allowSamePrecedence": true
        }
    ]
}

This rule has 2 options.

• 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.
• allowSamePrecedence (boolean) - specifies whether to allow mixed operators if they are of equal precedence. Default is true.

groups

The following operators can be used in groups option:

• Arithmetic Operators: "+", "-", "*", "/", "%", "**"
• Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"
• Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="
• Logical Operators: "&&", "||"
• Relational Operators: "in", "instanceof"

Now, consider the following group configuration: {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}. There are 2 groups specified in this configuration: bitwise operators and logical operators. This rule checks if the operators belong to the same group only. In this case, this rule checks if bitwise operators and logical operators are mixed, but ignores all other operators.

Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a & b | c;

Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a || b > 0 || c + 1 === 0;
var foo = a && b > 0 && c + 1 === 0;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
var foo = (a & b) | c;
var foo = a & (b | c);
var foo = a + b * c;
var foo = a + (b * c);
var foo = (a + b) * c;

allowSamePrecedence

Examples of correct code for this rule with {"allowSamePrecedence": true} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/

// + and - have the same precedence.
var foo = a + b - c;

Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = a + b - c;

Examples of correct code for this rule with {"allowSamePrecedence": false} option:

/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = (a + b) - c;

When Not To Use It

If you don't want to be notified about mixed operators, then it's safe to disable this rule.

Related Rules

• [no-extra-parens](no-extra-parens.md) Source: http://eslint.org/docs/rules/