The Abstract Equality Comparison Operator, a.k.a. == in JavaScript is some of the "weirder" things the language has to offer.

Simply take a look at the examples and you'll be like "WTF?!".

But we can make sense of all this, and you'll see that you can follow along!

🧵👇
1️⃣ There is an algorithm behind it

Whenever you use the == operator, there is actually an algorithm behind it that determines the result of the comparison.

This algorithm has its place within the ECMA spec (the spec behind JavaScript) and can be found in chapter 7.2.15.
It's actually pretty lengthy and takes a lot of space, but it covers all possible inputs and provides a concise way to determine the output of any comparison.

You can see an excerpt from it below which I processed a little so you can read it better.
All of this may now seem a little intimidating, but that's okay. You'll see that there is enough logic to it to be understandable.

But before we go in, you first have to learn about some functions that are referenced within this algorithm.
2️⃣ Supporting Functions

✅ Type(x)

This is not the typeof operator, but a runtime function that returns exactly the type of a value at hand.

Type(null) is actually Null, for example, and not object.
✅ ToNumber

This is also a runtime function. It basically works the same as calling Number(x).

✅ StringToBigInt

This is basically ToNumber with a few additions which we won't cover now.
✅ ToPrimitive

This is the runtime function to convert any complex object into a primitive.

There is once again a whole algorithm to it and it goes as follows (see the image below).
3️⃣ Making Sense Of It With Examples

You now have 'a lot of algorithm' at hand, but it may still be pretty difficult to actually apply that knowledge. This is where examples come in. They usually help a lot in understanding more complex things.
Example 1:

Let's start with 1 == "1" as a light entry.

You can find a guided solution in the image below.
Example 2:

Let's continue our examples with true == 0.

You can find a guided solution in the image below.
Example 3:

Let's go one step further and use one object in our comparison, so we'll go with "" == [].

You can find a guided solution in the image below.
Example 4:

Let's try [] == ![] now. It's one of the weirder comparisons which usually makes people raise at least an eyebrow.

You can find a guided solution in the image below.
4️⃣ What's next?

You can come up with your own examples now. Simply follow the algorithms and you'll surely get the right answer every time. But you can of course ensure that you are right by simply logging the expression in your browser's dev tool ...
... and then compare your result against what your browser says is right.

With a little more practice, you'll surely always know the answer to some JavaScript quizzes in the future!
You can follow @oliverjumpertz.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
Those who think consciousness raising & movement building are disconnected, or even a distraction from electoral politics have not paid attention to the history of social change.In this thread, we
Read more
The 2020s will be known as the Remote Work decadeA few predictions of what is likely to emerge[ a thread ] Third Space: Office and Working from Home will
Read more
1/29: Have you ever had a concept explained to you that helps frame complex issues you’ve been wrestling with and opens your eyes to new possibilities? A concept that I
Read more
By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.