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.
So I wanted to create a tool to help you discover why a certain comparison results true or false, even if it doesn't seem to be logical at all. To that end I present you with the
javascript coercion tool.
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
mode comparison (===), two values
never compare equal if they are not of the same type. Having said that... The following rules apply to normal comparison (==).
undefined and
null are always considered equal to their selves and each other. Anything else compared to
undefined or
null will always eventually evaluate to
false. In most cases, comparison to
undefined or
null entails no conversion and immediately returns
false (regardless of the "always" mentions below).
When comparing a boolean to a non-boolean, the boolean is always converted to number.
true becomes 1,
false becomes 0.
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
toString and
valueOf 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
[[DefaultValue]] is never given,
valueOf is checked first. If that doesn't exist or produce a primitive then
toString 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") is
false.
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
valueOf 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!