Type Casting and Type Coercion

Imagine you fill an online form and type your age as 21. You might think the website gets the number 21, but it actually gets the text "21". Everything typed in a form arrives as text.

Now if the website tries to add 1 to your age:

Instead of 22, we get "211"! The text and the number were joined instead of added.

To fix problems like this, we need to change a value from one type to another. This is called Type Casting, also known as Type Conversion.

What Is Type Casting?

Type casting means changing a value from one data type to another.

For example:

• Text to number: "50" → 50
• Number to text: 100 → "100"
• Any value to true/false: "hello" → true

In JavaScript, type casting happens in two ways:

Think of it like changing money at an airport:

• Implicit: The shop converts your dollars into rupees automatically, without asking you.
• Explicit: You go to the counter and ask them to convert the money yourself.

Part 1: Implicit Conversion (Automatic)

Sometimes JavaScript sees two different types together and converts one of them on its own so it can complete the task.

With +, text wins

If one side is a string, the + sign joins the values as text.

Point to remember: + with a string always gives a string.

With -, *, /, numbers win

These signs only work with numbers, so JavaScript converts the text into a number.

Point to remember: Maths signs other than + convert text into numbers.

When the text is not a number

If the text cannot become a number, the result is NaN (Not a Number).

Booleans in maths

In maths, true becomes 1 and false becomes 0.

Why is implicit conversion risky?

Automatic conversion can give unexpected results and create bugs that are hard to find. That's why it is better to convert values yourself, which is explicit conversion.

Part 2: Explicit Conversion (Manual)

Here, you clearly tell JavaScript which type you want. There are three common conversions.

1. Converting to a Number

Use Number(), parseInt(), or parseFloat().

Number() converts the whole value

Key points:

• The whole text must be a valid number, otherwise you get NaN.
• An empty string "" becomes 0.
• true becomes 1 and false becomes 0.

parseInt() reads a whole number from the start

Key points:

• It reads from the left and stops when it finds a non-number character.
• It removes the decimal part.
• It is useful for values like "25px" or "100kg".

parseFloat() reads a decimal number from the start

Key points:

• It works like parseInt(), but keeps the decimal part.

Now let us fix our form example

2. Converting to a String

Use String() or .toString().

Key points:

• String() works with every value, including null and undefined.
• .toString() gives an error on null and undefined, so String() is safer.
• Real example: showing a price with the rupee symbol:

3. Converting to a Boolean

Use Boolean(). The result is always true or false.

To understand this, you need to know about falsy and truthy values.

Falsy values: only these 8 become false

Truthy values: everything else becomes true

Easy trick: Just remember the falsy list. Anything not on the list is truthy.

Real example: checking if a user typed their name:

== vs ===: Conversion While Comparing

This is a very common place where implicit conversion happens.

Golden rule: Always use ===. It is safer and avoids surprises.

Quick Summary Table

Key Takeaways

• Type casting means changing a value from one data type to another.
• Implicit conversion is done automatically by JavaScript and can give surprising results, like "5" + 2 = "52".
• Explicit conversion is done by you using Number(), String(), and Boolean(). This is the safer way.
• There are only 8 falsy values. Everything else is truthy.
• Always use === instead of ==, to avoid automatic type conversion while comparing.