Type Conversion and Type Coercion

JavaScript allows you to change one data type into another. This is called type conversion. JavaScript can also change data types automatically without prompting. This automatic behavior is called type coercion.

Understanding these two concepts is essential because many beginners encounter confusing errors or unexpected outputs when working with numbers and strings. By learning this chapter properly, you will avoid many common mistakes.

What Is Type Conversion?

Type conversion refers to manually converting one data type to another.

Examples:

• Number ? String

• String ? Number

• Boolean ? Number

• String ? Boolean

JavaScript provides built-in functions for conversion.

Converting to Number

Use Number() to convert a value into a number.

let num1 = Number("25");
let num2 = Number("10.5");

console.log(num1);
console.log(num2);

Output:

25
10.5

If the string cannot be converted, it becomes NaN (Not a Number):

let x = Number("Hello");
console.log(x);

Output:

NaN

Converting to String

Use String() to convert a value into a string.

let age = 20;
let str = String(age);

console.log(str);
console.log(typeof str);

Output:

20
string

Converting to Boolean

Use Boolean() to convert values into true or false.

console.log(Boolean(1));     // true
console.log(Boolean(0));     // false
console.log(Boolean("Hi"));  // true
console.log(Boolean(""));    // false

Output:

true
false
true
false

Important:

• Empty string ? false

• Zero ? false

• Null ? false

• Undefined ? false

• Anything else ? true

What Is Type Coercion?

Type coercion happens automatically when JavaScript changes the data type behind the scenes.

This mostly happens when you use operators like:

• +

• -

• *

• /

• ==

Let’s look at examples.

String + Number (Coercion)

When using +, if one value is a string, JavaScript converts the other value to a string.

console.log("10" + 5);
console.log(5 + "10");

Output:

105
510

This is string joining, not addition.

Number + Number (Normal Addition)

console.log(10 + 5);

Output:

15

String - Number

JavaScript converts the string into a number:

console.log("10" - 2);

Output:

8

Why?

Because - does NOT join strings.

So JavaScript tries to convert "10" to a number.

Unexpected Behavior Examples

console.log("5" * "2");
console.log("100" / "10");

Output:

10
10

Both strings are auto-converted into numbers.

Boolean Coercion Examples

console.log(true + 1);
console.log(false + 5);

Output:

2
5

Because:

• true ? 1

• false ? 0

Comparison Coercion (== vs ===)

== allows coercion.
=== does NOT allow coercion.

Example:

console.log(5 == "5");
console.log(5 === "5");

Output:

true
false

• 5 == "5" ? converts string to number

• 5 === "5" ? compares without conversion

Always prefer === for accurate comparisons.

Example Program With Output

let num = "20";
let convertedNum = Number(num);

console.log("Converted Number:", convertedNum);
console.log("Type:", typeof convertedNum);

let total = num + 5;           // coercion: "20" + 5 ? "205"
let total2 = convertedNum + 5; // addition: 20 + 5 ? 25

console.log("Result with Coercion:", total);
console.log("Result with Conversion:", total2);

Output:

Converted Number: 20
Type: number
Result with Coercion: 205
Result with Conversion: 25

This shows that coercion and conversion yield very different outcomes.

Why This Chapter Is Important

Many JavaScript bugs arise from type coercion.

Understanding these concepts will help you:

• Write correct calculations

• Avoid unexpected outputs

• Debug your code faster

• Use proper comparisons (===)

• Build strong logic for future programs

This provides a foundation for subsequent topics such as conditions, loops, and functions.

Practice Task (Do It Yourself)

1. Convert the string number "40" into a number and add 20.

2. Try "40" - 20 and observe the output.

3. Convert true and false into numbers.

4. Compare "15" and 15 using both the == and === operators.