The essential parts are the following:
- Operator type
- Operator precedence
- Operator behavior
- Type conversion
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:
- 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.
- 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.
- 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.
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 21 levels of priority, 21 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 (17) than binary plus (addition — 14). 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.
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.
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.
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.
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.
Let’s look again at our example. Does it still look that much intimidating?
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.
For more web development content, follow me on Twitter.