‘BANANA’ with JavaScript

Understanding WTF moments of JavaScript

Mahdhi Rezvi
Dec 5, 2019 · 4 min read
Photo by Mike Dorner on Unsplash

Introduction

WTF Moments

Moment 1 — BANANA

Tweet by ShadowCheetah

This tweet became quite a trend a few months back, 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

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

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

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

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 == floating point numbers. Instead use if (abs(x - y) < toleranceValue) { ... } .


JavaScript in Plain English

Learn the web's most important programming language.

Mahdhi Rezvi

Written by

http://bit.ly/31DaMkc — Writer at JSIPE, Better Programming & Level Up Coding❤️ Undergrad at UOM ❤️

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade