Comparison Operators & Equality

  • 15.1 Use === and !== over == and !=. eslint: eqeqeq

  • 15.2 Conditional statements such as the if statement evaluate their expression using coercion with the ToBoolean abstract method and always follow these simple rules:

    • Objects evaluate to true
    • Undefined evaluates to false
    • Null evaluates to false
    • Booleans evaluate to the value of the boolean
    • Numbers evaluate to false if +0, -0, or NaN, otherwise true
    • Strings evaluate to false if an empty string '', otherwise true
    1. if ([0] && []) {
    2.   // true
    3.   // an array (even an empty one) is an object, objects will evaluate to true
    4. }

  • 15.3 Use shortcuts for booleans, but explicit comparisons for strings and numbers.

    1. // bad
    2. if (isValid === true) {
    3.   // ...
    4. }
    6. // good
    7. if (isValid) {
    8.   // ...
    9. }
    11. // bad
    12. if (name) {
    13.   // ...
    14. }
    16. // good
    17. if (name !== '') {
    18.   // ...
    19. }
    21. // bad
    22. if (collection.length) {
    23.   // ...
    24. }
    26. // good
    27. if (collection.length > 0) {
    28.   // ...
    29. }

  • 15.4 For more information see Truth Equality and JavaScript by Angus Croll.

  • 15.5 Use braces to create blocks in case and default clauses that contain lexical declarations (e.g. let, const, function, and class). eslint: no-case-declarations

    Why? Lexical declarations are visible in the entire switch block but only get initialized when assigned, which only happens when its case is reached. This causes problems when multiple case clauses attempt to define the same thing.

    1. // bad
    2. switch (foo) {
    3.   case 1:
    4.     let x = 1;
    5.     break;
    6.   case 2:
    7.     const y = 2;
    8.     break;
    9.   case 3:
    10.     function f() {
    11.       // ...
    12.     }
    13.     break;
    14.   default:
    15.     class C {}
    16. }
    18. // good
    19. switch (foo) {
    20.   case 1: {
    21.     let x = 1;
    22.     break;
    23.   }
    24.   case 2: {
    25.     const y = 2;
    26.     break;
    27.   }
    28.   case 3: {
    29.     function f() {
    30.       // ...
    31.     }
    32.     break;
    33.   }
    34.   case 4:
    35.     bar();
    36.     break;
    37.   default: {
    38.     class C {}
    39.   }
    40. }

  • 15.6 Ternaries should not be nested and generally be single line expressions. eslint: no-nested-ternary

    1. // bad
    2. const foo = maybe1 > maybe2
    3.   ? "bar"
    4.   : value1 > value2 ? "baz" : null;
    6. // split into 2 separated ternary expressions
    7. const maybeNull = value1 > value2 ? 'baz' : null;
    9. // better
    10. const foo = maybe1 > maybe2
    11.   ? 'bar'
    12.   : maybeNull;
    14. // best
    15. const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

  • 15.7 Avoid unneeded ternary statements. eslint: no-unneeded-ternary

    1. // bad
    2. const foo = a ? a : b;
    3. const bar = c ? true : false;
    4. const baz = c ? false : true;
    6. // good
    7. const foo = a || b;
    8. const bar = !!c;
    9. const baz = !c;

  • 15.8 When mixing operators, enclose them in parentheses. The only exception is the standard arithmetic operators (+, -, *, & /) since their precedence is broadly understood. eslint: no-mixed-operators

    Why? This improves readability and clarifies the developer’s intention.

    1. // bad
    2. const foo = a && b < 0 || c > 0 || d + 1 === 0;
    4. // bad
    5. const bar = a ** b - 5 % d;
    7. // bad
    8. // one may be confused into thinking (a || b) && c
    9. if (a || b && c) {
    10.   return d;
    11. }
    13. // good
    14. const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
    16. // good
    17. const bar = (a ** b) - (5 % d);
    19. // good
    20. if (a || (b && c)) {
    21.   return d;
    22. }
    24. // good
    25. const bar = a + b / c * d;