DEV Community

Cover image for The Type Coercion Puzzle That Makes JavaScript Look Weird
Ebenezer
Ebenezer

Posted on

The Type Coercion Puzzle That Makes JavaScript Look Weird

Yesterday we looked at a small JavaScript puzzle involving the mysterious this keyword.

JavaScript Interview Puzzle #2

we explored small small pieces of code that looked innocent but behaved in surprising ways.
The goal of these puzzles is not to memorize tricks.The goal is to slowly understand how JavaScript actually thinks.
Today’s puzzle is one of the most famous JavaScript interview questions.
It looks so simple that many developers answer it confidently.
And then… JavaScript does something unexpected.
Let’s see if you can predict it.


The Puzzle

Look carefully at the following code.

Before scrolling down, try to guess the output.

console.log("5" + 3);
console.log("5" - 3);
console.log(true + true);
console.log(false + 5);
Enter fullscreen mode Exit fullscreen mode

Take a moment.

What do you think JavaScript will print?

Many beginners assume the outputs should be something like this:

8
2
2
5
Enter fullscreen mode Exit fullscreen mode

But that is only partially correct.

The real output is:

53
2
2
5
Enter fullscreen mode Exit fullscreen mode

Wait.

Why did the first one become 53 instead of 8?
Did JavaScript forget how to do math?
Not exactly.
JavaScript is doing something called Type Coercion.


Let’s Pause for a Simple Story

Imagine you have two friends.

One friend speaks numbers.

The other friend speaks words.

Now imagine someone asks them to combine what they have.

Friend 1 says:

"I have the number 5."

Friend 2 says:

"I have the number 3."

If both are speaking numbers, the result is simple.

5 + 3 = 8

But imagine the first friend suddenly says:

"I have the word '5'."

Now the situation changes.

When someone mixes words and numbers, JavaScript decides:

"Okay… we are now speaking in words."

So instead of adding numbers, it joins them together like text.

"5" + 3

becomes

"53"

This is exactly what happens in our puzzle.


Understanding the First Line

Let’s examine this line.

console.log("5" + 3);
Enter fullscreen mode Exit fullscreen mode

Notice something important.

The 5 is inside quotes.

"5"
Enter fullscreen mode Exit fullscreen mode

That means it is not a number anymore.

It is a string (text).

When JavaScript sees the + operator with a string, it assumes we want string concatenation.

So instead of doing math, it combines the text.

"5" + 3 → "53"
Enter fullscreen mode Exit fullscreen mode

The Second Line

Now look at this one.

console.log("5" - 3);
Enter fullscreen mode Exit fullscreen mode

Why didn’t this become "53"?

Why did it become 2?

Because the minus operator cannot work with text.

Subtraction only makes sense with numbers.

So JavaScript automatically converts the string "5" into a number.

Then it performs the math.

5 - 3 = 2
Enter fullscreen mode Exit fullscreen mode

The Third Line

Now let’s look at something interesting.

console.log(true + true);
Enter fullscreen mode Exit fullscreen mode

What should this be?

JavaScript converts boolean values to numbers when doing math.

true = 1
false = 0
Enter fullscreen mode Exit fullscreen mode

So the calculation becomes:

1 + 1 = 2
Enter fullscreen mode Exit fullscreen mode

That is why the output is:

2
Enter fullscreen mode Exit fullscreen mode

The Fourth Line

Finally, we have this.

console.log(false + 5);
Enter fullscreen mode Exit fullscreen mode

Again JavaScript converts the boolean value.

false = 0
Enter fullscreen mode Exit fullscreen mode

Now the calculation becomes:

0 + 5 = 5
Enter fullscreen mode Exit fullscreen mode

So the output is:

5
Enter fullscreen mode Exit fullscreen mode

Why JavaScript Does This

JavaScript was designed to be flexible.
Sometimes that flexibility creates confusing behavior.
When different types appear together, JavaScript tries to automatically convert them so the operation can continue.

This automatic conversion is called:

Type Coercion

It is one of the most important concepts in JavaScript.


Why Interviewers Love This Question

This puzzle tests whether developers understand:

• JavaScript data types
• Type coercion rules
• Operator behavior

Many developers memorize syntax.

But interviewers want to see whether you understand how the language behaves internally.

Questions like this reveal that understanding very quickly.


A Slightly Trickier Example

Try predicting the result of this code.

console.log("10" + 2 + 3);
console.log("10" - 2 - 3);
Enter fullscreen mode Exit fullscreen mode

Think about it before running the code.

Does JavaScript perform math?
Or does it combine text?
Understanding this puzzle will make the answer obvious.


A Simple Rule to Remember

When working with the + operator in JavaScript:

If one value is a string, JavaScript usually switches to string mode.

But operators like -, *, and / force JavaScript to use numbers.

That small rule explains most type coercion behavior.


Final Thought

JavaScript is often described as a language full of surprises.

But most of those surprises disappear once you understand its rules.

Type coercion is one of those rules.

Once you recognize how JavaScript converts values automatically, puzzles like this become easy to predict.

And more importantly, you avoid bugs in real projects.


Your Turn

Without running the code:

What do you think this prints?

console.log("10" + 2 + 3);
console.log("10" - 2 - 3);
Enter fullscreen mode Exit fullscreen mode

Write your guess in the comments before testing it.

Tomorrow we will explore Puzzle #3 in this JavaScript interview puzzle series — another tiny piece of code that behaves in a very surprising way.

See you tomorrow.

Top comments (1)

Collapse
 
j_d_bhayani_9 profile image
Jenis Bhayani

1023
5