Introduction
To be honest, JS is an awkward language. It has a lot of weird parts that might even end up making professionals scratch their heads. In this article, we will be trying to understand why and how these WTF moments occur.
WTF Moments
Moment 1 - BANANA
Tweet by ShadowCheetah
This tweet became quite a trend a few months back, and it had me puzzled too. And I had to do some digging to find out what was happening.
Explanation
The first 'b' and 'a' are simply strings being added as 'ba'. After the second 'a', you see a double plus sign(+); the first one is for concatenation like the previous plus sign. But the second plus sign is called the unary operator, which simply transforms the string into a number if it isn't already. Since 'a' cannot be converted to a number, it is converted to 'NaN'. The final 'a' is added to this 'baNaN' string, and the final 'baNaNa' string is made. And to finish it up, the toLowerCase function is used, and the output 'banana' is received.
Like WTF…
Moment 2 - Adding arrays
Screenshot by Author
This one looks like a simple statement but can be quite confusing if one does not know how JavaScript works under the hood.
Explanation
The arrays are first converted into strings - "1,2,3" and "4,5,6". Then these strings are concatenated, resulting in "1,2,34,5,6".
"1,2,3" + "4,5,6" //"1,2,34,5,6"
Moment 3 - parseInt( ) function
Screenshot by Author
This is the trickiest I've come across. It took me some time to figure it out.
All of us have been using the parseInt function in various languages, including JavaScript, for quite some time. Only some of us are aware that the parseInt function has a second optional parameter for "radix". This is simply the base number you need the value converted into.
Explanation
In the above example, null is converted to the string "null" and then converted to a number with base 24. The letter "n" is added to the numeral in base 24. The value of the letter 'n' in this number system is 23. Hence the result is printed as 23.
Base 24 number system
Note: parseInt will continue parsing character-by-character until it hits a character it doesn't know.
Something like console.log(parseInt('unll',24)) //'unll' is a random word will return 'NaN' as the character 'u' is unknown to the base 24 number system.
Moment 4 - floating point precision
Screenshot by Author
Well, come on. It cannot get simpler than this. How can this be false?
This issue with floating-point numbers is not new to programming languages. In fact, it occurs in every language that uses floating-point math.
Explanation
console.log(0.1 + 0.2); // 0.30000000000000004
StackOverflow had a great explanation for this scenario. The constants 0.2 and 0.3 in your program will also be approximations to their true values. It happens that the closest double to 0.2 is larger than the rational number 0.2 but that the closest double to 0.3 is smaller than the rational number 0.3. The sum of 0.1 and 0.2 winds up being larger than the rational number 0.3 and hence disagreeing with the constant in your code.
Note: You should always avoid === or == with floating-point numbers. Instead, use if (abs(x - y) < toleranceValue) { ... } .
Conclusion
These are a handful of instances where you go WTF with JavaScript. Although JavaScript is weird, it is fun to learn and work with. To learn more about JS, please refer to the references section, where I have included a few sources for your reference.
Knowledge is free. It's up to you to get ahold of it.
That is the end of this article. Happy learning.
References