Type coercion can be confusing if not well understood. Let's see how JavaScript converts (or coerces) around the + operator.
The split personality
Why do we get string the first time and a number the second time when in both case we are trying to do mathematical operations?
Well, JavaScript does not just do math, it looks at its operands and decides what needs to be done. So if we have just numbers like 5 + 3 // 8 then it's pretty straightforward, however if at least one operand is a string along with the + operator, then the number is converted to string and string concatenation is what JavaScript will do. It will convert the number 2 in the above example to string"2" and then performs "5" + "2" to give "52".
What about the second operation? here, JavaScript converts the string to number and performs a mathematical operation and returns 2. When we use mathematical operators, JavaScript performs arithmetic. However, if the + operator has at least one string operand, it performs string concatenation. Otherwise, it performs arithmetic.
Order matters!
JavaScript evaluates your operation from left to right. Hence if you do 1 + 2 + '3' first 1 + 2 is calculated resulting in 3. Then it evaluates 3 + '3', where we are adding the number 3 to the string '3'. Therefore the numbers get implicitly converted to string and gets concatenated with the other string to give '33'.
Notice in the second scenario we have the string first. '1' + 2 + 3 becomes '12' + 3 which returns '123'.
BaNaNa?!
Let's see another interesting example.
Why does "Ba" + + "test" +"a" evaluate to 'BaNaNa'? Let's break this down. Here we are trying to concatenate "Ba" with +"test". Adding the unary plus operator to string (+"a string") is one way you can explicitly convert a string to a number (the unary plus trick). So +"test" becomes NaN, resulting in "Ba" + "NaN" + "a" giving you "BaNaNa"🍌!
To recap, the + operator in JavaScript is overloaded — its behavior depends entirely on the types of its operands.
Understand the types, and you understand the result.
Happy learning! ✨
Top comments (6)
Great post Della! Really interesting examples, it was a fun read. Looking forward to what you learn next!
The BaNaNa example is my favorite JS quirk to show people who are new to the language haha. One thing worth mentioning — this is also why TypeScript exists. Once your codebase gets big enough, these implicit coercions become real bugs. I spent like 2 hours once debugging a form where an input value (string) was getting concatenated instead of added. Wrapping it in Number() fixed it instantly but man, those are frustrating to track down. Nice writeup, the left-to-right evaluation section is something a lot of tutorials skip over.
Haha yes, the BaNaNa example never fails 😄 Thanks for sharing that debugging story — those are the lessons that really stick.
Order of operations matter too.
"2" + 3 + 4 = "234"
..but..
2 + 3 + "4" = "54"
JavaScript’s + operator is tricky! The BaNaNa example makes type coercion fun😄
Some comments may only be visible to logged-in visitors. Sign in to view all comments.