Strict Equality (==) Loose Equality (===) in JavaScript

JavaScript has two operators for checking equality. One is == (equality operator or loose equality operator) and the other one is === (strict equality operator). Both of these operators check the value of operands for equality. But, the difference between == & === is that the == does a type conversion before checking for equality. Similarly, we have two, not equal operators != and !==

Checking Equality

Two values are equal if they are

1. Identical strings
2. Numerically equivalent numbers
3. Identical Boolean values
4. The same object (reference types)

Example:

let a=10
let b=10

console.log(a==b)  //true
console.log(a===b)  //true

Both == & === returns true in the above example, because the types of both operands are the same.

Difference between == & ===

If types are the same then there is no difference between == & ===

If types are different then

== does a type conversion. It will attempt to convert them to a string, number, or boolean. before doing the comparison.

=== returns false.

Equality Operator ==

Equality Operator does not check the type of operand. It tries to convert them to string, number, or Boolean.

In the following example, both the operands are numbers. Hence the equality operator returns true.

let a=10
let b=10

console.log(a==b)  //true

But, in the following code, the variable b is a string and not a number. The JavaScript makes the type conversion of b from string to a number and then does the comparison. Hence the result is true again.

let a=10
let b="10"

console.log(a==b)  //true

The following code also returns true.

let a="01"
let b=1

console.log(a==b);
 //true

Strict Equality Operator ===

The strict Equality operator returns false if the types are different.

For Example, the following code returns true because both value & type of variables are the same.

let a=10
let b=10

console.log(a===b)  //true

While the following example returns false because the variable b is of type string

let a=10
let b="10"

console.log(a===b)  //false

Notes on Equality check

NaN is not equal to anything including itself.

console.log(NaN==NaN);    //false

Negative zero equals positive zero.

console.log(-0==0);   //true

null equals both null and undefined.

console.log(null==null);
       //true
console.log(null==undefined);
    //true  
console.log(undefined==undefined); //true
console.log(Infinity==Infinity);   //true

!= and !== Not Equal

!= & !== operators check the un equality of two operands. They return true if the operands are not equal else false. != is similar to == & !== is similar to === in their comparisons. Like ==, != also, coerce the values before comparing the operands.

Example:

// != Operator

let x=10
let y=10

console.log(x!=y)  //false
console.log(x!==y)  //false


// !== Operator
let a=10
let b="10"

console.log(a!=b)   //false
console.log(a!==b)  //true

Equality check on Reference Types

The objects are considered equal only if are the same object.

In the example, a1 & b1 are different objects hence are not equal although they have the same values

let a1 = [10,20]
let b1 = [10,20]

console.log(a1==b1)     //false
console.log(a1===b1)    //false

let c1=a1
               //same object  
console.log(a1===c1)    //true    
console.log(a1==c1)     //true

== Vs ===. Which one to use ?

Always use === as it does not attempt to coerce the values.

== does a Type Coercion, the result of which is not predictable as shown in the following examples.

'' == '0'            // false
0 == ''              // true
0 == '0'             // true

false == 'false'     // false
false == '0'         // true

false == undefined   // false
false == null        // false
null  == undefined   // true

' \t\r\n ' == 0      // true