When to Use == and When Not, and the Other Judgement Calls

Amara sends Kenji a pull request, a change to the shop's code proposed for review. On the line if (discount == null), Kenji writes one comment: "never use ==". Amara's line was right, and Kenji's rule is still a good one. Both can be true, because a good default is not a law. This lesson draws the chart behind the rule, then makes five judgement calls, one program each.

Three ways to ask "equal?"

JavaScript has three equality checks. ===, strict equality, is true when both sides have the same type and the same value, with no conversion. ==, loose equality, converts first when the types differ, by the rules lessons 01 and 02 showed. Object.is(a, b), added in ES2015, works like === with two exceptions. Here are all three on the twelve pairs this module keeps coming back to.

You can run four of those rows yourself. row is a one-line arrow function that prints the three answers for one pair.

const out = [];
const row = (label, x, y) => out.push(label + ": " + (x == y) + " " + (x === y) + " " + Object.is(x, y));

row("1 and \"1\"", 1, "1");
row("null and undefined", null, undefined);
row("NaN and NaN", NaN, NaN);
row("0 and -0", 0, -0);

console.log(out.join("\n"));

1 and "1": true false false
null and undefined: true false false
NaN and NaN: false false true
0 and -0: true true false

Reading the chart

Start with the first two result columns. == and === disagree in six rows, and in every one of them the two types differ, so == converted. When the types match, the standard defines == to do exactly what === does.

Now rows 2, 3 and 4. 0 == "" is true and 0 == "0" is true, yet "" == "0" is false. Both sides of row 4 are strings, so nothing converts, and two different texts are not equal. So == is not transitive: a equal to b and b equal to c does not make a equal to c. That is the real reason to avoid it, not speed and not style.

Rows 5, 6 and 7 hold the exception. Under ==, null and undefined equal each other and nothing else, not even 0. Rows 8 and 9 are the only places where Object.is and === part. So === never surprises you, while == surprises you in exactly the rows you did not memorise.

value == null
Object.is(a, b)

x == null, the one == worth writing

A value can be missing in two ways. undefined means nobody set it, like a property an object never had. null means somebody cleared it on purpose. Code that reads a setting usually wants to treat both as "missing", and nothing else.

const out = [];
const row = (label, value) => out.push(label + ": == null " + (value == null) + ", === null " + (value === null) + ", !value " + !value);

row("null", null);
row("undefined", undefined);
row("0", 0);
row("empty string", "");
row("false", false);
row("NaN", NaN);

console.log(out.join("\n"));

null: == null true, === null true, !value true
undefined: == null true, === null false, !value true
0: == null false, === null false, !value true
empty string: == null false, === null false, !value true
false: == null false, === null false, !value true
NaN: == null false, === null false, !value true

Most teams let a linter decide, and that is fine

A linter is a program that reads your code and flags risky patterns; Module 1 named ESLint, a linter for JavaScript. Its rule eqeqeq flags every == and !=. The option { "null": "ignore" } lets == null through, and the option "smart" allows it too. Airbnb's style guide ships exactly this setting:

module.exports = [
  {
    rules: {
      eqeqeq: ["error", "always", { null: "ignore" }],
    },
  },
];

That is an ESLint configuration file, eslint.config.js. It prints nothing, so it has no output. jQuery's style guide says the same in words: === always, and the only exception is checking for null and undefined by way of null.

Letting a rule decide is fine, and it is better than a review comment. Nobody has to remember the chart, and reviews can argue about design instead of operators. Configured like Airbnb's, the linter would have passed Amara's line and saved Kenji his comment.

Number for the whole string, parseInt for a prefix

Lesson 03 showed the two readers: Number() wants the whole text, parseInt reads the front. The choice depends on what the text is supposed to be. The flowchart puts every converter of this module on one page.

const out = [];
const both = (label, text) => out.push(label + " " + text + ": Number " + Number(text) + ", parseInt " + parseInt(text, 10));

both("quantity", "12");
both("quantity", "2O");
both("quantity", "");
both("width", "250px");
both("version", "22.16.0");

console.log(out.join("\n"));

quantity 12: Number 12, parseInt 12
quantity 2O: Number NaN, parseInt 2
quantity : Number 0, parseInt NaN
width 250px: Number NaN, parseInt 250
version 22.16.0: Number NaN, parseInt 22

?? when 0 and empty text are real answers

Lesson 02 showed that || falls back on any falsy value, while ?? falls back only on null and undefined. The judgement call is about the data. Is 0 a real answer here, and is ""?

const out = [];
const saved = { volume: 0, separator: "", theme: undefined };

out.push("volume with ||: " + (saved.volume || 50));
out.push("volume with ??: " + (saved.volume ?? 50));
out.push("separator with ||: [" + (saved.separator || ", ") + "]");
out.push("separator with ??: [" + (saved.separator ?? ", ") + "]");
out.push("theme with ??: " + (saved.theme ?? "light"));

console.log(out.join("\n"));

volume with ||: 50
volume with ??: 0
separator with ||: [, ]
separator with ??: []
theme with ??: light

toFixed for display, never for arithmetic

Lesson 03 said: arithmetic first, text last. Here is the bill where the order alone is not enough. 15 percent of 48.50 is 7.275, and the total is 55.775. Both end in 5, and toFixed rounds the stored binary value, which sits a hair above or below.

const out = [];
const bill = 48.5;
const percent = 15;

const tip = bill * percent / 100;
out.push("in decimals: tip " + tip.toFixed(2) + ", total " + (bill + tip).toFixed(2));

const billCents = Math.round(bill * 100);
const tipCents = Math.round(billCents * percent / 100);
const totalCents = billCents + tipCents;
out.push("in cents:    tip " + (tipCents / 100).toFixed(2) + ", total " + (totalCents / 100).toFixed(2));

console.log(out.join("\n"));

in decimals: tip 7.28, total 55.77
in cents:    tip 7.28, total 55.78

Object.is for NaN and -0

=== gets two cases wrong on purpose, as the standard defines it. NaN === NaN is false, Zara's test from lesson 01. 0 === -0 is true, although -0 is a real value that can show up on a screen.

const out = [];
const reading = Number("n/a");

out.push("reading === NaN: " + (reading === NaN));
out.push("Number.isNaN(reading): " + Number.isNaN(reading));
out.push("Object.is(reading, NaN): " + Object.is(reading, NaN));

const rounded = Math.round(-0.4);
out.push("rounded: " + rounded);
out.push("rounded === 0: " + (rounded === 0));
out.push("Object.is(rounded, -0): " + Object.is(rounded, -0));
out.push("(-0.4).toFixed(0): " + (-0.4).toFixed(0));

console.log(out.join("\n"));

reading === NaN: false
Number.isNaN(reading): true
Object.is(reading, NaN): true
rounded: 0
rounded === 0: true
Object.is(rounded, -0): true
(-0.4).toFixed(0): -0

const order = { price: 200 };
const discount = order.discount;
const final = discount === null ? order.price : order.price * (1 - discount);
console.log("final: " + final);

final: NaN

const score = Number("ten");
console.log(score === NaN ? "bad input" : "score " + score);

score NaN

const quantity = 0;
console.log(!quantity ? "missing" : "quantity " + quantity);

missing

console.log("abc" < "abd");
console.log("Z" < "a");

const out = [];
const row = (label, x, y) => out.push(label + ": " + (x == y) + " " + (x === y) + " " + Object.is(x, y));

row("1 and \"1\"", 1, "1");
// add rows 2 to 12 of the chart here, in the chart's order

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Next, lesson 05 opens the engine and walks the algorithm behind every == row of the chart, one step at a time.