In javascript use of equal sign have different meaning where you have used or how many times you have used it. So let's look at some of the scenarios where you should use ==
and ===
.
Double Eqaul Sign Operator (==
):
const firstValue = 10;
const secondValue = "10";
console.log(firstValue == secondValue);
//output will be true;
- As you can see that we have two variables, the first variable has a value that is
number
type data, but the second variable consists of astring
-type value.const secondValue
's value has been changed to number type when we are using==
.
What will happen when you try to compare a number and a boolean value?
When we are using ==
it takes false
as 0
and true
as 1
.
const firstValue = true;
const secondValue = 1;
console.log(firstValue == secondValue);
//output: true;
const thirdValue = false;
const fourthValue = 0;
console.log(thirdValue == fourthValue);
//output: true;
What if we are comparing two objects or arrays?
- The double equal operator will return true if the variables are referring to the same object. But if you create two different variables with the same values inside an object, then
==
will return false.
const firstObj = {x: 1, y:2};
const secondObj = {x: 1, y:2};
console.log(firstObj == secondObj);
//output: false;
const thirdObj = firstObj;
console.log(thirdObj == firstObj);
//output: true;
Let's understand through some stories- why are we getting these values:
Let's just say that two people are coming to a new town. Both of them are looking for a house to stay. Both of them rents two different houses with two different address. So when you compare both of their address, their addresses are not the same.
After some time another person comes to the same town and is the wife of the first person. The wife goes and tells the cab driver to take her to the first-person address.
Using this analogy, first-person is
firstObj
, and second-person issecondObj
. Both of them have different addresses that are why when we are using==
, returnsfalse
.
But the wife comes, that is thirdObj
, and referring to firstObj/ first-person address, that why ==
sign returns true.
- The same thing applies to arrays also. (Same analogy: two persons coming to town)
const firstArray = [];
const secondArray = [];
console.log(firstArray == secondArray);
//output: false;
const thirdArray = firstArray;
console.log(thirdArray == firstArray);
//output: true;
==
does the data-type conversion.
Triple Equal Sign Operator(===
):
- When you are using a triple sign operator(
===
), it just strictly compares the values without any data conversion.
const firstValue = 10;
const secondValue = "10";
console.log(firstValue === secondValue);
//output: false:
const thirdValue = 10;
console.log(thirdValue === firstValue);
//output: true;
When you compare two variables having the same data with two different data types using ===
, then it just gives us false
. But when you compare two variables with the same data type having the same values then it gives us true
.
What if we are comparing two objects or arrays?
const firstObj = {x: 1, y:2};
const secondObj = {x: 1, y:2};
console.log(firstObj === secondObj);
//output: false;
const thirdObj = firstObj;
console.log(thidObj === firstObj);
//output: true;
const firstArray = [];
const secondArray = [];
console.log(firstArray === secondArray);
//output: false;
Why it's showing false on the first comparison because both of them are referring to two different memory locations or two different houses.
What if you are comparing a boolean and a number?
const firstValue = true;
const secondValue = 1;
console.log(firstValue === secondValue);
//output: false;
Because ===
does not do any data type conversion that's why we are getting false.
===
does not do any kind of data conversion, it just strictly compares them.