This question is the 3rd question of the front-end interview questions series. And It is an important question and often come up in front-end interviews.

Let’s discuss this 👇

Introduction

In JavaScript, there are two methods for comparing data or data types: the == operator, known as loose equality, and the === operator, referred to as strict equality. Both operators evaluate the provided data and return a true or false value based on whether the data is same.

== (Loose Equality) 👇

In JavaScript when we use == double equal operator to compare a piece of data, It performs type coercion (the automatic conversion of values from one data type to another) before comparing two values. This means that the type of the values are changed to the same type before doing any comparison;

Example 1

const x = 2;
const y = "2";

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

In the above example 👆 there are two variables. The type of variable x is number and the type of the variable y is string.

When we compared these two variables using == we got true, because before performing comparison the type of variable x converted to string from number and returned true because now the type and the value of the variables are same.

Example 2

Comparing boolean and number

const a = true;
const b = 1;
const c = false;
const d = 0;

console.log(a == b); // true
console.log(a == d); // false
console.log(c == d); // true
console.log(c == b); // false

Is above example 👆 seems confusing, right? then let me explain you 😎.

In the above example the type of a variable a is boolean and the type of b is number. When we compare a with b using == operator, it converted variable a type to number from boolean. so a == b is true, because true becomes 1 and false becomes 0. Thus the output is true for == operator, the second output is false as true and 0 aren’t equal.

Guess the output of this example 👇

const a = "true";
const b = true;

console.log(a == b);

If your answer was false, then you are right. If you were not right, let me make this thing clear.

In the above example the type of variable a is string and the type of variable b is boolean. If either operand is a boolean, it will be converted to a number (true becomes 1 and false becomes 0).

So, here are the rules for type coercion in JavaScript:

  • If either operand is a string, the other operand will be converted to a string.
  • If either operand is a number, the other operand will be converted to a number.
  • If either operand is a boolean, it will be converted to a number (true becomes 1 and false becomes 0).
  • If one operand is an object and the other is a primitive value , the object will be converted to a primitive value before the comparison is made.
  • If one of the operands is null or undefined, the other must also be null or undefined to return true. Otherwise it will return false.

Note: These type conversions do not alter the actual type of the value.

=== (Strict Equality) 👇

=== strict equality works similarly to how == loose equality works with one important difference it does not convert the type of provided data before comparing.

When we compare a piece of data using === strict equality it first checks whether the type of the comparing data is same, If not it returns false otherwise returns true.

Example

const a = "40";
const b = 40;
console.log(a === b); // false

false because the type of variable a is string and type of variable b is number.

Comparing using === strict equality checks for the types of the operands first – and those types differ in this example. So, it returns false.

const a = true;
const b = 1;

console.log(a === b);

In the above example 👆, we have two variables a and b. The type of variable a is boolean and the type of variable b is number.

So, if we’re comparing using === strict equality, it will return false – because again, the variables have different types.

Note: Using === strict equality is considered as a best practice.

If you find this helpful please share with your network ✅.

Happy Coding 🙌 !