Know the difference between === vs == operators in JavaScript

As you know that in JavaScript there are Comparison operators to compare the value of two objects to check whether the value is equal or unequal. In this blog, we are going to understand equality operators.

Equality Operator

The equality operator in javascript is used to compare if two values are equal. The comparison is made by == and === operators in javascript.

Now, our main concern is getting to know the difference between the ‘==’ and ‘===’ operators that the javascript provides, though they look similar, they are very different.

The main difference between the '==' and '===' operators in javascript is that the '==' operator does the type conversion of the operands before comparison, whereas the '===' the operator compares the values as well as the data types of the operands.

What is the == operator?

In Javascript, the ‘==’ operator is also known as the loose equality operator which is mainly used to compare two values on both sides and then return true or false. This operator checks equality only after converting both values to a common type.

The \== operator returns true if both operands are of the same data type and have the same value or if both are of different data types, but either of them can be converted to the data type of the other operand and have the same value. If both operands have different values, then it returns false.

Example :

const val1 = 10;
const val2 ="10";
console.log(val1 == val2);
// return true

In the above example, the val2 value is converted to a string type and then compared with val1 since both val1 and val2 have the same value so it returns true.

If both are of number data type, then the == the operator will return true if both hold the same value; otherwise, false.

Example:

const val1 = 10;
const val2 = 15;
const val3 =NaN;
console.log(val1 == val2);
//return False
console.log( val1 == val3)
//return False
let a = null;
let b;

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

In the above example, val1 and val2 have the same data type but the value is not the same so the operator returns false. If a number is compared with NaN, it will still return false for the == operator. if we compare null and undefined, It outputs true as for the == operator, the comparison of null and undefined is true.

If both operands are of the string type, then the == operator will return true only if each element of the first operand matches with each element of the second operand.

 let str1 = 'Javascript';
    let str2 = 'Javascript';
    let str3 = 'JavaScript';

    console.log(str1 == str2);
    //output: true

    console.log(str1 == str3);
    //output: false

In the above example, the first output is true as str1 and str2 are exactly the same, but the second output is false as str1 and str3 aren't exactly the same.

Thus we can conclude that the comparison is case-sensitive as well.

if we compare the object with == another object.

const car1 = {
    name: "BMW"
}

const car2 = {
    name: "BMW"
}

console.log(car1 == car1);
//output: true

console.log(car1 == car2);
//output: false

In the last example, the first output is true because car1 and car1 refer to the same instance whereas the second output is false as car1 and car2 refer to different instances.

This only works if it's the same object. Different objects with the same value are not equal. Thus the == the operator returns false when we compare two different objects with the same value.

Note: Never compare the objects with == operators.

Following are the highlights of the behavior of == when the type of operands is not the same:

• If we are comparing a string and a number, then the string is converted into a number before the comparison.

• If we are comparing a boolean and a number (0 or 1), then it treats 0 as false and 1 as true.

• If we are comparing two objects, then the operator will check if both refer to the same object. If yes, then the == operator will return true otherwise == will return false.

• In case we are comparing null and undefined, then the == the operator will return true.

What is the === operator in JavaScript?

The === the operator is called the strict equality operator. The === operators follow the Strictly equality comparison algorithm, i.e., it doesn't do the type conversion of the operands before comparing their values and returns false even if the data type of the operands aren't the same.

Example: Let’s see some code where the ‘===’ operator will return true.

let a = 20;
let b = '20';
let c = 20;

console.log(a===b);
//output: false;

console.log(a===c);
//output: true;

Here the first output is false as a is a number type whereas b is a string type, the second output is true as both a and c have the same data type and value.

Following are some of the highlights of the Strict equality comparison algorithm:

• If the operands that we are comparing are of different data types, then it returns false.

• If any one of the two operands that we are comparing is NaN, then it will return false.

• If the operands that we are comparing are null or undefined, then it will return true.

• If the operands that we are comparing are objects, then it will return true if both refer to the same object, else it will return false.

Comparison and Difference Between == and === in Javascript

Uses of == and === Operands in JavaScript

The == and === operands are used to compare if two values are equal.

The == operand loosely compares two values, thus it can be used in cases where the data type of the operand isn't important.

The === operand strictly compares two values, thus it is used in the places where the data type of the operand is important.

Conclusion

• The == and === operators are used to checking the equality of two operands.

• == is the loose equality operators, i.e., they perform type conversion on the operands before comparing.

• === is a strict equality operator, i.e., they compare the operands without any type conversion and return false even if the data types aren't the same.

• == operators are used in situations where the data type of the operands isn't a major factor in comparison, and it could be twisted to allow a comparison of two operands.

• === is the operator used in situations where the data type of operands is important for the comparison, and it could not be altered to make the comparison happen.