tldr;
Comparison operators are frequently used in JavaScript applications, and are an important part of controlling the logic flow of the app. But if you don’t have a good understanding of how they work you can run into a couple issues. Understanding strict comparisons and abstract comparisons is also really important, and in this article we’ll cover both of these comparisons.
Comparison Operators
If you’ve written any amount of JavaScript, you’ve almost certainly used comparison operators. You’ve had to say, “If the value of this variable equals the value of that variable, do this; otherwise do that.” Or, “If the value of this variable is less than ‘X’, set the value of this variable to ‘Y’.” These are common uses of comparison operators. But tell me, have you ever written the following comparison (or something similar) and gotten true when you were expecting false?
console.log(1 == '1')/ // true
I have had this happen to me before, and at first was really confused. But once I realized what was going on, it made more sense. Let’s talk about why this happens.
Abstract Comparisons
The first type of comparison we’ll talk about is abstract comparison. In JavaScript, these comparisons are == and !=. When you use these two comparisons, JavaScript converts both variables to the same type and then compares them. So in our example above, it takes one of the two values and converts it to the same type as the opposite one (i.e. takes the number and converts it to a string) and then does the comparison. That’s why the statement 1 == '1' is true. Obviously a number is not the same as a string, but with abstract comparison they are compared to each other as if they were the same. Make sense? The same is true for !=. If we take the inverse of the previous statement:
console.log(1 != '1'); // false
We see that the result of this comparison is false, even though those are two different values. This was really confusing when I first started in JavaScript. I was unsure why I was getting into certain if statements or why variables were having values set to what I thought was the incorrect value. Understanding what was happening in the comparison helped me to clear everything up.
Another situation to be aware of when using abstract comparison is when you are comparing null and undefined. These are two distinct primitive types in JavaScript, but if you use the abstract comparison on these two values, you get a true.
console.log(null == undefined); // true
This is arguably a bigger issue than comparing strings and numbers. There are times where you want to do a specific thing if the value of the variable is null and a different thing if it’s undefined. They have different implied meanings, even though they are both the absence of a value.
Strict Comparisons
So how do we ensure that 1 does not equal '1'? That’s where strict comparisons come in to play. With strict comparisons, no type conversion happens, and the values are compared to each other exactly as you wrote them. So let’s look at our examples from above and see what their results will be with strict comparisons:
console.log(1 === '1'); // false
console.log(1 !== '1'); // true
console.log(null === undefined); // false
Likely when you make a comparison between two objects, you actually want to know if two values are strictly equal or strictly not equal to each other. I always use the strict comparison, and recommend that everyone do the same. There might be some edge cases where you need abstract comparisons only for equality, but I have found very few cases where I needed them over strict comparisons.
Types of Comparison Operators
There are really two types of comparison operators: equality/inequality operators (which we’ve really covered so far) and relational operators. Let’s go over these in a little more depth. We’ll start with equality/inequality operators and then cover relational operators.
Equality/Inequality Operators
We’ve talked a lot about equality/inequality operators already. The four equality/inequality operators are ==, ===, != and !==. In this section, we’ll just give a few notes on these comparisons. We’ve already shown several examples of using these comparison operators.
- Two
numbersare abstractly or strictly equal to each other if they are the exact same number - Two
stringsare abstractly or strictly equal to each other if they have the same sequence of characters in the same order - Two
objectsare abstractly or strictly equal to each other only if they point to the same location in memory - Two
booleanvalues are only equal to each other if they are bothtrueor bothfalse. -
undefinedandnullare abstractly equal to each other
The inverse of the above rules apply to using the inequality operators (!= and !==).
Relational Operators
Relational operators are the following operators: >, >=, < and <=. You’ll likely recognize these from your math classes in school. They are pretty straight forward, but let’s go over each of them real quick.
For the greater than (>) operator, the result is true if the left side of the operator is a greater value than the right side. Some examples are
console.log(4 > 1); // true
console.log(4 > 4); // false
console.log(4 > 8); // false
For the greater than or equal to (>=) operator, the result is true if the left side of the operator is a greater value or equal to the right side. Some examples are
console.log(4 >= 4); // true
console.log(4 >= 8); // false
For the less than (<) operator, the result is true if the left side of the operator is a lesser value than the right side. Some examples are
console.log(4 < 8); // true
console.log(4 < 4); // false
console.log(4 < 2); // false
For the less than or equal to (<=) operator, the result is true if the left side of the operator is a lesser value or equal to the right side. Some examples are
console.log(4 <= 4); // true
console.log(4 <= 2); // false
Conclusion
These relational operators are a basic part of the JavaScript language, but are also really important. Understanding the difference between strict and abstract comparisons should keep you from running into unexpected errors in your application.
Top comments (0)