Home » JavaScript Tutorial

Difference between == and === operators in JavaScript

JavaScript == and === operators: Here, we are going to learn about the difference between == and === operators in JavaScript.
Submitted by Siddhant Verma, on January 21, 2020

JavaScript == and === operators

Differentiating between the '==' and '===' operators is important as they're both quite similar to each other in terms of functionality but at the same time also very different from each other in terms of how that functionality is achieved and their use cases. In this article, we'll understand how the two are different and when to use which.

Both double equalsTo ( == ) and Triple equalsTo ( === ) are used to compare variables.

let x = 10;
let y = 20;
console.log(x == y);

Output

false

The double equalsTo ( == ) operator is simply used to compare the values of two variables. It will return a boolean indicating the result. A truthy is the values you are comparing are equal and false otherwise. Let's look at a few examples,

let s1 = "abc";
let s2 = "abc";
console.log(s1 == s2);

Output

true

Since both the strings s1 and s2 are equal, i.e., they both store the same set of characters the == operator returns true.

let t = 12;
let tS = "12";
console.log(t == tS);

Output

true

In the above example, we compare a string and an integer. However, since JS interprets that they both store the same value the double equalsTo (==) returns true. Since JS is a weakly type language, such results can be expected in contrary to other low-level languages like C++ where such a comparison is not allowed in the first place. Due to the weakly types nature of JS and such comparisons, there was a need for a more strict comparison operator and this is where the triple equalsTo (===) comes into place.

let t = 12;
let tS = "12";
console.log(t === tS);

Output

false

The triple equalsTo === operator makes a more strict comparison where it returns true if and only if both the variables being compared are completely identical. This means that they should have the same type and the same value.

let array = [1, 2, 3];
let revArr = [3, 2, 1];

console.log(array == revArr);
console.log(array === revArr);

Output

false
false

Clearly, both the operators will return false as their values are not the same.

let str = "hello world"
let para = "hello world"

console.log(str == para);
console.log(str === para);

Output

true
true

Since both, the strings have the same set of characters and they're both strings, both operators return true. We can also say that if the result of any === comparison is true, the == comparison for the same expression will also return true but vice versa is not true.

let ob1={ name: "Mario" }
let ob2={ name: "Mario" }

console.log(ob1==ob2);
console.log(ob1===ob2);

Output

false
false

We had two objects having the same key-value pair yet both comparison results false. Why is that so?

let arr1 = [1, 2, 3]
let arr2 = [1, 2, 3]

console.log(arr1 == arr2);
console.log(arr1 === arr2);

Output

false
false

Again we have two completely identical arrays yet both the comparisons results false.

The reason for the above anomaly is that we’re comparing variables that have completely different memory locations. When we compare two integers with the same value, they both point to the same memory location which holds the same values, hence both operators return true. When we take one of them to be a string, we’re comparing two different memory locations hence even though they have the same value they === returns false as they have separate addresses in the memory. With object and object types such as arrays ( we know that arrays have an object container around them), any two variables will always occupy different memory hence we get a false when we compare them.

let ob1Copy = ob1;

console.log(ob1 == ob1Copy);
console.log(ob1 === ob1Copy);
console.log(ob1Copy == ob2);

Output

true
true
false

Now since ob1Copy accesses the same memory location as ob1, we get true for both the comparisons. Can you write a deepEqual to function which takes two objects as a parameter and returns true if they both have the same value?






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.