There are certain aspects of js that can really fry your brain if you don't know about them. Some of these are automatic semi-colon insertion and implicit coercion of variables. Even though coercion is one of the basic things that make js so easy to use, it can sometimes be frustrating
as well. And while we might be able to do away with ASI, this is not the case for coercion.
This is a simple tool that tries to shows you step by step what happens when you compare two built-in types of js. It does not show you the outcome, but only which conversion steps are happening. I will leave the converting up to you. (In all fairness, adding that would make the app quite a bit more complex than I wanted it to be, so I left it out :))
The rules of coercion can be found in the Abstract Equality Comparison Algorithm
(or check my own
;)). They are actually quite simple...
First of all, in strict
comparison (===), two values never
compare equal if they are not of the same type. Having said that... The following rules apply to normal comparison (==).
are always considered equal to their selves and each other. Anything else compared to
will always eventually evaluate to
. In most cases, comparison to
entails no conversion and immediately returns
(regardless of the "always" mentions below).
When comparing a boolean to a non-boolean, the boolean is always converted to number.
When comparing a non-number to a number, the non-number will be converted to a number. So whenever you compare a non-number, non-boolean to a boolean, the other value will eventually be converted to a number.
When comparing non-objects to objects, the objects are converted to primitives, always without a hint. This means that the
methods of the object are called. If they return a primitive (non-object), that return value is used. For the comparison algorithm, since the hint to
is never given,
is checked first. If that doesn't exist or produce a primitive then
is checked. If neither exist or neither produce a primitive, an error will be thrown.
When comparing an object to a string, the object is converted to a primitive.
When comparing an object to an object, the comparison only returns true if both objects are in fact the same. So
new String("x") == new String("x")
Anyways, there are only a hand-full of primitives in js so making this tool was not that difficult. The tool will automatically fill in the correct return value for
when you select it. If you want to test a custom object you can simply select Object. Obviously, these methods are unused for primitives.
I had fun making this. Been wanting to do so for a while. I'm planning on a few more tools to help give new js programmers more insight to what's going on in the language. No ETA though, I'm hellish busy.
So you can find the tool here
Hope it helps you!