JavaScript equality operators == vs ===
JavaScript provides us two equality operators === (strict equality) and == (lenient equality). So we have the following question on our mind:
- Difference between equality operator == vs ===,
- When we have to use which operator == or === ?
- Which equality operator is safe to use ?
If JavaScript provides us two equality operator === (strict equality) and == (lenient equality) so of course they will work differently.
Strict Equality ==
- == operator only checks the value of the both operands.
- By using the == operator we can check the value of different types variables including value type and reference type variables.
- It means at same time you can check the value of string vs integer or boolean vs string or boolean vs integer or var string vs String class object.
- If you are checking the value integer vs string than it will convert the value of the string to integer, of if you are checking the value of boolean vs integer than it will convert the value of the boolean to integer.
- It is doing the type conversion.
Examples:
"1" == 1 // true true == 1 // true false == 0 // true null == undefined // true '' == 0 // true
Lenient Equality ===
- === operator check the value and type of the both operands.
- By using the === operator we can check the value of the same type variables including value type and reference type variables. It means at time you can checks the value of the same type variables.
Examples:
var str1 = new String("str1");
str1 === str1 // true
Fact:
- Most of the programmer does not uses the === operator which is very big and common mistake.
- Most of the programmer does not know the real working and meaning of the === operator. They only know that it check the value and type of the operands.
Biggest Misunderstanding about the Strict operator ===
Most of us only know that it check the value and type of the operands.
Question: But really === operator only checks the type and value ?
Answer: Yes and No.
Yes, If the operands is type of primitive.
No, If the operands is type of reference type, Because it also check the reference of the both variables, Means both operands create using the single new keyword (both operands does not created using different new keyword). We can also say that it checks the both operands point to the same memory reference or not.
Description:
var refType1 = new String("str1");
var refType2 = new String("str1");
var refType3 = refType1;
var valType1 = "str1";
var valType2 = "str1";
Above I define the some Reference type and primitive type variables.
refType1 === refType2 // false
Here I compare the two reference type variables which are from same type and same value, but it returns the false, because the both operands is created using the different new keyword or both point to the different memory reference.
refType1 === refType3 //true
Above statement will returns the true because the both operands is created using single new keyword and both point to the same memory reference.
valType1 === valType2 // true
Above statement will returns true, because both operands is primitive type and string and value of both operands is true.
valType1 === refType1 // false
Above statement will returns false, because primitive type is checked with the reference type so === operator will returns false even the value of operands is same.
valType1 == refType1 // true
Above statement will returns true, even primitive type is checked with the reference type because of the == operator, it does not check the type and memory reference of the variables.
Below example will help us to solve the Biggest Misunderstanding about === operator
var refType1 = new String("str1");
var refType2 = new String("str1");
var refType3 = refType1;
alert(refType1 === refType2); // false
alert(refType1 === refType3); // true
var arr1 = [ 1, 2, 3];
var arr2 = [ 1, 2, 3];
var arr3 = arr1;
alert(arr1 === arr2); // false (even value of arr1 and arr2 is same
// because it checks the memory reference)
alert(arr1 === arr3); // true
var obj1 = { };
var obj2 = { };
var obj3 = obj1;
alert(obj1 === obj2); // false (even value of arr1 and arr2 is same
// because it checks the memory reference)
alert(obj1 === obj3); // true
Which operator we have to use ?
I recommended you to use the === operator to compare the two values if you 100% sure that both operands type is same.
Which operator is safe to use ?
Of course === operator is safe to use. Because you can not predict the behaviour of the == operator. Because it can not check the type of the variables.
Examples:
1 == "1" // true 1 === "1" // false true == 1 // true true === 1 // false
When we have to use which operator == or === ?
== operator
- Use when you does not sure about the types of the operands.
- Use when you does not care about the type and you want to check only the values of both operands.
=== operator
- Use when you sure 100% about the types of the operands.
- Use when you have to care about the types and reference of the operands.
I hope you enjoy the article, Please comment down you reviews about it.
Happy Coding!!!
🙂