JavaScript Double Equals (==) vs Triple Equals (===). Which Should You Use?
Introduction
Equality in JavaScript can be a difficult concept to navigate. More so, when you're a beginner. You may have come across cases where === is used. And also others where == is used instead.
Does it really matter which one you use? What is the difference? In this article, you will learn the concepts of double equals == and triple equals ===. By the end, you will be able to explain what they are, which one to use, and why.
Let's get started!
Double Equals (Or Loose Equality) ==
The double equals == uses loose equality (or abstract equality) when comparing values. What this means is, before comparison, it attempts to resolve the type (with type coercion) if the values are of different types.
First, it checks types of the values to be compared. If they're not of the same type, it tries to change them to match each other. The comparison then happens after that.
You will see some examples later in the article.
Triple Equals (Or Strict Equality) ===
As the name suggests, the triple equals === compares the values strictly. It does not attempt to change the type of the values. It compares both the values and their types.
If the values are the same and the types are the same, it will return true. On the other hand, if the values are the same and the types are different, it will return false.
Some Examples
The following are some examples to help you better understand how equality works in JavaScript.
First example
const name = "Love"
const nickName = "Love"
console.log(name == nickName) // true
console.log(name === nickName) // true
In our first example both == and === returns true.
This is because both the type and value of both name and nickName are the same. In both instances, the type is string and the value is "Love".
Second Example.
const value1 = 23
const value2 = "23"
console.log(value1 == value2) // true
console.log(value1 === value2) // false
In our second example, the double equals == returns true. And the triple equals === returns false. But why?
Well, it's because the values are of different types - value1 is a number and value2 is a string.
The double equals == resolve the difference in type. In other words, it changes the type of the string to a number. And then compares. Hence, it returns true.
The strict equal === takes into account the differences in types. Thus, it returns false.
More examples
console.log(0 == " ") // true
console.log(0 === " ") // false
console.log(1 == [1]) // true
console.log(1 === [1]) // false
console.log(true == "1") // true
console.log(true === "1") // false
From the examples above, we can see that whenever the types of the values differ, == will attempt to match them to be of the same type. The double equals can thus cause some unexpected behaviors in your application.
Conclusion
It is widely considered best practice to use strict equality === over loose equality ==. If you need to change type before comparison, it is safer to do it yourself than rely on == to do so.
When in doubt as to which one to use, use strict equality (===).
Thanks for reading.
Let's connect on LinkedIn | Twitter