From the course: Learn JavaScript: Write Modern Code with JavaScript ESNext

Learn about equality in JavaScript - JavaScript Tutorial

From the course: Learn JavaScript: Write Modern Code with JavaScript ESNext

Start my 1-month free trial Buy for my team

Learn about equality in JavaScript

“

- Before we begin looking at some of JavaScript's control structures, such as if statements, there's a topic that's an important precursor, and that's the topic of equality in JavaScript. When we were talking about the basic data types in JavaScript, you may or may not have noticed that there were a few times when I demonstrated equality between two pieces of data using the triple equal sign. So as I said, this is actually a very important topic in JavaScript, and one that I'm 100% sure you'll be asked about in every technical JavaScript interview you'll ever have. You see, equality isn't quite as straightforward in JavaScript as you might think. While learning JavaScript, there are plenty of times when you might find yourself thinking, "Wait a minute, those two things are definitely equal, "but JavaScript says they aren't." Or the other way around, of course, but I wouldn't worry too much about it. After working with JavaScript for a while, you really get used to these things. But that being said, I've made my best effort here to provide all the information that I wish I'd had way back when I was first learning JavaScript and equality. So let's start off our discussion of equality with the fact that in JavaScript, there are actually two different equality operators, the double equals and the triple equals. Now, take a good, hard look at these, because this has to be the number-one error that I encounter with JavaScript beginners, they use the wrong equal sign. Usually what happens is that a developer will use the double equals instead of the triple equals. And this is a problem, because first of all, it won't give us a syntax error, because double equals is valid syntax in JavaScript, and second of all, the two different equality operators produce the same results some of the time, so you might not even notice you've done something wrong until later on when it's harder to track down. So what's the difference between the double and triple equals, and why is it so important? Well, when comparing two basic values, numbers, or strings, for example, with the triple equals, it checks to see if the two values are of the same type, as well as whether the two values are equal to each other. And this is a very important point. If two values are not the same data type, they won't be treated as equal by the triple equals operator. And this here is the most important difference between the triple equals and double equals, because the double equals compares two values without regard to their types. This means that if we use the double equals to compare a number, and that same number as a string, it'll return true. And likewise if we compare a regular number and that same number as a BigInt. Now here's where things get a little weird. These two examples we see here are pretty straightforward and seem to make sense. However, there are a pretty big number of situations where we get some somewhat unexpected results. For example, if we use the double equals to compare the number zero with the string zero, we get true, which we'd expect, but zero double equals an empty string as well, and it's also equal to an empty array. And just when you think you're starting to see a pattern, zero double equal null or undefined is not true, but false. There are also some other unexpected things that can happen with the double equals. For example, the strings true and false aren't double equals equal to the Boolean values true and false. So the point of all of this is that you should really just stick to using the triple equals operator, which behaves more like you'd expect an equals operator to work in any other programming language. And in cases where you think you might have a reason to use the double equals, there's almost always a more predictable way to go about it. For example, if for some reason you have to check if a number is equal to a number in string form, what you could do instead is use the triple equals and explicitly convert the string to an actual number, using what's called the number constructor like this. So that about covers the main differences between the double and triple equal signs. Now that we've come to an agreement to always use the triple equal sign, there's another thing that we need to talk about, and that's comparing objects and arrays in JavaScript. From time to time, I'll see programmers, even some who have already been working with JavaScript for a little while, try to use the triple equal sign to compare objects to see if they have the same properties. However, this doesn't really work as you'd expect. Both the double and triple equals operators will always return false for two distinct objects or arrays. The exception to this, of course, is if they're not actually two distinct objects, but just two references to the same object. Just like we saw with symbols, two references to the same object will return true in JavaScript. So since the double and triple equal signs won't work for comparing objects in arrays in JavaScript, if we want to actually check that two objects are equal in the sense that they both have the same keys and values, we have to actually check each of these keys and values individually to see if they're the same between the two objects. This is called checking for deep equality, and if two objects are equal in this way, we say that they're deep equal. Now, checking all the keys and values for two objects might sound like a little bit of a pain, and it definitely would be if we had to do it all manually. But fortunately, there are much easier ways, none of which we're quite ready to look at at this point. For now, just remember that two distinct objects will never be considered equal by the regular equality operators in JavaScript. And as I already said, this equality stuff goes for arrays, too. Two arrays will only be considered equal by the double and triple equals operators if they're not actually two distinct arrays, but references to the same array.

Contents