JavaScript String Concatenation

Why This Question Matters

If you've spent more than five minutes with JavaScript, you've probably run into a situation where the language did something... weird. This specific snippet is a classic "gotcha" that pops up in junior interviews and certification exams because it tests your understanding of Type Coercion.

In most strictly typed languages, trying to add a number to a string would throw a compiler error. JavaScript, however, tries to be "helpful." Instead of crashing, it guesses what you meant and converts the types on the fly. This is called implicit coercion. While it sounds convenient, it's often the source of those elusive bugs that keep you up until 2 AM debugging a production crash.

Understanding the Code

Let's look at the two lines:

console.log(2 + "2")
console.log(2 - "2")

At first glance, you might think, "It's just math, the answer is 4 and 0." But JavaScript handles the + operator and the - operator very differently.

The Plus Operator (+)
In JavaScript, the + sign wears two hats: it performs addition, but it also performs string concatenation. When JavaScript sees a string and a number being added together, it prioritizes the string.

Internally, the engine says: *"I see a string here. I can't mathematically add a number to a string, so I'll just convert the number into a string and glue them together."*

So, 2 + "2" becomes "2" + "2", which results in the string "22".

The Minus Operator (-)
The minus sign is different. It only has one job: subtraction. It doesn't have a "string" mode.

When the engine sees 2 - "2", it realizes that subtraction makes no sense for strings. To make the operation work, it coerces the string "2" into the number 2. Now it's performing a standard math operation: 2 - 2, which results in 0.

Finding the Correct Answer

The correct answer is Option A: "22" and 0.

Here is why the other common guesses are wrong:

Common Mistakes Developers Make

The biggest mistake beginners make is assuming JavaScript is consistent. It isn't. Coercion rules change depending on which operator you use.

Another trap is the "Truthiness" confusion. Developers often assume that because a string like "0" exists, it will behave like the number 0. In reality, an empty string "" is falsy, but any string with content—even "0"—is truthy.

Also, watch out for the == vs === operators.

If you rely on implicit coercion in your code, you're essentially letting the language guess your intentions. That's a dangerous game to play in a large codebase.

Real-World Usage

You'll see this most often when dealing with DOM inputs.

Every value you get from an HTML input field—even if the input type is number—comes back to JavaScript as a string. If you try to calculate a total for a shopping cart without converting those values, you'll end up with a nightmare:

const price = "19.99"; // Value from input field
const shipping = 5;
const total = price + shipping; 
console.log(total); // "19.995" instead of 24.99

In professional engineering, we avoid this by being explicit. Don't let JS guess. Use Number(), parseInt(), or the unary plus operator (+) to force the conversion.

const total = Number(price) + shipping; // 24.99

Key Takeaways