Equality Type Comparison

[00:00:00]
>> WebDevSimplified: Now another place that you're going to see implicit type coercion is when you do inequality check. Normally when you use inequality check, you use 2 equal signs. That's what we've been talking about throughout this entire workshop. But in JavaScript, just like they like to have two ways to do everything, there are 2 ways to check for equality: one with 2 equal signs and one with 3 equal signs. So we need to understand the differences between these two.

[00:00:20]
The first, when we use double equal signs, that's what we've been using throughout this entire workshop that uses this implicit automatic type coercion. So if you have two variables that are different types, JavaScript will try to convert them into the exact same type before doing the comparison. So here we have the number 1, and we're comparing it to the string with a value of 1. This will return true when we use this double equals because JavaScript takes that string and converts it into the number one before doing the comparison.

[00:00:47]
Same thing here when we check 0 equals false, that actually returns true because it converts 0 into the boolean false. Same thing with an empty string. An empty string is considered falsey, so it converts that to the boolean of false. Inside of JavaScript, the number 0 and an empty string are considered falsey values. These are essentially values that evaluate to false when you try to convert them to a boolean.

[00:01:10]
So it's important to understand that zero and empty strings are these falsey values, and when you do the comparison, it will convert them to a boolean for you. Now this, in my opinion is quite confusing behavior because clearly the number one is not actually the same as the string one. Sure they convert to the same thing, but they're not truly the exact same value and clearly zero and false are very different.

[00:01:29]
They're definitely not the exact same thing. So this is where the triple equals syntax came in. JavaScript realized, you know what, this double equal syntax is a little bit confusing. Let's add a new syntax in here that doesn't do any type coercion at all. So unlike double equals where it automatically converts your types, triple equals essentially does two different checks. It first checks, are these the exact same type?

[00:01:50]
If they are, then it moves on and does the equality just like normal. Otherwise, if the types are different, instead of converting those types to be the same, it just automatically returns false. So here we can see the number one is equal to the number one. That returns true just like we would expect. But when we check the number one versus the string of one, this is actually going to return false because JavaScript sees these things and says the number one is a different type than the string of one, so it doesn't even check the equality, it just immediately returns false.

[00:02:18]
So it's like a two-step process. First, you check the type to see if they're the same, and then secondly, you actually do the equality comparison, while the double equals is different. Instead of checking the type, it just converts them to the same type and then does the check for you. Now this also works the exact same for not equals. We can use a not equals with a single equal sign after that. That'll use essentially the same type coercion behavior, but if you want that type strict behavior, you need to use the triple equal sign, which would be an exclamation point followed by two equal signs.

[00:02:49]
So we'll just copy this code over real quick to kind of show you the easy way to remember the differences between them. We'll first change them both to just the equal versions of themselves. We'll get rid of these comments because obviously they'll be wrong. There we go. You can see 1 equal equal the string of 1 will return true for this type coercion way, while this strict type version is going to return false.

[00:03:08]
And essentially all you need to do to convert from a normal equals like this to a not equal comparison is replace the first equal sign with an exclamation point, which is why this second one has 2 exclamation points and this first one has 1. Now you'll see when I do the conversion, these ones do the type coercion first, which is why our value is false, and these ones, since they're different types, automatically they're not the same, so it returns true saying they are not the same value.

[00:03:32]
Now you may be wondering, OK, again, there's multiple different ways to do things, so which one should I do? It's technically personal preference which one you want to do, but I would highly recommend always using the strict version, either the triple equals or the not equals with the triple equal version. The reason I recommend doing that is because these automatic type coercion behaviors inside of JavaScript, they're confusing.

[00:03:54]
Like if I try to check to see if 0 is equal to false, I want that to return false because they're not the same type. But if JavaScript does that conversion for me, they'll return true. So again, these strict equality versions just make it easier to understand what your code does. You essentially remove that magic of type coercion and you're being explicit saying, I know these should be the same type, and if they're not, I want this to return false.

[00:04:13]
There is one exception to this rule though, and we actually talked about this a little bit earlier, and that is when dealing with null and undefined. They both represent not a value, but technically they're different types from each other. Null is one type and undefined is another type. So when you use triple equals to compare them, they actually return different things. So if we just copy over this code, take a quick look here.

[00:04:35]
You can see when I do a double equals on null and a double equals on null and undefined, both of those return true because they both represent kind of the same thing, and JavaScript does that conversion for me. It converts undefined to null or null to undefined. It converts one way or the other so that they have the same type. But with triple equals, we'll notice here when we compare null and null, it returns true.

[00:04:55]
They're the same type and the same value. While null and undefined technically are different types because they're different things, so it returns to me false. Most often than not when I'm writing code, I don't care if it's null or if it's undefined. All I care is that it's equal to one of these two values. So the only time I actually use the double equals normal version here is when I'm comparing something to null or undefined, because I don't care which one it is.

[00:05:19]
I just care that it is one of the two. So if I write out my code like this, that's able to check for both null or undefined, while this case only checks for either null or undefined. It doesn't allow me to check for both. And to really hammer that home, let's just create a variable. We're going to set its value equal to null, just like that, and we can come in here and we can do a comparison for a equal null, just like that, that's going to return to me true, just like that.

[00:05:45]
Obviously that makes sense. Now I pass an undefined. That also is going to return true, and that's great because generally I don't care if my variable up here is either null or undefined. I just want it to return true for either one. While if I were to use my triple equal syntax, obviously if they're both undefined, it's true, while up here if this one happened to be null, now I'm going to get a false.

[00:06:04]
So I would need to throw in an additional check inside of here to say that A is also equal to null. That's the only way I can check for both of these different parameters. So this is why the only time I use the double equals is when trying to compare either null or undefined, since people use them pretty much interchangeably.