Comparison & Equality Operators
![Anjana Vakil](https://static.frontendmasters.com/assets/teachers/vakil/thumb.webp)
![JavaScript: From First Steps to Professional](https://static.frontendmasters.com/assets/courses/2022-11-15-javascript-first-steps/thumb.webp)
Check out a free preview of the full JavaScript: From First Steps to Professional course
The "Comparison & Equality Operators" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:
Anjana demonstrates JavaScript returning a boolean when running comparison operators and discusses the differences between the triple equals === and double equals == equality operators. A brief exercise using equality operators is also provided in this segment.
Transcript from the "Comparison & Equality Operators" Lesson
[00:00:00]
>> Some of these other operators, they are similar to math class. They tell us how things compare. So we also have operators for like greater than, less than, greater than, or equal to, less than or equal to, and they involve our friends the angle brackets. So, the right angle bracket is greater than the left angle bracket is less than and then if we put an equal sign after those are the or equal to versions, and we can kind of guess what type of value?
[00:00:38]
If I asked JavaScript, is 5 greater than 4? What kind of value do you think I'm gonna get back as an answer to this question?
>> Boolean.
>> A boolean, true or false, right? True or false, 5 is greater than 4? We can confirm that. Good, we can confirm that.
[00:01:02]
So 5 is greater than 4, true, as expected. 5 is less than 4, false, as expected. So again, we have a lot of the time we're asking JavaScript these yes or no questions, these true false questions. There are also a couple of operators in JavaScript that tell us whether two things are equal.
[00:01:24]
And confusingly, JavaScript has two versions of these. These are not technical terms, but well, they were called the strict version of the equality operators, and what I like to think of is the loosey goosey version or, [LAUGH] some might call the sloppy version of these operators. And confusingly, these two versions of each operator, return different things that sometimes lead to those unexpected JavaScript sort of like what's happening here?
[00:01:57]
So let's talk about these a little bit. So we have two operators for something equals something else, which is asking JavaScript, does this value equal this other value, are they the same? And if I use the strict version, I'm going to ask that with three equal signs in a row.
[00:02:15]
That is a single operator in JavaScript, three equal signs in a row. And if I want to know just like a vague loosey goosey answer to it, I can use just two equal signs. And likewise, we have a does not equal version for each one. So the strict version is exclamation point which often in programming means like not or opposite, and then equal equal, and then not equal is the loosey goosey version.
[00:02:43]
So, what am I talking about the strict versus the loosey goosey version, I am gonna ask you all to poke around and figure out. For each of these examples, does the strict triple equals operator, do the same thing as the loosey goosey double equals operator? And if they are different, how are they different?
[00:03:08]
So let's just take a really brief moment to ask JavaScript some questions like, is the number one equal to the number 1 is the string one equal to the string 1, and is the number 1 equal to the string 1. So take a moment, guess at the answer first, and then ask JavaScript in the console what it thinks.
[00:03:39]
All right, so these operators, these equal equal equal or equal equal strict loosey-goosey, what do they do? Do they do things? Let's find out. Okay. So, what did we find this first row? Number 1, triple equal number 1 versus number 1, double equal number 1. Do they do the same thing or different things?
[00:04:00]
>> Same.
>> Same thing. And in both cases we get the answer true. Nice. How about the second line? Sring 1 equals string 1?. Same or different?
>> Same.
>> Same and the answer, true. Cool. All right. We're just checking our bases here, making sure we're not losing it.
[00:04:25]
What about the last line? So number one, triple equals number one. Let's try it out. Sorry, string 1, number 1, triple equals string 1, false. Is that what you expect? I'm seeing nods, because we said these are two different things, right? One is a number one is a string.
[00:04:49]
They're not the same. They have something in common I guess maybe, but they're totally different things, one is like talking about a number and the other is the actual number. What about the loosey-goosey double equals? So number one loosey-goosey equals letter or string one. This returns true, was anyone surprised by this?
[00:05:14]
No, maybe we've just come to expect the JavaScript says weird things sometimes. Does anybody know what is happening here, or can anybody guess? Why the loosey goosey operator says that these two are the same thing whereas the strict operator says that they're not? Any guesses what JavaScript is thinking here if we can anthropomorphize our programming languages, which why not.
[00:05:40]
>> Triple equals, probably tries to determine what type of data format it is versus double equals just interprets the value itself.
>> Interesting, okay, so this has something to do definitely with the type of values that we're dealing with, right? And the triple equal is, seems to care about the type of value.
[00:06:03]
And so, it's saying that the number 1 is not the same thing as the string 1 because those are different types of values exactly. The loosey goosey operator, the double equals, it is doing an extra step here. What it's saying inside of JavaScript if we again can anthropomorphize and pretend JavaScript is a person.
[00:06:28]
It's saying, all right, these two things they look kinda different but let me try to pretend that they are the same value. What it's doing is what's called casting or converting the values to be the same type so that it can compare them more closely. And it's saying, okay, if we convert these to the same value, the same type of value, then they would be the same thing.
[00:06:56]
So for example like if I do one double equals 2, that's false because these even if I convert them both to a string they're not the same string. But the thing is that usually when we're asking JavaScript whether two things are the same, we care about the type of things they are.
[00:07:18]
We usually don't want to find out that the things that we thought were the same thing are actually of two totally different types. JavaScript just managed to convert them to the same type so that they could look like they were equal. So in almost every situation, there's always an asterisk, there's always an almost, but in almost every situation, you're gonna wanna use the strict operators.
[00:07:43]
So that triple equal and the exclamation equal equal instead of the loosey goosey, two equals versions because almost always, the type of your data matters. So I bring up these loosey goosey versions just to tell you that they're out there and to tell you be careful that you're not using the loosey goosey when you think you're using the strict one.
[00:08:08]
Because you're gonna get different values, and you're gonna maybe not have a good time if you're thinking that you're doing strict comparison when really you're doing a sloppy loosey goosey comparison, okay? So this is just a gotcha as it were. Okay, as we have said, JavaScript has lots of operators, and there is a bunch of other stuff out there.
[00:08:37]
Anybody have any other guesses about other operators that are out there? We saw one earlier the percentage and the double asterisks for modulo and or remainder and exponentiation.
>> Is there a coalesce type function in JavaScript?
>> Interesting. A coalesce function. Can you tell us a little bit about coalesce?
[00:08:59]
>> In SQL, it evaluates multiple values to determine if any of them have a something that's assigned to it. Once it finds one, that's a sign that has something assigned to it, it says, okay, I'll take the very first one.
>> Right, okay.
>> So useful sometimes with SQL.
[00:09:15]
>> Sure, yeah, so in C so maybe there's another programming language we know like SQL or some other language that has a certain operator, like coalesce, and we want to find out does JavaScript have that thing? Where we can do, go to our friend MDN type in coalesce and see what we get.
[00:09:32]
Well, there's not really the answer to the question, is not really something equivalent to coalesce in SQL, but there is something that's called a nullish coalescing operator. What is that? I don't know. Let's find out. Let's play around. So we have a bunch of like logical operators that like this one is one of them.
[00:09:52]
There's things like logical OR and AND, and we're gonna talk more about those when we talk about conditionals and logical values and stuff like that. But the point is that you can find them all on our good friend MDN. And if you're ever wondering, my favorite programming language has an operator like this, does my new favorite programming language JavaScript have that operator?
[00:10:15]
You can look it up in the operators page, as we saw before. Cool. So once again, the takeaway from this whole course is MDN, [LAUGH] just kidding.
>> Someone was saying AND and OR plus, plus.
>> AND and OR, plus, plus, yes. Okay, so these are also operators that we can.
[00:10:41]
If we go to I don't actually know if this will work if we yes, okay, we can even type it into the search box. So AND AND is another logical operator for logical AND. Again, we'll come back to it when we talk about conditionals, and truth values and things like that and the other one was plus plus.
[00:10:58]
That is, also, an operator that is called the increment operator, which kind of adds one to like a counter, or something like that. So, again great examples of other operators that are part of the huge constellation of different operators we can have in JavaScript, that are built into the language.
[00:11:16]
And that we can always look up the details of and like how does it work again and what's an example and all of that good stuff is in our friend MDN. So anytime you're curious about a particular operator that you see in somebody else's code maybe, or you know the name of the thing you wanna do, but you can't remember what the symbol is MDN is your friend, MDN is your friend.
[00:11:37]
Yeah, I'm gonna be saying that a lot.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops