== vs === in JavaScript

Overview

In javascript, the equality operator is used to determine whether two values are equal. The main difference between the "==" and "===" operators in javascript is that the "==" operator does the type conversion of the operands before the comparison, whereas the "===" operator compares the values and their data types.

Scope

In this blog, we will learn about the "==" and "===" operators in JavaScript and will try to understand both of them with examples.

Introduction

In our day-to-day life, we all face multiple situations where we need to compare two things. For example, we all use Twitter and Discord. When we visit the app, we see a login page asking for a username and password, where we need to add our details. Once we submit the details, the website goes through its database and compares our provided details with the details available. It permits you to log in if the details match; otherwise, it doesn't. This is one of many cases where two items are compared, and the outcome is used to determine the next course of action.

In JavaScript when we need to compare two values and decide whether values are equal or not we use the following operator

• Loose equality("==")

• Strict equality("===")

Note - Equality operators return a boolean value.

Which operations we choose depends on what sort of comparison we are looking to perform.

Double Equal (==) vs Triple Equal (===)

What is "==" operator ?

The "==" is also known as the loose equality operator. The main purpose is to check whether its two operands are equal after type conversion. It returns true if both the operands are of the same value or if both of them are of different types then either of them will be converted to the data type of the other operand and have the same value. It will return false if both operands have different values.

Note: The "==" operator does a type conversion of elements before comparing them.

Okay, let's first understand, what is type conversion ?

When comparing two operands, the "==" operator tends to transform either of them into the other operand's type if they are not of the same data type before performing a loose comparison of their values.

Type conversion is the main difference between the "==" and "===" operators in JavaScript.

Let's understand it with an example:

const x=21;
const y='21';
console.log(x==y); //true

In the above example, x is a number and y is a string. The "==" operator first converts the y value to a number type and then it is compared to x. Since both the values are the same it returns true.

What is the "===" operator?

The "===" is also known as the strict equality operator. It compares both the values of the operands without performing type conversion. If the values have different data types, the values are considered unequal. If the values are of the same data type and have the same value then they are considered equal.

Let's understand it with an example:

const x = 2;
const y = 2;
const z = '2';
console.log(x===y); //true
console.log(x===z); //false

In the above example, x and y are numbers but z is a string value. So, after a comparison of x and y, it is returning true but as z is a string it is returning false.

Few Examples of both operators:

Example 1: Comparing a number with a string

const x= 5;
const y ='5';
console.log(x==y); // true
console.log(x===y); // false

Example 2: Comparing objects

const name1 = { name: "Raj" }
const name2 = { name: "Raj" }
console.log(name1==name1); // true
console.log(name1=name2); // false
console.log(name1===name1); // true
console.log(name1===name2); // false

In the above example, the first output returns true because name1 and name1 refer to the same instance whereas the name1 and name2 return false because it refers to different instances. Never compare the objects with the "==" operator as different objects with the same value are not equal.

Example 3: comparing boolean and number

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

In the above example, the first operand is of boolean type and the second one is of number type. The "==" operator does the type conversion of a number into a boolean (as 1 is considered true and 0 is considered false in boolean).

Example 4: Comparing null and undefined

const x = null;
const y ;
console.log(x==y); // true

In the above example, it returns true because the comparison of null and undefined is true.

Example 5: When operand values are NaN(not a number).

const x= NaN;
const y= NaN;
console.log(x==y); // false
console.log(x===y); // false

In the above example, after comparing both two NaN values it returns false because the equality operator treats NaN as unequal to every other value including itself.

To gain confidence in this topic practice all the above examples.

Conclusion

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

• The "==" is the loose operator and the "===" is the Strict operator.

• The "==" does the type conversion before checking and the "===" does not do the type conversion before checking.

It's generally considered a best practice to use the strict equality operator "===" when making comparisons in JavaScript, as it avoids unexpected behavior that could be introduced by type conversion.