Vanilla JavaScript == vs ===

The difference between two or three = signs in JavaScript can be complicated and vague to understand at first.
I found myself in a spot where I would always use the triple === set up to be safe.
But let's try and find out the real difference today.

JavaScript == vs ====

Let's first try and understand the basic difference on paper.
The two are comparison operators, meaning they will compare between two sides; these can be variables or values.

JavaScript == Comparison

The == operator is used for equal to comparison and is the most basic of the two.

Some options are:

x = 3;
console.log(x == 10); // false
console.log(x == 3); // true
console.log(x == '3'); // true

As you can see we define a number, but even the string is valid.

JavaScript === Comparison

The === comparison is the same, but stricter it needs an equal value and equal type.

So doing the same we will get the following results:

x = 3;
console.log(x === 10); // false
console.log(x === 3); // true
console.log(x === '3'); // false

Hopefully this made the initial difference clear between the two, let me know if you want to see more of this in a future article.

See it in action on this Codepen.

See the Pen Vanilla JavaScript == vs === by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Aivan Monceller]

== triggers implicit type coercion while === does not

[Chris Bongers]

You are absolutely right there!