Type Conversion in JavaScript

In the previous lesson, we learned about the different data types. Now let’s see how JavaScript converts values from one type to another.

🔄 What is Type Conversion?

Type conversion means changing a value from one type to another, such as turning the text "42" into the number 42.

There are two kinds:

1. Explicit conversion ✋ - you convert the value yourself, on purpose
2. Implicit conversion 🤖 - JavaScript converts the value automatically

✋ Explicit Conversion

You convert values yourself using built-in functions. This is the clearest and safest way to change a type.

Here it is in code:

const age = Number("25"); // string "25" becomes number 25
const score = String(100); // number 100 becomes string "100"
const isActive = Boolean(1); // number 1 becomes true

console.log(age, score, isActive); // 25 "100" true

Let’s walk through each conversion:

• Number("25") takes the text "25" and returns the actual number 25, which we store in age.
• String(100) takes the number 100 and returns the text "100", which we store in score.
• Boolean(1) turns the number 1 into the boolean true, which we store in isActive.
• console.log prints all three results side by side: 25 "100" true.

🤖 Implicit Conversion (Type Coercion)

Sometimes JavaScript converts types automatically. This is called type coercion, and it often happens with the + operator and comparisons.

console.log("5" + 1); // "51"  → number 1 becomes a string, then joins
console.log("5" - 1); // 4     → string "5" becomes a number, then subtracts
console.log("5" * 2); // 10    → string "5" becomes a number

Here is what each line does:

• "5" + 1 sees a string on the left, so the number 1 becomes the text "1" and the two join into "51".
• "5" - 1 uses subtraction, so the string "5" becomes the number 5 and the result is 4.
• "5" * 2 uses multiplication, so the string "5" becomes the number 5 and the result is 10.

The + operator is special: if either side is a string, it joins them as text. The other math operators (-, *, /) always convert to numbers.

🔢 Converting Strings to Numbers

Besides Number(), you can use parseInt and parseFloat to pull numbers out of text.

console.log(Number("42")); // 42
console.log(parseInt("42px")); // 42  → reads the number, ignores "px"
console.log(parseFloat("3.14")); // 3.14
console.log(Number("hello")); // NaN → "hello" is not a number

Let’s compare these four approaches:

• Number("42") converts the clean text "42" into the number 42.
• parseInt("42px") reads digits from the front, stops at "px", and returns the whole number 42.
• parseFloat("3.14") reads a decimal number from the text and returns 3.14.
• Number("hello") fails because "hello" is not a number, so it returns NaN.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ Type conversion changes a value from one type to another
• ✅ Explicit conversion uses String(), Number(), and Boolean()
• ✅ Implicit conversion (coercion) happens automatically, often with +
• ✅ + joins text if either side is a string; other math operators convert to numbers
• ✅ parseInt and parseFloat read numbers out of text, and NaN means “Not a Number”

🚀 What’s Next?

You have finished the JavaScript Basics module. Next, we will start working with operators, beginning with arithmetic. Let’s continue to Arithmetic Operators.