Javascript Quirkiness with Equality

Image for post
Image for post

When I was first learning to code, I was completely self-taught, using tutorials and videos that I found online, as well as, challenging myself to solve coding problems to expand my knowledge. Now the main question that I had to ask myself was, which language did I want to start learning. I researched for a good while to narrow down my list, and finally, decided to start teaching myself Javascript. The thing that I didn't know at the time though was that Javascript can be quite quirky, here’s something that I wish I would have known when I started.

When I first learned about comparison in JavaScript I was shown that it was done with the === operator. I thought to myself, “Ok cool, no problem that’s easy to remember”. Then later on down the road I ran across the == operator, being completely self taught I didn’t think too much about it, I figured it was just a short-hand method and did the exact same as the === operator. So to save you the trouble that I ran into (someone actually having to point out to me that they were different) I’d like to explain how they work. So == is our equality operator and === is our strict equality operator. The equality operator will perform comparisons and will attempt to promote the two sides into the same datatype. So…

Image for post
Image for post

returns true, as the equality operator coerces the string “10” into the number 10. However, if we use our strict equality…

Image for post
Image for post

…returns false, as the number 10 is not the same as the string “10”. This is something that we need to be aware of because depending on which equality operator we are using and the datatypes of our comparisons we could introduce bugs to our code. We can also get this…

Image for post
Image for post

…which is weird, but let’s break it down:

First off, we know that…

Image for post
Image for post

…because the equality operator coerces the string “0” into the number 0 and they are equal.

Next up…

Image for post
Image for post

…returns true because our equality operator really tries hard to coerce our two comparisons into the same type. In this case, an empty array can use the toString method to covert into an empty string, “”. Next, it wants to convert the empty string into a number using the Number constructor, so we essentially get this…

Image for post
Image for post

… and 0 == 0.

For our third step…

Image for post
Image for post

…basically in this case, since neither side is a number, the only way that the equality operator can compare both is by using booleans. The string “0” is not one of the eight falsy values so it evaluates to true. Now our empty array [] is also not a falsy value, however, it does not evaluate to true, it actually evaluates to false, and JAVASCRIPT DOES NOT TELL US WHY!!!

Image for post
Image for post

So we end up with true == false which returns false.

Essentially, this is where we end up, equality in Javascript can be quirky and the best way that we can try to prevent bugs in our code is to try to avoid the animal that is the regular equality operator and stick to our old friend the strict equality operator, ===. This way we can know for sure that “1” is not the same as 1.

Computer Support Tech turned Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store