Dhananjay Kumar

There are astronomical articles and blog posts have been written on == and === operators in JavaScript but I had tough time understanding it. So I decided to write my learning in this blog post. I will try to explain == and === in simplest words.

To start with try to understand difference between these two in below image,

=== is known as identical operator and it checks whether two operands are identical or not whereas == is known as equality operator and it checks whether two operands are equal or not. Now let us try to understand difference between identical and equal in context of JavaScript.

Identical operator or === will first evaluates the operands and perform operation on evaluated value.

Null and undefined are equal not identical

In JavaScript null and undefined are equal not identical. In below code I am comparing null and undefined using == and === operator.

if (null === undefined) {
 console.log("null and undefined is identical ");
}
else {
 console.log("null and undefined is not identical");
}

if (null == undefined) {
 console.log("null and undefined is equal ");
}
else {
 console.log("null and undefined is not equal");
}

You will notice as output that === operator will return false whereas == operator will return true while comparing null and undefined.

Two values of different types are neither identical nor equal

In JavaScript two values of different types are neither equal == nor identical ===

var foo1 = "India";
var foo2 = 12345;
if (foo1 === foo2) {
 console.log("foo1 and foo2 is identical ");
}
else {
 console.log("foo1 and foo2 is not identical");
}

if (foo1 == foo2) {
 console.log("foo1 and foo2 is equal ");
}
else {
 console.log("foo1 and foo2 is not equal");
}

 

You will notice as output both == and === are returning false. One interesting fact about == is that first it tries to convert string to integer and then it does comparison. So if consider below example, foo1 is string with value 1 and foo2 is number with value 1.

var foo1 = "1";
var foo2 = 1;
if (foo1 === foo2) {
 console.log("foo1 and foo2 is identical ");
}
else {
 console.log("foo1 and foo2 is not identical");
}

if (foo1 == foo2) {
 console.log("foo1 and foo2 is equal ");
}
else {
 console.log("foo1 and foo2 is not equal");
}

 

== operator will return true on comparing foo1 and foo2 because it first type converts operands and then do the comparison.

If any value or both are NaN

If either value is NaN or both are NaN then neither they are identical nor equal. Consider below example,

var foo1 = NaN;
var foo2 = NaN;
if (foo1 === foo2) {
 console.log("foo1 and foo2 is identical ");
}
else {
 console.log("foo1 and foo2 is not identical");
}

if (foo1 == foo2) {
 console.log("foo1 and foo2 is equal ");
}
else {
 console.log("foo1 and foo2 is not equal");
}

== And === both operators will return false. Because NaN is neither equal nor identical to any other value including itself.

Boolean true and false are equal and identical to each other

If operand values are getting evaluated to Boolean true or false then they are identical and equal to each other.

var foo1 = true;
var foo2 = true;
if (foo1 === foo2) {
 console.log("foo1 and foo2 is identical ");
}
else {
 console.log("foo1 and foo2 is not identical");
}

if (foo1 == foo2) {
 console.log("foo1 and foo2 is equal ");
}
else {
 console.log("foo1 and foo2 is not equal");
}

== And === operators will return true since values of foo1 and foo2 are true. So Boolean true is identical and equal to Boolean true and Boolean false is equal and identical to Boolean false.

Two strings with same values are identical and equal. Two strings with different content and length are neither equal nor identical.

Two operands represent value of same object then they are equal and identical. If they represent different object then they are not identical but they could be equal. So in other words for operands of different object type === operator will always return false whereas == may return true.

Let us try to understand equality operator == and strict equality operator or identical operator as below,

We have seen in above examples that

• Null and undefined are not identical but equal and == returns true on comparison
• If one operand is number and other is string then string gets converted to number and then == compare them.
• If one operand is object and other is primitive value like string or number then == first converts object in primitive values using toString or valueOf and then do comparison

I hope in this post you got some ideas about working with == and === operators in JavaScript. Thanks for reading.