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.
Did you know…
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.
Undefined?
Here’s a good one for your next Zoom Happy Hour cocktail party. Did you know that ‘undefined’ is actually NOT a reserved keyword in JavaScript even though it has a special meaning. For example:
let coolVariable
alert( coolVariable == undefined) //evaluates true
So far, so good.
But…
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”
Number.MIN_VALUE > 0 // true
Here’s a great question for some evil interviewer to dig up.
Why does the expression MIN_VALUE > 0 evaluate to true?
It’s because the MIN_VALUE property is the number closest to 0, not the most negative number, that JavaScript can represent. MIN_VALUE has a value of approximately 5e-324 .
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.
HTML Collection vs Array
Talking about evil interview questions, consider the following HTML. We want to use the DOM to grab all the “p” tags:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
const myCollection = document.getElementsByTagName("p");
</script>
</body>
</html>
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().
Funny Comparisons
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!
Donny
Top comments (0)