Loose vs Strict Equality in TypeScript

When comparing values in TypeScript, developers have two options: the loose equality operator (==) and the strict equality operator (===). Although they may seem similar, there are crucial differences between these operators that every TypeScript developer should understand.

In this tutorial, we’ll dive deep into how == different from === in TypeScript, explore their loose vs strict equality in TypeScript behavior with examples, and provide insights on when to use each one.

Loose vs Strict Equality in TypeScript

First, let’s understand the loose vs strict equality operators in TypeScript. Below, I will provide a detailed explanation of these operators.

Understand Loose Equality Operator (==) in TypeScript

The loose equality operator (==) compares two values for equality after performing type coercion. Type coercion is the automatic conversion of values from one data type to another. When using ==, TypeScript attempts to convert the operands to a common type before making the comparison.

Here’s an example:

console.log(1 == "1"); // Output: true

In this case, the number 1 is coerced to a string before the comparison. Since the resulting string is equal to "1", the expression evaluates to true.

However, type coercion can sometimes lead to unexpected results. Consider the following:

console.log(0 == false); // Output: true
console.log("" == false); // Output: true

Here is the output of the above TypeScript code, where we checked the loose and strict equality operators in TypeScript.

In these examples, the == operator coerces the operands to a common type, resulting in comparisons that may not align with the developer’s intentions. The main difference between the == and === operator in JavaScript is that the == operator does the type conversion of the operands before comparison.

Understand Strict Equality Operator (===) in TypeScript

The strict equality operator (===) compares both the value and the type of the operands. It does not perform type coercion, making it a safer and more predictable choice for most situations.

Here’s an example:

console.log(1 === "1"); // Output: false

In this case, the number 1 is not equal to the string "1" because they have different types. The === operator returns false.

Let’s revisit the previous examples using the === operator:

console.log(0 === false); // Output: false
console.log("" === false); // Output: false

With the === operator, the comparisons evaluate to false because the operands have different types. === and !== check both value and type, which leads to more predictable and safer code, whereas == and !== only check the value after performing type coercion.

Difference Between Loose vs Strict Equality in TypeScript

In most cases, it is recommended to use the strict equality operator (===) to avoid unexpected behavior caused by type coercion. Always use === as it does not attempt to coerce the values. == does a type coercion, the result of which is not predictable.

However, there are a few scenarios where using the loose equality operator (==) can be justified:

1. Comparing a value against null or undefined:

   if (value == null) {
     // Value is either null or undefined
   }

2. Intentional type coercion:

   if (count == "10") {
     // Deliberately comparing a number with a string
   }

In these cases, the developer is aware of the type coercion and intentionally leverages it for specific comparisons.

Summary

Conclusion

Understanding the differences between the loose vs strict equality in TypeScript is crucial for writing reliable and maintainable TypeScript code. While == performs type coercion, === compares both value and type, resulting in more predictable outcomes.

As a best practice, default to using === unless you have a specific reason to use ==. By making informed decisions about equality comparisons, you can avoid common pitfalls and ensure your code behaves as expected.

You may like to read:

• Is TypeScript Frontend or Backend?
• Differences Between TypeScript and JavaScript
• Differences Between Type and Interface in TypeScript
• TypeScript Functions
• Require vs Import in TypeScript

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/