If you aren’t sure what the difference between == and === are in JavaScript, you aren’t alone. Plenty of people struggle with which of these two JavaScript operators you should use so don’t feel bad that you don’t know the difference. First things first, we need to understand what operators are, as well as how they work in JavaScript.
What does the “==” do exactly?
In JavaScript, the “==” operator is a comparison operator. This means that you can perform logic tests to see if one thing is equal to another thing. The result will always return either true or false.
With “==”, JavaScript does not care what data type (string or integer) you pass to it as long as the content that you provided it with matches.
“55” == “55”
true
55 == 55
true
“55” == 55
true
How is “===” any different from “==”?
The “===” operator compares both content and type, whereas “==” compares only content. JavaScript counts anything that is in between the two quotation marks as a string. Earlier I mentioned that we will be using the numbers “55” and 55, except, “55” is not an integer, it is a string, whereas 55 is an integer because it is not encapsulated by quotation marks.
“55” === “55”
true
55 === 55
true
“55” === 55
false
For example, this means that if you have the numbers 55 and “55” and try comparing them with the “===” operator that it will not only compare the contents of the two data or variables you pass to it, it will also compare the typeof variable or data it is. In this case, it would return false, because a string is not the same data type as an integer.
How can I compare == vs. === on my own?
Answer: Learn Chrome’s DevTools! DevTools (also known as Web Inspector) is a web developer’s best friend. They allow you to edit any website locally in real time. And they allow you to use their console feature to perform logic tests, write simple functions and much more. Check out this Chrome’s DevTools Tutorial if you’d like to learn more.
The best way to test == vs. === in JavaScript
- Open DevTools by pressing down Command+Shift+I (Mac) or by right-clicking anywhere on the screen and selecting “Inspect”.
- Click on the “console” tab. From there you will be able to perform logic tests using JavaScript. Type in “55” === 55 and you’ll see it returns false. And yet, when you pass “55” == 55 the result is true. Magical!
You can even test your JavaScript just using variables! Just clear your console by right-clicking then pressing “Clear console”, then try it out!
What about the != operator and !==?
You can also compare if something is “!=” (not equal to) something else, and if something is “!==” (strictly not equal to) something else.
When testing if “55” !== 55 with the !== operator, the answer returned will be true because the string “55” is not strictly equal to the integer 55.
Be sure to mess around with console using different types of data until you get it down to a science, if you are still confused then be sure to check out Mozilla’s Comparison Operators page which goes into further detail. Then when you are ready, take your newly learned superpowers of JavaScript truthiness to the races in the JavaScript Equality Table Game!
Final Thoughts
Thanks for taking the time to read a little about operators and operands in JavaScript. If you are a beginner or someone who knows some of the basics and want to learn more about the language of JavaScript, be sure to check out One Month’s Learn JavaScript Course.
