JavaScript Equality - Double Equals (==) vs Triple Equals (===)

Here is where most people do mistakes. So you better not to.
JavaScript Equality - Double Equals (==) vs Triple Equals (===)

Table of Contents

  1. Introduction
  2. About Comparison
  3. Double v/s Tripple Equal
  4. Releted Scenarios
  5. Some Example
  6. With null, undefined and NaN
  7. Conclusion

Introduction

One thing we often do as a programmer in any programming language is equality checking. Whether this value equals that value or not.

In JavaScript, there are two equality checking operators: double equals (==) and triple equals (===). And they often lead programmers to be confused while using them.

Well, they are not too complicated to understand.

In this article, we’ll go over some differences and use cases such as where and how to use the two types of operators efficiently. And guess what? They are also funny to learn about.

About Comparison

But hold on. Before deep diving, I want you to take the below points into consideration.

  • All the comparison operators return Boolean values after execution. Either true or false.
  • And as we all know in programming, there are only two values 1 and 0. So if we go even further, true become 1 and false become 0.

Okay then, keeping that in mind, let’s get into this.

In JavaScript, the comparison happens in two ways.

  • Comparison with type
  • Comparison with values

So, what’s the difference between == and ===?

The double equals first converts the type of the operand and then compares them with values. While the triple equals compares the values without changing the type of the operand.

So, that’s it ? 😒

Hell no. There is more to come.

But wait, if you don’t know about type conversion in JavaScript, do check out the article below 👇. It would make much more sense then.

Type Conversion in JavaScript - The Magic

Now, let’s look up some scenarios

To check whether a value is true or false, we can use the Boolean object constructor. Here’s how 👇

    
    console.log(Boolean('hey'))  //true
    //-- any valid string is true
    
    console.log(Boolean(0))       //false
    //-- as I said earlier 1 is true and 0 is false
    
    console.log(Boolean('0'))     //true
    //-- why 0 is true here ? Thanks to quotation, which makes it a String
    
    console.log(Boolean(' '))      //false
    //-- the quotation has no character: not a valid string; false
    
    console.log(Boolean([ ]))     //true
    //-- empty array
    

More examples

    
    console.log(false == 0)  //true
    console.log(0 == '')    //true
    console.log('' == false)  //true
    

Double equal converts false and ‘ ‘ into 0, that’s why they are equal to 0.

But! This not gonna happen in the case of triple equal. Why? Because === does not convert the type of the operand.

    
    console.log(false === 0)  //false
    //-- false is Boolean while 0 is Number, so they not equal for ===
    
    console.log(0 === '')  //false
    //-- 0 is Number while '' is string
    
    console.log('' === false)  //false
    //-- '' is String while false is Boolean
    

Data type is one of the most crucial topics in any programming language. I have also written an article on data types in JavaScript.

You can check it out here. 👇

Data Types in JavaScript — The Weird Parts

With null, undefined and NaN

With that being said, let’s move on. In JavaScript, we have: null, undefined, and NaN

  • null is a type of object, which mean noting; blank
  • undefined is a data type itself
  • NaN is type of Number, which mean not a number
    
    console.log(typeof null) // object

    console.log(typeof undefined ) // undefined

    console.log(typeof NaN) // Number
    

So first, let’s compare null and undefined with == v/s ===;

    
    console.log(null == undefined) // true
    //-- double equal convert null into 0 and undefined as well
    
    console.log(null === undefined) // false
    //-- for triple equal null is an object while undefined is undefined
    

null and undefined are only equal to each other and themselves while comparing with Double Equal ( == ). If you compare them with any other value you’ll get nothing but a false.

    
    console.log(null == null) //true
    console.log(null == ' ') //false
    console.log(null == false) //false
    console.log(null == 000) //false
    console.log(null == 123) //false
    console.log(null == []) //false
    
    console.log(undefined  == undefined ) //true
    console.log(undefined == ' ') //false
    console.log(undefined == false) //false
    console.log(undefined == 0) //false
    console.log(undefined == 1) //false
    console.log(undefined == []) //false
    

Now is the time for NaN

NaN is an insane player in the JavaScript world. Why? Because it is never equal to any value — and guess what? It is not even equal to itself.

Are you kidding me ? No buddy, have a look 👇

    
    console.log(NaN == null) //false
    console.log(NaN == 0) //false
    console.log(NaN == 135) //false
    console.log(NaN == 'NaN') //false
    console.log(NaN == 'hellow') //false
    console.log(NaN == 0) //false
    console.log(NaN == undefined) //false
    console.log(NaN == NaN) //false
    

Conclusion

So as you saw, one can easily get confused while choosing whether to use the == or ===.

Let me clarify this. Whenever you need to compare two values, always go with ===, because it gives expected results.

But do play around with both == and ===, because programming is fun, right?

References

Thanks for sticking around. Keep Learning.