Why ‘Hello’ + 1 + 2 Is Not the Same as 1 + 2 + ‘Hello’ in JavaScript

I recently stumbled upon this oddly interesting JavaScript string concatenation behavior while experimenting with string concatenation — and it reminded me why programming can sometimes feel like a puzzle with its own logic.

If you’ve ever written:

console.log('Hello' + 1 + 2);
console.log(1 + 2 + 'Hello');

You might be surprised to see two very different results:

Hello12
3Hello

At first glance, this seems confusing — both have the same elements: a string and two numbers. But JavaScript string concatenation doesn’t treat them equally because of how type coercion and operator order work.

Understanding JavaScript’s Type Coercion

JavaScript automatically converts values between types when needed — a process known as type coercion.

The + operator in JavaScript is special. It can perform both addition and string concatenation depending on the context.

• When JavaScript encounters 'Hello' + 1, it converts 1 into a string → 'Hello1'
• Then 'Hello1' + 2 becomes 'Hello12'

But when the numbers come first:

• 1 + 2 is a numeric addition → 3
• Then 3 + 'Hello' converts the number into a string → '3Hello'

So, the evaluation order changes everything.

If you want to read a deeper explanation of this behavior, Mozilla’s official documentation on JavaScript Type Conversion explains it well.

A Quick Visual Summary

It’s not a bug — it’s how JavaScript reads and processes the expression, from left to right.

Why This Matters in Real Code

This kind of implicit conversion can cause subtle bugs, especially when concatenating strings and numbers dynamically, like in UI rendering or API responses.

For example, when formatting output:

let score = 10;
console.log('Your score: ' + score + 5);

You might expect Your score: 15 — but you’ll actually get Your score: 105.

A safer way is to explicitly convert values:

console.log('Your score: ' + (score + 5));

Related Insights and Similar Programming Oddities

Interestingly, small quirks like this aren’t exclusive to JavaScript.
When I was exploring new database technologies like FaunaDB and SurrealDB, I found similar “unexpected” design choices that feel counterintuitive at first but make sense once you understand the context.

And just like how I explored on-device AI models recently, this discovery reminded me that many innovations — and even bugs — start from exploring how systems interpret data differently than we expect.

Even in tools like Excel, subtle logic differences matter. I’ve written before about conditional formatting automation in Excel, which behaves differently depending on how the formula is structured — a small detail that can completely change the result, much like our JavaScript example here.

Final Thoughts

At first, I thought this 'Hello' + 1 + 2 vs 1 + 2 + 'Hello' thing was just another quirky JavaScript meme — but after looking deeper, it actually reflects one of the core principles of the language: flexibility with a trade-off in predictability.

If you’re learning or writing JavaScript, always remember to use parentheses to make your intention clear. It’s a small habit that can save hours of debugging.