Understanding why we use `===` in JavaScript

Often in JavaScript you’ll see a developer use `===` in their conditionals instead of `==`.

Most languages will use single equals for assignment and double equals for comparison, JavaScript is no exception here. This third variation of triple equals is included in JavaScript and sees to cause the most confusion for developers and it turns for a very good reason. Triple equals is most often included in loosely typed languages such as JavaScript and PHP. A language like Ruby also has triple equals but it is used in a different way.

First we need to get a bit of an understanding of types and how they work within JavaScript. JavaScript provides all the familiar types you’re probably used to: Numbers (Integers / Floats), Strings and Objects. What can change with JavaScript is how these types are handled in different settings. JavaScript is a loosely typed language. Often developers won’t assign a type to a variable and will just use `var` or in newer JavaScript/ECMAScript versions `const` and `let` without providing a type, opting instead to let the browser handle it. This is perfectly fine for most work and will rarely cause problems for the intermediate developer.

What can cause problems is that when you use your variable at a later point JavaScript will attempt to coerce your variable to the best type for the task so your integer before might now become a string and this is where loose equality and strict equality come into play.

Loose equality `==` will compare two values AFTER converting both of them to a matching type. JavaScript will even go as far as changing a variable’s type multiple times before finding a similar type between both variables. This means that your integer 1 has now become the string “1”.

This can cause problems with things like integers, strings or objects representing booleans or null and undefined variables being equal to strings and integers.

MDN sourced code demonstrating Loose Equality:

var num = 0;
var obj = new String('0');
var str = '0';

console.log(num == num); // true
console.log(obj == obj); // true
console.log(str == str); // true
console.log(num == obj); // true
console.log(num == str); // true
console.log(obj == str); // true
console.log(null == undefined); // true

// both false, except in rare cases
console.log(obj == null);
console.log(obj == undefined);

Strict equality `===` is, by it’s name, much stricter with how it handles variables and types. Strict equality testing won’t let your variables change types before running the comparison. This means that `null !== undefined` and that `0 !== “0”`. This is normally a good thing where you want to prevent JavaScript manipulating your variables into something that you’re not quite sure of.

MDN sourced code demonstrating Strict Equality:

var num = 0;
var obj = new String('0')
var str = '0';

console.log(num === num); // true
console.log(obj === obj); // true
console.log(str === str); // true

console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false

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

Having an explicit conditional statement is often far better than being vague.

Mozilla Developer Network (MDN) has a great write-up on the differences between Strict Equality and Loose Equality. I recommend you go and read it and support them however you can!