Difference between == and === operators in JavaScript | Strict Vs. Loose Equality

JavaScript Loose Vs. Strict Equality: In this tutorial, we will learn about loose equality (==) and strict equality (===) and the difference between == and === in JavaScript. By Siddhant Verma Last updated : July 29, 2023

JavaScript Loose Equality (==) Operator

The double equals symbols (==) are known as loose equality operator. It is used to check whether two operands are the same or not.

Example 1

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

Output

false

Example 2

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

Example 3

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

Example 4

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

JavaScript Strict Equality (===) Operator

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.

Example 1

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

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

Output

false
false

Example 2

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

Example 3

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

Example 4

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

Difference Between Loose (==) and Strict (===) Equality in Javascript

In JavaScript, the main difference between the loose equality (==) and strict equality (===) operators is that the loose equality (==) operator does the type conversion of the operands before comparison and then compares the given operands, whereas the strict equality (===) operator compares both values and data types of the operands.

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.

Example

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?

JavaScript Tutorial »



Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.