Why does 5 + '5' produce '55' in JavaScript? A simple look at type coercion.

What happens when a number meets a string in JavaScript? The little puzzle 5 + '5' is a perfect starting point. If you’ve looked at this kind of question, you know the multiple choices can be a trap. The right answer is "55" — and the reason sits right in how JavaScript handles types and the plus operator.

Let me explain the mechanics in plain terms, but with enough sparkle to keep it memorable. JavaScript has a feature called type coercion. In many situations, the engine will quietly convert values from one type to another so it can perform an operation. That sounds simple, but it’s one of those quirks that can surprise you if you don’t keep track of what types you’re dealing with.

The plus operator isn’t just a number adder. It has two possible jobs: numeric addition and string concatenation. Which job gets picked depends on the operands you give it. That’s where the “aha” moment usually happens.

Here’s the core rule, in a friendly line you can remember: if either operand is a string, JavaScript treats the whole operation as string concatenation. It converts the other operand to a string, then sticks the two strings together.

Let’s walk through a few quick examples so you can see the pattern clearly:

• 5 + 5 → 10. Both are numbers, so we get numeric addition.

• '5' + 5 → '55'. Here, a string is present, so the number 5 gets turned into the string '5', and the two strings are concatenated.

• 5 + '5' → '55'. Same logic as above, just in the opposite order.

• '5' + '5' → '55'. Both are strings, so it’s pure concatenation.

That last example is a neat reminder: the operation isn’t about math with numbers in these cases; it’s about strings being joined together.

Why does this matter beyond a single quiz question? Because in real apps you often juggle values that come from users, forms, or APIs. If a user types a number into a form field, that value is a string. If you then try to add it to another number, you’ll get the string-concatenation result rather than a true sum. Suddenly a simple input can produce string like '101' when you expected 11.

Let’s tie this back to the idea of type coercion with a bit more context. There are two flavors you’ll see a lot:

• Implicit coercion: JavaScript makes a guess for you without you asking. It’s convenient, but it can lead to surprising results if you’re not mindful of the types involved.

• Explicit conversion: you deliberately convert a value to a desired type with something like Number('5') or parseInt('5', 10). This approach is more predictable and easier to maintain over time.

In the case of 5 + '5', the engine is doing an implicit move toward strings because of the presence of a string. If you want to ensure numeric addition, you can force the numbers to stay as numbers before the operation.

A few practical patterns to keep handy

• When you expect numbers but might get strings, convert first:

• const a = Number(x); // x could be a string like '5'

• const b = Number(y);

• const sum = a + b;

• If you’re intentional about mixing strings and numbers in a display, you can decide to concatenate or to format:

• const display = 'Result: ' + (a + b); // uses concatenation for the final string

• const numericSum = Number(a) + Number(b); // keeps math separate from presentation

• If you’re comparing values, prefer strict equality (===) to avoid surprises from coercion:

• 5 === '5' // false, because types differ

• 5 == '5' // true, because coercion happens with loose equality

A quick diagnostic you can run in your console

• Try console.log(5 + '5'); It will print "55".

• Then try console.log(5 + 5); It prints 10.

• And console.log('5' - 2); It prints 3 because the minus operator coerces the string to a number.

• Finally, console.log('5' + 2); It prints '52' for the same reason the + operator becomes concatenation when a string is involved.

If you’re new to this, you might wonder how this gets taught in a typical coding environment you’ll encounter in programs that place a strong emphasis on JavaScript fundamentals. The truth is, this is one of those core ideas that pops up again and again as you build more complex apps. You’ll see it when you parse data from APIs, when you validate inputs, or when you create UI components that join numbers and text for display.

Real-world intuition you can lean on

• User inputs come as strings: Even numbers typed into a form are strings. Think about a price field or a quantity field. If you add those values directly to another numeric value, you could end up with concatenation instead of arithmetic, which is usually not what you want.

• Data coming from APIs isn’t guaranteed to be the type you expect: It might be a number in some places and a string in others. Type checks help keep behavior predictable.

• Display vs calculation: You might do arithmetic in one part of your code and formatting in another. Keeping those concerns separate helps you stay on the right side of type confusion.

A few friendly reminders to keep your code clear

• Use strict equality (===) most of the time. It reduces the risk that a type mismatch slips in unnoticed.

• Normalize data at the edges: when you read input or API data, convert to the type you intend to use downstream. That way, the rest of your code can rely on consistent types.

• Prefer explicit conversions for clarity: Number('42') or parseInt('42', 10) are explicit signals that you expect a number, not a string.

• Use template literals for building strings when you’re combining text with numbers, but be mindful of whether you’re aiming for numeric operations first or string output.

A few related ideas that are worth knowing (without getting too tangled)

• The plus operator isn’t the only way strings can creep into numeric calculations. Subtract, multiply, and divide will coerce strings to numbers when possible. For instance, '6' * '3' yields 18. That’s still coercion, but it’s numeric. The difference with + is the string path is tempting because it leads to concatenation instead of arithmetic.

• JavaScript’s type system isn’t strictly typed. It’s flexible in a way that makes some things easy and others a bit slippery. If you’re building reliable software, cultivate a habit of thinking in terms of types first.

• Debugging tips: if you’re unsure what a value is at a given point, log both typeof value and value itself. For example, console.log(typeof value, value); That tiny check can save you hours of confusion.

A lightweight mental model you can carry around

Think of numbers and strings as two lanes on a highway. When the plus sign comes along, the rules decide which lane to use. If you see a string in one lane, the engine tends to merge everything into the string lane. If both lanes are numeric, you get a clean arithmetic trip. If you want arithmetic with data that could be strings, confirm the types first or convert them yourself.

Why this matters for learners who are exploring JavaScript in earnest

Because JavaScript is such a flexible language, you’ll encounter a lot of scenarios where you’re tempted to rely on the engine to “just figure it out.” It’s tempting because it keeps code short. But short can bite back when the data landscape shifts—like when you fetch numbers from an API or accept user input. The 5 + '5' moment is a friendly reminder that behind the scenes, types have power, and the way you write your code can either honor that power or ignore it at your own risk.

If you’re building toward a broader set of skills, this kind of nuance matters. It trains your sense for when to let JavaScript be convenient and when to pin down behavior so it stays predictable as your project grows. The more you see these patterns, the less often you’ll be surprised by those little edge cases that pop up in real-life code.

A few final takeaways

• The correct answer to the classic question is "55" because of type coercion and the way the + operator handles strings.

• Always be mindful of the types you’re combining. When in doubt, convert explicitly.

• Use debugging habits that surface type information early, so you don’t chase a string down a rabbit hole later.

• In the bigger picture, this topic sits at the heart of writing robust JavaScript—balancing flexibility with clarity, so your code behaves the way you intend.

If you’re curious to see more examples or want to try similar patterns in a sandbox, fire up your browser’s developer tools and experiment. Type a few expressions, compare the results, and notice how small changes in the inputs shift the output in predictable ways. It’s a hands-on way to internalize what can otherwise feel like a playful, tricky puzzle.

In the end, the moment when 5 meets '5' and outputs "55" isn’t just about a trivia question. It’s a doorway into how JavaScript thinks about data, interaction, and reliability. And once you’ve got that doorway open, you’ll have a sturdier footing for exploring the broader landscape of modern web development.