When to use == vs === Equality Comparison Operator in JavaScript
Table of Contents
In this post, we'll learn about the difference between the ==
and ===
operators in JavaScript, and when to use each one.
By now, you are already aware that there are two types of equality operators in JavaScript, but you've probably wondered why that is, and when to know which one to use.
Let's learn about how each one works.
The === Operator
The triple equal ===
operator, or strict comparison operator, is used to check if the two values are of the same type and have the same value. If this is the case, it will return true
, otherwise it will return false
.
When we say "type", we mean whether or not the value is a number, string, boolean, or null.
This means that when using ===
, it will return false
when comparing 0
and "0"
, because they are not of the same type.
JAVASCRIPTconst results = 0 === "0";
console.log(results); // false
The == Operator
The double equal ==
operator, or abstract comparison operator, is used to check if the two values are equal, regardless of their type. If they are equal, it will return true
, otherwise it will return false
.
This means that when you use the ==
operator, it will return true
when comparing 0
and "0"
, because they are of the same value.
What goes on under the hood is that the "0"
is converted to a number, therefore being equal to 0
.
When this conversion of type happens, it is called type coercion.
JAVASCRIPTconst results = 0 == "0";
console.log(results); // true
This doesn't happen only with numbers, but anything that can be converted, such as strings, booleans, and nulls. Because of this, things will be equal using the ==
operator, but not using the ===
operator.
The Verdict
While each operator has its own advantages and disadvantages, the ===
operator is the recommended operator to use when comparing values. Because it is more strict than the ==
operator, you will run into fewer oddities when comparing values.
You also don't need to worry about what will something be converted into before comparing it, as will happen with the ==
operator.
This isn't to say to never use ==
, just to be careful and truly understand what is going on under the hood before using it.
Conclusion
In this post, we've seen how the ==
and ===
operators work in JavaScript, and how they differ. We also learned that the ===
operator is more strict than the ==
operator, and that it is recommended to use it when comparing values unless you know what you're doing.
Hopefully, you've found this post helpful and have learned something new!
Resources
- Getting Started with Solid
- Create an RSS Reader in Node
- Best Visual Studio Code Extensions for 2022
- How to deploy a PHP app using Docker
- How to deploy a Deno app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Using Push.js to Display Web Browser Notifications
- Getting Started with React
- Setting Up a Local Web Server using Node.js
- Using Axios to Pull Data from a REST API
- How To Create a Modal Popup Box with CSS and JavaScript