The Curious Case of Banana in Javascript

The Curious Case of Banana in Javascript

Uncovering the secrets of JavaScript
Ferenc AlmasiLast updated 2021 November 11 • Read time 3 min read
Everyone knows, that JavaScript is a weird language, where things often don’t make any sense. Let's see why they happen and what they can teach us.
  • twitter
  • facebook
JavaScript

Everyone knows, that JavaScript is a weird language, where things often don’t make any sense. When you first started out, you had to first understand why 

JavaScript is a single-threaded, high-level, often just-in-time compiled, multi-paradigm, prototype-based object-oriented dynamic type language. — Wikipedia

And now you may want to understand why it has seemingly meaningless rules where

Copied to clipboard!
NaN === NaN; // is false
nan.js

and

Copied to clipboard!
[] == ![]; // is true
array.js

At first glance, they seem counterintuitive. How is NaN not equals to NaN, and how is an array equals to not an array? There are countless other examples where JavaScript doesn’t seem to do the things we want it to do. Take the following as an example; the whole point of this article:

trying to write out bacteria to the console
What will be the return value of the above call?

Seems like we are trying to write out “bacteria” to the console by concatenating strings together. But in fact, this is what we get back:

Getting banana in the console

Type Conversion in JavaScript

So why does it happen? The answer lies in type conversion. JavaScript is weakly typed in nature. This enables us to use implicit type conversion. Take the following for example:

Copied to clipboard! Playground
// This will return "12" as 1 will be converted into a string
1 + "2"
typeof (1 + "2") // Will return "string"

// This will return 12 as "12" will be converted into a number
"12" * 1
typeof ("12" * 1) // Will return "number"
typeConversion.js

Even though we did not specify we wanted to convert the string/number into the other format, JavaScript did it for us implicitly. The same exact thing happens in “banana”.


Understanding Why Banana Happens

In the middle of the string, we try to convert the letters into numbers with the plus sign. This results in “cteri” converted to NaN — Not A Number.

If you leave out the call to toLowerCase, you can clearly see that we have “baNaNa”.

Getting back the string without the toLowerCase

Then the separate strings connected together into one with the other plus signs and everything is turned to lowercase to hide the culprit. You could have everything in place of “cteri”. As long as it cannot be converted into a number, you’ll get bananas back.

Copied to clipboard! Playground
// returns "banana"
('b' + 'a' + + 'cteri' + 'a').toLowerCase();

// returns "banana"
('b' + 'a' + + 'llerin' + 'a').toLowerCase();

// returns "banana"
('b' + 'a' + + 'a-z' + 'a').toLowerCase();

// returns "ba123a"
('b' + 'a' + + '123' + 'a').toLowerCase();
banana.js
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Conclusion

While JavaScript can sometimes — or even oftentimes — behave strangely, by digging deeper into its core and see its inner workings, we can better understand why certain things happen the way they do. This also gives us the power to avoid introducing potential bugs in our applications and be more cautious when writing logic that involves type conversion — or any logic for that matter.

If you are interested in more curious cases of JavaScript, I highly recommend going through the list of wftjs, which inspired this article. You can find some really interesting code examples. With them, you will better understand JavaScript and it will make your knowledge about the language deeper.

What was your biggest revelation about JavaScript that is often unknown? Let us know in the comments! Thank you for taking to read through, happy coding!

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.