How to Use Comparison with the Strict Equality Operator in JavaScript

Posted by

The strict equality operator (===) in JavaScript is used to compare the value and the type of two operands. It returns true if the operands are equal and of the same type, and false otherwise. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

console.log(1 === 1); // true
console.log(1 === '1'); // false
console.log(null === undefined); // false
console.log(true === 1); // false

[/dm_code_snippet]

It’s important to note that the strict equality operator does not perform type coercion, unlike the loose equality operator (==). Type coercion is the process of converting a value from one type to another in order to compare them. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

console.log(1 == '1'); // true

[/dm_code_snippet]

Using strict equality operator is recommended in most cases, as it prevents unexpected behavior due to type coercion. However, it may not be appropriate for certain scenarios, such as when comparing against null or undefined.

In addition, It’s also useful to use strict equality operator when comparing with the boolean value, true or false because loose equality operator will consider any value other than 0, null, undefined, NaN and empty string as true and can lead to unexpected results.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

console.log(false == 0) // true
console.log(false === 0) // false

[/dm_code_snippet]

Another important thing to keep in mind when using the strict equality operator is that it compares the values of objects by reference, not by value. This means that if two variables point to the same object, they will be considered equal, but if they point to different objects with the same properties, they will be considered not equal.

For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let obj1 = {a: 1};
let obj2 = {a: 1};
console.log(obj1 === obj2); // false
let obj3 = obj1;
console.log(obj1 === obj3); // true

[/dm_code_snippet]

In the first example, obj1 and obj2 are two different objects and therefore not equal when compared with strict equality operator. But in the second example, obj3 points to the same object as obj1, so they are equal when compared with strict equality operator.

In addition, when comparing arrays, the strict equality operator compares the references of the arrays, not the values of the elements.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let arr1 = [1,2,3];
let arr2 = [1,2,3];
console.log(arr1 === arr2); // false
let arr3 = arr1;
console.log(arr1 === arr3); // true

[/dm_code_snippet]

In the first example, arr1 and arr2 are two different arrays and therefore not equal when compared with strict equality operator. But in the second example, arr3 points to the same array as arr1, so they are equal when compared with strict equality operator.

In conclusion, It’s important to keep in mind that strict equality operator compares the values and types of operands and also compares the references of objects and arrays, not the values of the elements. This can be useful in certain situations, such as when you want to know if two variables point to the same object or array, but it may not be appropriate when comparing the contents of objects or arrays.