Difference between Loose equality (==) and Strict equality(===)

While using the equality operator in javascript. We usually have two options that are to either use Loose equality (==) or to use Strict equality (===). But making choice hastily without knowing the exact behavior of both can lead to unexpected behavior in the future.

Before diving deep into this topic let's understand the concepts of Type conversion and Type coercion.

Type conversion

Type conversion is the process of converting one data type to another explicitly. Type conversion uses built-in functions for conversion. Some of them are Number(), String(), Boolean(), parseInt() and parseFloat().

const year = '2000';
console.log(Number(year) + 24);
// 2024

In the above example initially year is a string, so to add the number to year we need to convert it into a number. Here we are using an inbuilt function Number() to convert it.

Type coercion

Type coercion is a process performed by the javascript interpreter itself. In this process javascript automatically converts one data type to another in a hidden way without our knowledge.

In simple words, type coercion is the process of converting one data type to another implicitly by the javascript interpreter.

console.log("I have " + 24 + " puppies.");
// I have 24 puppies.

Here, javascript implicitly converts 24 into a string while adding.

Some exceptions of type coercion are:

• Number to String

  Normally Javascript converts a string to a number in case of -, *, /, <, > . But in case of + it converts a number to a string.

// Normally (string to number)
console.log("11" - "4");
// 7

//Exception (number to string)
console.log("11" + "4")
// 114

• Null and undefined

  Here in null < 1 example, it results in true because null is converted to 0 before comparison. But in undefined < 1 it will result in false, because undefined cannot be converted to a number.

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

The same goes for strings. null can be converted to string but undefined cannot since it's not a valid value.

It is generally recommended to be explicit about type conversion in your code to avoid confusion and bugs.

Loose equality(==)

Loose equality (==) compares the values of two operands and returns true if they are equal and vice-versa.

The == operator compares the values of two variables, but it does not check their data type. It converts the values to a common type before making the comparison by type coercion.

This is why it is called loose equality cause it checks the operands loosely.

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

In the above example, type coercion happened and that's why it results true. Some other examples

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

Strict equality(===)

Unlike loose equality(==), strict equality(===) checks for both values and the data type of the variable. If values and data type are the same then returns true and otherwise false.

In strict equality (===) type coercion doesn't happen.

Some examples of strict equality(===).

console.log(18 === "18"); 
// false
console.log(true === 1); 
// false
console.log(0 === false); 
// false
console.log(null === undefined); 
// false

Behavior of (==) and (===) in the case of NaN and non-primitives

• NaN is a unique value that does not equals other value except itself so it's always false.

console.log(NaN == NaN);
// false
console.log(NaN === NaN);
// false

• For non-primitives, == and === always checks for their reference in memory, rather than by comparing their property values.

const obj1 = {name: "JONAS"};
const obj2 = {name: "JONAS"};
const obj3 = obj1; 

console.log(obj1 == obj2); // false
console.log(obj1 == obj3); // true

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

Conclusion

• Type conversion is the process of converting one data type to another explicitly by built-in functions.

• Type coercion is the process of converting one data type to another implicitly by the javascript interpreter.

• Loose equality (==) compares the values of two operands and returns true if they are equal and vice-versa.

• Strict equality(===) checks for both values and the data type of the operands. If values and data type are the same then returns true and otherwise false.

• Type coercion happens in only loose equality (==).

• It is generally recommended to be explicit about type conversion in your code to avoid confusion and bugs so always try to use strict equality(===).

Hope I was able to clear the concepts of Loose equality (==) and Strict equality(===).