Some words about == and ===


Photo by Irvan Smith on Unsplash

When developers starting to write the code on JavaScript I’ve noticed, that they are using “==” (I’ll call it equal), but not “===” (I’ll call it identity) most of the time. Probably, you will not see any difference most of the time, but one day you’ll get a very interesting error and probably you’ll spend a lot of time, trying to resolve it.

Let’s take a look at the details:

var a = { a: 1 },
b = { a: 1 };
console.log(a == b); //false
console.log(a === b); //false
view raw reference-types.js hosted with ❤ by GitHub

If you copy/paste this code in section of your HTML file or just type it in browser’s console – you should see 2 “false” values. In this case there is no difference between equal and identity signs. In JavaScript all objects are comparing by reference, so in this case this objects are not equal, because it’s two different objects.

But let’s take a look at primitive types:

var a = "",
b = 0,
c = "0";
console.log(a == b); //true
console.log(b == c); //true
console.log(a == c); //false
view raw primitive-types.js hosted with ❤ by GitHub

The interesting thing about this code, is that JavaScript equals sign is trying to perform some casting before comparing variables of different types. The rule is pretty simple:

  1. If either operand is number – convert everything to numbers and perform strict comparison (identity operator);
  2. If either operand is string – convert everything to strings and perform strict comparison (identity operator);
  3. If both operands are objects – perform reference comparison.

So, let’s take a close look at the “strange” behavior from the code sample:

  • console.log(a == b). In this line “b” is a number, JavaScript converting empty string to number, which is… 0. 0 === 0 – everything is fine;
  • console.log(b == c). In this line “b” is a number, JavaScript converting “0” string to number, which is 0, because JavaScript parsed this string for us. 0 === 0 – everything is fine;
  • console.log(a == c). In this line “a” and “c” both are strings, no conversion required, but this strings are not equal, so result is false.

So, when you are using equals instead of identity – you are creating a bomb and some day it will definitely explode. Please, take a look at the interesting table, published on gitHub:JavaScript equality table.

Let’s replace equals with identity:

var a = "",
b = 0,
c = "0";
console.log(a === b); //false
console.log(a === c); //false
console.log(b === c); //false

I hope – everything is clear now: no any conversion, code clean and easy to read. One more word about equal sign:

console.log(null == undefined); //true
console.log(null == null); //true
console.log(null === undefined); //false
console.log(null === null); //true

Probably someone will say: “why should I write”:

if (myValue !== undefined && myValue !== null) {
//some code, that working with "myValue "
}
view raw null-check.js hosted with ❤ by GitHub

But is it a real problem to write a dozen of characters to make your code readable? Sometimes you cannot write just:

if (myValue) {
// Code here…
}

because myValue can be 0 or empty string and it will cause unexpected behavior.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s