JavaScript Type Conversion: String, Number and Boolean

What you will learn

JavaScript works with different types of values such as strings, numbers, and booleans. Sometimes you need to convert a value from one type to another before using it.

In this lesson, you will learn explicit type conversion using:

• String()
• Number()
• Boolean()
• parseInt()
• parseFloat()

You will also learn how these methods behave with common values and how to avoid conversion mistakes.

---

What is type conversion?

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

For example, suppose you have a number:

let price = 500;

The value is a number.

You can explicitly convert it into a string:

let price = 500;

let result = String(price);

console.log(result);

Now result contains:

"500"

The value changed from a number to a string.

So:

Number
   ↓
String

This process is called type conversion.

---

Why do we need type conversion?

You will frequently receive values in a type that is different from what you need.

For example, values entered into an HTML form are commonly received as strings.

Suppose a user enters:

25

You may want to use that value as a number for calculation.

If you have:

const age = "25";

and you need a number, you can write:

const age = "25";

const numericAge = Number(age);

console.log(numericAge);

Now numericAge is a number.

Type conversion becomes especially useful when working with:

• Form input
• User data
• API responses
• Local storage
• Calculations
• Conditions
• Data validation

---

Checking the type of a value

Before learning conversion methods, remember the typeof operator.

It tells you the type of a value.

console.log(typeof "Hello");
console.log(typeof 100);
console.log(typeof true);

Output:

string
number
boolean

For example:

const value = "100";

console.log(typeof value);

Output:

string

Now convert it:

const value = "100";

const numberValue = Number(value);

console.log(typeof numberValue);

Output:

number

This is a useful way to check whether your conversion worked as expected.

---

Converting values to String

JavaScript provides the String() function to explicitly convert a value into a string.

Syntax:

String(value)

For example:

const number = 100;

const text = String(number);

console.log(text);
console.log(typeof text);

Output:

100
string

The number 100 has been converted into the string "100".

---

Converting numbers to strings

console.log(String(100));
console.log(String(500));
console.log(String(99.99));

All of these produce strings.

You can verify this using typeof:

const value = String(500);

console.log(typeof value);

Output:

string

---

Converting booleans to strings

String() can also convert booleans:

console.log(String(true));
console.log(String(false));

Output:

"true"
"false"

Notice that these are now strings.

const value = String(true);

console.log(typeof value);

Output:

string

---

Converting null and undefined to strings

You can also explicitly convert these values:

console.log(String(null));
console.log(String(undefined));

Output:

"null"
"undefined"

The resulting values are strings.

---

Converting an array to a string

String() can also convert an array:

const fruits = ["Apple", "Banana", "Mango"];

console.log(String(fruits));

Output:

Apple,Banana,Mango

The result is a string.

console.log(typeof String(fruits));

Output:

string

For now, focus on the main idea:

String(value) explicitly converts a value into a string.

---

Converting values to Number

The Number() function explicitly converts a value into a number.

Syntax:

Number(value)

For example:

const value = "100";

const numberValue = Number(value);

console.log(numberValue);
console.log(typeof numberValue);

Output:

100
number

---

Converting numeric strings

This is one of the most common uses of Number().

console.log(Number("100"));
console.log(Number("250"));
console.log(Number("99.99"));

Output:

100
250
99.99

The strings are converted into numbers.

---

Converting an empty string

Consider:

console.log(Number(""));

Output:

0

An empty string converts to 0 when passed to Number().

This is something to remember because it may sometimes produce a result you did not expect.

---

Converting booleans to numbers

Number() can also convert booleans.

console.log(Number(true));
console.log(Number(false));

Output:

1
0

So:

true  → 1
false → 0

---

Invalid numeric strings

What happens if the string does not contain a valid number?

console.log(Number("Hello"));

Output:

NaN

NaN means:

Not a Number

It represents a value that could not be converted into a valid number.

For example:

console.log(Number("JavaScript"));
console.log(Number("abc"));

Both produce:

NaN

You can check for NaN using:

console.log(Number.isNaN(Number("Hello")));

Output:

true

---

Numbers with extra characters

Consider:

console.log(Number("100px"));

Output:

NaN

Number() expects the entire string to represent a valid numeric value.

This is where parseInt() and parseFloat() can behave differently.

---

Converting values to Boolean

The Boolean() function explicitly converts a value into either:

true

or:

false

Syntax:

Boolean(value)

For example:

console.log(Boolean(1));
console.log(Boolean(0));

Output:

true
false

---

Common values that become false

Some values convert to false when passed to Boolean().

Important examples include:

console.log(Boolean(false));
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));

All of these produce:

false

These values are commonly called falsy values.

You will study truthy and falsy values in more detail in the conditions section.

---

Common values that become true

Many other values convert to true.

For example:

console.log(Boolean(true));
console.log(Boolean(1));
console.log(Boolean("Hello"));
console.log(Boolean("0"));
console.log(Boolean([]));
console.log(Boolean({}));

These produce:

true
true
true
true
true
true

Notice this important example:

Boolean("0")

returns:

true

because "0" is a non-empty string.

It is not the number 0.

---

Empty string vs non-empty string

Compare:

console.log(Boolean(""));
console.log(Boolean("Hello"));
console.log(Boolean("0"));

Output:

false
true
true

The important rule is:

An empty string is falsy, while a non-empty string is truthy.

---

parseInt()

parseInt() is used to convert a value into an integer by reading the beginning of a string.

Syntax:

parseInt(value)

For example:

console.log(parseInt("100"));

Output:

100

---

Parsing a decimal string

Consider:

console.log(parseInt("25.75"));

Output:

25

parseInt() returns the integer part.

It does not preserve the decimal portion.

"25.75"
   ↓
parseInt()
   ↓
25

---

Parsing strings containing extra characters

This is where parseInt() behaves differently from Number().

Consider:

console.log(parseInt("100px"));

Output:

100

parseInt() reads the numeric portion from the beginning of the string and stops when it reaches a character that does not belong to the number.

For example:

console.log(parseInt("50kg"));
console.log(parseInt("25px"));
console.log(parseInt("100items"));

Output:

50
25
100

---

parseInt() with invalid input

If the string does not start with a number:

console.log(parseInt("px100"));

Output:

NaN

Because there is no valid integer at the beginning of the string.

---

parseFloat()

parseFloat() is similar to parseInt(), but it can preserve the decimal part.

Syntax:

parseFloat(value)

For example:

console.log(parseFloat("25.75"));

Output:

25.75

---

Parsing decimal values

console.log(parseFloat("10.5"));
console.log(parseFloat("99.99"));
console.log(parseFloat("3.14159"));

Output:

10.5
99.99
3.14159

Unlike parseInt(), parseFloat() keeps the decimal portion.

---

Parsing values with extra characters

parseFloat() can also read the numeric portion from the beginning of a string.

console.log(parseFloat("25.75px"));

Output:

25.75

Another example:

console.log(parseFloat("99.99kg"));

Output:

99.99

If the string does not begin with a valid number:

console.log(parseFloat("px25.75"));

Output:

NaN

---

Number() vs parseInt() vs parseFloat()

This is one of the most important comparisons in this lesson.

Consider:

const value = "25.75px";

console.log(Number(value));
console.log(parseInt(value));
console.log(parseFloat(value));

Output:

NaN
25
25.75

Why?

Number()

Number("25.75px")

returns:

NaN

because the entire string is not a valid number.

parseInt()

parseInt("25.75px")

returns:

25

because it reads the integer portion from the beginning.

parseFloat()

parseFloat("25.75px")

returns:

25.75

because it reads the decimal number from the beginning.

---

Quick comparison

Value	Number()	parseInt()	parseFloat()
"100"	100	100	100
"25.75"	25.75	25	25.75
"25px"	NaN	25	25
"25.75px"	NaN	25	25.75
"Hello"	NaN	NaN	NaN
""	0	NaN	NaN

The main idea:

Number()
    ↓
Convert the complete value to a number

parseInt()
    ↓
Read an integer from the beginning

parseFloat()
    ↓
Read a decimal number from the beginning

---

When should you use each one?

Use String()

When you explicitly need a string.

const id = 101;

const textId = String(id);

Use Number()

When you expect the complete value to represent a valid number.

const age = Number("25");

This is commonly useful when converting user input into a number.

Use parseInt()

When you specifically need an integer from the beginning of a string.

const value = parseInt("25px");

Result:

25

Use parseFloat()

When you need a decimal number from the beginning of a string.

const value = parseFloat("25.75px");

Result:

25.75

Use Boolean()

When you explicitly want to convert a value into true or false.

const value = Boolean("Hello");

console.log(value);

Output:

true

---

Converting form input

Type conversion becomes especially useful when working with forms.

Suppose you have:

<input id="age" type="text" value="25">

You can read its value using JavaScript:

const ageInput = document.getElementById("age").value;

console.log(ageInput);
console.log(typeof ageInput);

The value is a string.

Even though the user entered:

25

the value you receive is:

"25"

If you need it as a number:

const age = Number(ageInput);

console.log(age);
console.log(typeof age);

Now the type is:

number

This is a very common real-world use of type conversion.

---

A common calculation mistake

Suppose you have two values:

const price = "100";
const quantity = "2";

If you need numeric calculations, explicitly convert them:

const numericPrice = Number(price);
const numericQuantity = Number(quantity);

const total = numericPrice * numericQuantity;

console.log(total);

Output:

200

This makes your intention clear.

---

Common mistakes

1. Assuming Number() can parse "100px"

This does not work:

Number("100px");

Result:

NaN

If you intentionally need to extract the numeric portion from the beginning:

parseInt("100px");

returns:

100

---

2. Using parseInt() when decimals are important

This:

parseInt("19.99");

returns:

19

If you need the decimal portion:

parseFloat("19.99");

returns:

19.99

---

3. Thinking "0" is falsy

Be careful:

Boolean(0);

returns:

false

But:

Boolean("0");

returns:

true

Why?

Because "0" is a non-empty string.

---

4. Assuming invalid conversion always throws an error

For example:

const value = Number("Hello");

console.log(value);

This produces:

NaN

It does not automatically throw a JavaScript error.

When working with numeric conversion, remember to handle invalid values when necessary.

---

5. Forgetting to check the result

When converting external or user-provided data, do not blindly assume conversion succeeded.

For example:

const age = Number(userInput);

if (Number.isNaN(age)) {
  console.log("Please enter a valid number.");
}

This is safer than assuming every input is numeric.

---

6. Confusing conversion with formatting

These are different things.

For example:

const price = Number("99.50");

converts a string into a number.

But:

price.toFixed(2);

produces a formatted string.

You will learn number formatting separately.

---

Practice

Practice 1 — Convert numbers to strings

Create three numbers:

const age = 25;
const marks = 85;
const price = 499;

Convert each one to a string using String().

Print both the value and its type.

---

Practice 2 — Convert strings to numbers

Create:

const a = "100";
const b = "250";
const c = "99.99";

Convert them using Number().

Check the result using typeof.

---

Practice 3 — Practice Boolean conversion

Predict the result before running the code:

console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(""));
console.log(Boolean("Hello"));
console.log(Boolean("0"));
console.log(Boolean(null));
console.log(Boolean(undefined));

Then run the code and verify your answers.

---

Practice 4 — Practice parseInt()

Find the output of:

console.log(parseInt("100px"));
console.log(parseInt("25.75"));
console.log(parseInt("500items"));
console.log(parseInt("hello100"));

Write down your predictions before running the code.

---

Practice 5 — Practice parseFloat()

Find the output:

console.log(parseFloat("19.99"));
console.log(parseFloat("25.75px"));
console.log(parseFloat("100.50kg"));
console.log(parseFloat("hello10.5"));

---

Practice 6 — Compare conversion methods

Run:

const value = "45.75px";

console.log("Number:", Number(value));
console.log("parseInt:", parseInt(value));
console.log("parseFloat:", parseFloat(value));

Explain why the three results are different.

---

Practice 7 — Convert form input

Create an input:

<input id="age" type="text" placeholder="Enter your age">
<button id="btn">Check Age</button>

When the button is clicked:

1. Read the input value.
2. Convert it to a number.
3. Print the converted value.
4. Print its type in the Console.

---

Practice 8 — Validate numeric input

Create an input for a person’s age.

When the user clicks the button:

• Convert the input using Number().
• If the result is NaN, print "Please enter a valid number."
• Otherwise, print "Your age is: " followed by the number.

---

Practice 9 — Mini Challenge: Price calculator

Create two inputs:

Price
Quantity

When the user clicks Calculate:

1. Read both values.
2. Convert them to numbers.
3. Calculate:

price × quantity

4. Display the total on the page.

---

Practice 10 — Challenge: Extract CSS values

Suppose you receive these values:

const width = "250px";
const height = "150.5px";

Use the appropriate conversion functions to get:

250
150.5

Then print their types.

---

Recap

• Type conversion means changing a value from one data type to another.
• typeof can be used to check the type of a value.
• String(value) explicitly converts a value to a string.
• Number(value) converts a value to a number when the complete value represents a valid number.
• Invalid numeric conversion using Number() commonly results in NaN.
• Boolean(value) converts a value to true or false.
• parseInt(value) extracts an integer from the beginning of a string.
• parseFloat(value) extracts a decimal number from the beginning of a string.
• Number("25px") produces NaN, while parseInt("25px") produces 25.
• parseInt("25.75") produces 25, while parseFloat("25.75") produces 25.75.
• An empty string converts to 0 with Number("").
• An empty string is falsy, while a non-empty string such as "0" is truthy.
• Explicit conversion is especially useful when working with form input and external data.
• Always consider invalid input when converting user-provided values.

Next: You will learn how JavaScript performs implicit type conversion (type coercion) and why expressions such as "10" + 5 and "10" - 5 produce different results.