I went over some cool JS oddities in Part I of this series. But there were so many weird quirks of JS, I couldn’t get my favs all in one article. Hence, you get a Part II.
In JS if you try to add these two floats: 0.1 and 0.2 you will NOT get 0.3 ! Instead, the answer turns out to be
more like 0.30000000000000004
Why is this?
Well, it has to do with a little problem called machine precision. As you may already know, when computing integers or floats from our familiar Base 10, our computer has to convert those numbers to Base 2 or binary. And so Base 10 numbers like 0.3 and 0.2 don’t fit exactly into a Base 2 paradigm. Think of translating a work of literature from one language to another. Something is bound to get lost in the translation. That’s the idea.
let coolVariable alert( coolVariable == undefined) //evaluates true
So far, so good.
undefined = “Oh no, I’m not defined!” let anotherCoolVariable alert ( anotherCoolVariable == undefined) // evaluates false!
In the second example, where we compare ‘anotherCoolVariable with ‘undefined’, JS says, “Wait! ‘anotherCoolVaraible’ is undefined. The ‘undefined’ on the right side of the ‘==’ sign is the label for the string, ‘Oh no, I’m not defined’. The two are definitely not equivalent”
Here’s a great question for some evil interviewer to dig up.
Why does the expression MIN_VALUE > 0 evaluate to true?
On the other hand, if we’re talking about the smallest value, then that would be Number.NEGATIVE_INFINITY, although negative infinity isn’t really a value in the strictest sense.
Talking about evil interview questions, consider the following HTML. We want to use the DOM to grab all the “p” tags:
In between the “script” tags, we’ve called the “getElementsByTagName” method on “document” to collect all the elements in our HTML that are “p” tags. We’ve then assigned the result to constant “myCollection”
Here’s the evil interview question, “ In what kind of data type will those ‘p’ tags be held?
If you’re tempted to say, “an array” I’m afraid you won’t get the job! The data type looks like an array, but is in fact not an array. It’s called an HTMLCollection.
An HTML collection can be looped through and you can refer to each of its elements with a number. That much is similar to an array. However, on an HTMLCollection you cannot
use array methods such as valueOf(), pop(), push(), or join().
Lastly, we can get tripped up when trying to compare 3 numbers:
1 < 2 < 3; // -> true 3 > 2 > 1; // -> false
The first line above is what we’d expect. 1 is less than 2 and 2 is less than three. So it’s true.
But what about the second line?
What we have to understand is how JS reads the code:
1 < 2 < 3; // 1 < 2 -> true true < 3; // true -> 1 1 < 3; // -> true 3 > 2 > 1; // 3 > 2 -> true true > 1; // true -> 1 1 > 1; // -> false
In the first example: JS says, “1 is less than 2. That is true. So my next task is to evaluate ‘true < 3’ . Oops, I have to coerce the boolean ‘true’ to 1 and then evaluate 1 < 3. Yep, now I can spit out ‘true’.
In the second example: JS goes on, “Hmmm. 3 > 2. Yes, that evaluates to ‘true.’ I’m on a tear!!! Now the next part of the expression is true > 1. Well, I have to coerce true to a ‘1’ again and now I’m looking at 1>1. Nope, it’s a ‘false’! Gimme another!
I hope you’ve had as much fun as me during our little tour of JS’s weird parts. Do come again, and don’t forget to have a look at the gift shop right at the exit!
Keep on coding out your dreams!