JavaScript banana meme — explained

What is this sorcery?!

If you are a JavaScript developer, there is a chance you have seen this piece of code before. It is quite popular in programming memes groups and in the comments section you might see phrases like “JS is a terrible programming language” or “I have no clue what is going on here”. In this article, I will give a detailed explanation of the banana meme, so that you will be able to fully understand it.

The essential parts are the following:

1. Operator type
2. Operator precedence
3. Operator behavior
4. Type conversion

Before we dive into the meme, I want to tackle a recurrent problem that I noticed, especially at new developers. I often see people that say “JS/PHP/C/etc. is terrible” just because of a meme. Please, do not judge a programming language by its memes. What matters when choosing a programming language is its usage, job market share, or popularity towards developers. Despite being constantly mocked, JavaScript is the top programming language in StackOverflow or GitHub surveys.

Is JS a bad programming language?

But still, you are looking at the above calculation (0.1 + 0.2) and you’re judging JavaScript. In fact, this is a floating-point calculation problem, that happens in multiple programming languages. I’m not saying that JavaScript is perfect, it was built in only 10 days, but it works according to some rules.

So, before blaming a programming language, make sure you understand its rules and how it works.

1. Operator type

You definitely noticed that there are lots of plus (+) operators in our code. Operators produce results and they expect a number of operands (values). There are 3 possibilities here:

1. Unary operators — Only one value is required in order to produce a result. The value is positioned to the right of the operator. A full list can be found on MDN.
2. Binary operators — Two values are required to produce a result. The operator is placed between the values. Those are the most common operators, and they can be categorized into arithmetic, relational, equality, etc.
3. Ternary operators — Three values are required to produce a result. There is only one operator of this kind, and it is called the conditional (ternary) operator.

Unary, binary and ternary operators

The interesting thing about the plus (+) operator is that it can be used both as a unary and binary operator, but with different behavior. We will see more about this later.

2. Operator precedence

We learned in school that some operations have higher priority. For example, multiplication takes precedence over addition. The same thing happens in programming. There are 19 levels of priority, 19 being the highest and 1 the lowest. Obviously, you do not have to learn those levels by heart, just check this table.

You can see that the unary plus has a higher precedence level (15) than binary plus (addition — 12). This means that instead of evaluating the operations from left to right, first, we evaluate the unary plus and then the binary one.

3. Operator behavior

After you figured out the type and the precedence of the operator, you have to evaluate the operation and generate a result. To correctly predict the result of the operation, you have to know the behavior of the operator. Some operators have a simple and predictable behavior, but others are more complex. For example, the equality operator has a whole algorithm in order to decide whether the comparison is true or false.

When talking about the plus operator, we have to figure out 2 different behaviors:

• Unary plus — Attempts to convert the value into a number, if it isn’t already.
• Binary plus — Produces the sum of numeric operands or string concatenation.

Unary and binary plus

4. Type conversion

Converting a type to another is not always intuitive. The first thing to know is that there are two types of conversion:

• Explicit conversion — The developer expresses the intention to convert a type to another. For example, Number(value) is an explicit conversion of a value to a numeric type.
• Implicit conversion — Values are being converted automatically. This happens when using a variety of operators, including the plus sign operators (both unary and binary).

After we know that a conversion is happening, we have to figure out what the result would be. Converting a string that only contains a digit to a number is pretty intuitive, but what if you want to convert a letter to a number? You can see some examples of numeric conversion on this page.

What is essential to understand for our example is what happens when you try to convert a string to a number. If the string can not be converted to a number, the result is NaN, which means not a number.

Converting a string to a number

Assemble our knowledge

Now let’s evaluate the banana example step by step.

First, we have to evaluate the expression between the parenthesis. We have 4 plus sign operators.

Let’s evaluate those plus signs!

The first thing we realize is that the plus operator can be either unary or binary. How can we differentiate between them? The unary plus has a value on its right side and does not have a value on its left side. In our example, the third plus sign has a value on its right, but on its left has another plus sign, which is an operator, not a value. So, the third plus operator is unary. Therefore, in our expression, we have three binary plus operators and one unary.

The next thing is precedence. Which operator is executed first? The unary plus.

Now we need to interpret the behavior of the unary plus. It will try to convert the string “a” to a number. The result would be NaN.

Evaluating the unary plus

The tricky part has passed. Now we have 3 binary plus operators, executed from left to right.

The first operator concatenates two strings (“b” and “a”), generating a new one (“ba”).

When concatenating a string with NaN, NaN is implicitly converted to a string, and then concatenated with the other string. So the second operator will concatenate string “ba” with NaN, generating the string “baNaN”.

The last plus operator concatenates again two strings. “baNaN” concatenated with “a” generates “baNaNa”.

You can see the evolution of the operations in the picture below.

Successively evaluating operators

The last part is the most simple. toLowerCase is a method that applies to strings in JavaScript and transforms all letters into lowercase ones.

Conclusion

Let’s look again at our example. Does it still look that much intimidating?

Same picture, different knowledge

I’m not saying that everything is super simple right now, but if you know how operators and type conversion work, it becomes more logical and less magical.

I hope you enjoyed this article and maybe learned something new! If you have any other memes or weird JavaScript code that you would like me to explain, please send it to me at razvan.cirlugea@gmail.com.

For more web development content, follow me on Twitter.

Also, if you would like to learn more about advanced JavaScript concepts, check this amazing course.