Loose equality operator and strict equality operator

Introduction

Before understanding == and ===, let's take a look at how the conversion from one data type to other works behind the hoods!

Type Conversion

Type conversion: As the name suggests, it is the process of converting one type into another.

Values in JavaScript can be of String, Number, Boolean, null- you name it! There is an option to convert values from one data type to another. And, this is where type conversion comes into the picture.

Type conversion can either be implicit (automatically done during code execution) or explicit (done by the developer).

Implicit Type Conversion is also known (and more commonly referred to) as Coercion while Explicit Type Conversion is also known as Type Casting.

Type casting

When we explicitly convert a value from one data type to another, it is known as type casting. To explicitly convert types, we use the type Constructors. For example, to convert a number to a string:

const a=10;
const b=String(a);
console.log(typeof(a)); //number
console.log(typeof(b)); //string

Type coercion

const a=10;
const b="Hello";
console.log(b+a); //Hello10

The first thing that rings in our mind is- "Hey, shouldn't this throw an error?" However, JavaScript works differently. Instead of throwing an error, it coerces the type of one value to fit the type of the other value so that the operation can be carried out.

In this case, using the + sign with a number and a string, the number is coerced to a string, and then the + sign is used for a concatenation operation.

One very common operator that causes coercion is the loose equality operator (\==, or double equals). Let's understand it further.

Double Equality operator or ==

The double equality operator or \== is called the loose equality operator. It does a loose check which means it checks if values are equal. The types are not a focus for this operator – only the values are the major factor. If the types are different, then it performs type coercion first.

When we use ==, the first step is Type Coercion and then compare the values.

20=="20" //true

Here, the numeric string is converted to the Number type and then the value is checked, and they are both equal.

1==true; //true

The boolean true is converted to the Number and then the value is checked.

NOTE: When using double equality, data types are converted to Number implicitly for primitive types if both the datat types are different.

Few Exceptions

In Type coercion, there are two special rules -

As we have seen the equality operator(==) above, we noticed that it converts both the operands to the common data type and then performs the equality comparison, but in the case of null and undefined, numeric conversion does not happen at all, which means that these values are not converted before the equality comparison. Hence, if one of the operands is null or undefined, the other must also be null or undefined to return true, otherwise, it returns false

null==undefined //true

null==0 //false
//Even though Number(null) returns 0, it would still evaluate to false

The NaN in JavaScript never returns true when compared with other values using the equality operator. Surprisingly, it does not return true even when compared with itself. Refer to the examples given below-

"hey" === NaN //false
NaN == NaN //false

Triple Equality Operator or ===

The triple equality operator or \== is called the strict equality operator. It strictly checks the values compared, as well as the types. The best part is- No Type Coercion takes place here!

1==="1" //false
1===1 //true
1===true //false

Closing Thoughts

Type coercion is a distinguishing factor for == and ===. I would recommend always using strict equality or === over loose equality in our code to make it bug-free!