JavaScript Type Conversion

JavaScript works with different types of data, including strings, numbers, booleans, objects, undefined, null, BigInt, and Symbol. When a program works with values of different types, JavaScript sometimes needs to convert one type into another.

For example, a value received from an HTML form is commonly represented as a string, even when the user enters a number. If you want to perform mathematical calculations with that value, you may need to convert it into a number.

const age = "25";

console.log(typeof age);

Output:

string

You can convert it into a number:

const age = Number("25");

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

Output:

25
number

This process is called type conversion.

JavaScript can perform conversions in two main ways. You can explicitly convert a value yourself, or JavaScript can automatically convert values when an operation requires another type.

In this tutorial, you will learn about string conversion, number conversion, boolean conversion, implicit and explicit type conversion, Number(), String(), Boolean(), parseInt(), parseFloat(), NaN, and Infinity.

What Is Type Conversion in JavaScript?

Type conversion is the process of changing a value from one data type to another.

For example, converting a number into a string:

const number = 100;

const text = String(number);

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

Output:

100
string

Here, the original number 100 has been converted into the string "100".

Type conversion is common when working with:

  • Form inputs
  • User-entered data
  • APIs
  • Calculations
  • URLs
  • Local storage
  • Databases
  • JSON data
  • Conditional expressions
  • String formatting

Image placement suggestion: Add a diagram here showing String → Number → Boolean with arrows representing conversion between JavaScript data types.

Type Conversion vs Type Coercion

The terms type conversion and type coercion are often used together, but there is an important distinction.

Type conversion generally refers to conversion that you intentionally perform.

const value = "100";

const number = Number(value);

You explicitly asked JavaScript to convert the string into a number.

Type coercion usually refers to JavaScript automatically converting a value during an operation.

const result = "100" - 20;

console.log(result);

Output:

80

JavaScript automatically converts "100" into a number so that subtraction can be performed.

A useful way to remember the difference is:

ConceptMeaningExample
Type conversionYou intentionally convert a valueNumber("100")
Type coercionJavaScript automatically converts a value"100" - 20

String Conversion

String conversion means converting a value into a string.

The most common explicit method is:

String()

For example:

const number = 100;

const text = String(number);

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

Output:

100
string

The value looks the same when printed, but its type has changed.

Converting Numbers to Strings

You can convert an integer into a string:

const number = 100;

console.log(String(number));

Output:

100

You can verify the type:

const number = 100;
const text = String(number);

console.log(typeof text);

Output:

string

Decimal numbers can also be converted:

const price = 99.99;

console.log(String(price));

Output:

99.99

Converting Booleans to Strings

const value = true;

const text = String(value);

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

Output:

true
string

The boolean true becomes the string "true".

The same applies to false:

console.log(String(false));

Output:

false

Converting null to a String

const value = null;

console.log(String(value));

Output:

null

The result is the string "null".

console.log(typeof String(null));

Output:

string

Converting undefined to a String

const value = undefined;

console.log(String(value));

Output:

undefined

The resulting value is the string "undefined".

Converting Arrays to Strings

Arrays can also be converted into strings.

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

console.log(String(fruits));

Output:

Apple,Banana,Orange

For arrays, this conversion is closely related to the array’s string representation.

If you need a particular format, methods such as join() are often clearer:

console.log(fruits.join(", "));

Output:

Apple, Banana, Orange

Converting Objects to Strings

An ordinary object converted using String() generally produces:

[object Object]

For example:

const user = {
    name: "John"
};

console.log(String(user));

Output:

[object Object]

If you need a useful text representation of an object, JSON.stringify() is often more appropriate:

console.log(JSON.stringify(user));

Output:

{"name":"John"}

Number Conversion

Number conversion means converting a value into a JavaScript number.

The most common explicit method is:

Number()

For example:

const value = "100";

const number = Number(value);

console.log(number);
console.log(typeof number);

Output:

100
number

Converting Numeric Strings to Numbers

A string containing a valid number can be converted using Number().

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

Output:

50

Decimal strings also work:

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

Output:

99.99

Negative numbers work as well:

console.log(Number("-25"));

Output:

-25

Converting an Empty String to a Number

This is an important behavior:

console.log(Number(""));

Output:

0

An empty string converts to zero with Number().

This behavior can matter when processing form values, so do not assume that an empty string becomes NaN.

Converting Whitespace Strings to Numbers

Strings containing only whitespace also convert to zero with Number().

console.log(Number("   "));

Output:

0

This is another reason to validate user input carefully before converting it.

Converting Boolean Values to Numbers

Boolean values can be converted into numbers.

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

Output:

1
0

JavaScript follows this rule:

BooleanNumber
true1
false0

Converting null to a Number

console.log(Number(null));

Output:

0

This is different from converting undefined.

Converting undefined to a Number

console.log(Number(undefined));

Output:

NaN

So:

Number(null)       → 0
Number(undefined)  → NaN

This difference is important when handling missing values.

Invalid Strings and Number Conversion

If a string cannot be converted into a valid number, Number() returns NaN.

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

Output:

NaN

Another example:

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

Output:

NaN

This happens because the entire string is not a valid numeric representation for Number().

Boolean Conversion

Boolean conversion converts a value into either true or false.

The explicit method is:

Boolean()

For example:

console.log(Boolean(1));

Output:

true

And:

console.log(Boolean(0));

Output:

false

Truthy and Falsy Values

JavaScript divides values into two broad categories when converting them to booleans:

  • Truthy values
  • Falsy values

A truthy value becomes true.

A falsy value becomes false.

Common falsy values include:

false
0
-0
0n
""
null
undefined
NaN

Almost every other value is truthy, including empty arrays and empty objects.

Boolean Conversion Table

ValueBoolean(value)
truetrue
falsefalse
1true
0false
-1true
""false
"Hello"true
"0"true
nullfalse
undefinedfalse
NaNfalse
[]true
{}true

The last two examples are especially important.

An empty array is truthy:

console.log(Boolean([]));

Output:

true

An empty object is also truthy:

console.log(Boolean({}));

Output:

true

Converting Strings to Booleans

A non-empty string is truthy.

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

Output:

true

Even the string "false" is truthy:

console.log(Boolean("false"));

Output:

true

This can surprise beginners because the string contains the word false, but it is still a non-empty string.

An empty string is falsy:

console.log(Boolean(""));

Output:

false

Converting Numbers to Booleans

Zero is falsy:

console.log(Boolean(0));

Output:

false

Non-zero numbers are truthy:

console.log(Boolean(10));
console.log(Boolean(-10));

Output:

true
true

Explicit Type Conversion

Explicit type conversion occurs when you intentionally tell JavaScript to convert a value.

Common functions include:

Number()
String()
Boolean()

For example:

const age = "25";

const numberAge = Number(age);

console.log(numberAge);

You explicitly requested the conversion.

Implicit Type Conversion

Implicit type conversion happens when JavaScript automatically converts values during an operation.

For example:

const result = "10" - 5;

console.log(result);

Output:

5

JavaScript automatically converts "10" into the number 10.

You did not explicitly call Number().

Implicit Conversion with the + Operator

The + operator behaves differently because it is used for both addition and string concatenation.

Consider:

const result = "10" + 5;

console.log(result);

Output:

105

JavaScript treats the operation as string concatenation.

The result is a string:

console.log(typeof result);

Output:

string

This is why the following two operations produce different results:

"10" + 5

and:

"10" - 5

The first produces:

105

while the second produces:

5

Implicit Conversion with Other Arithmetic Operators

Subtraction, multiplication, and division generally convert suitable string operands into numbers.

console.log("20" - 5);
console.log("20" * 2);
console.log("20" / 2);

Output:

15
40
10

JavaScript automatically converts the string "20" into a number for these operations.

Explicit Conversion with Number()

Instead of relying on implicit conversion, you can make the conversion clear:

const value = "20";

const number = Number(value);

console.log(number + 5);

Output:

25

This can make your code easier to understand because the conversion is visible.

The String() Function

The String() function converts a value into a string.

const number = 100;

const text = String(number);

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

Output:

100
string

Some common conversions include:

String(100);          // "100"
String(true);         // "true"
String(false);        // "false"
String(null);         // "null"
String(undefined);    // "undefined"

The Number() Function

The Number() function converts a value into a number when possible.

console.log(Number("100"));
console.log(Number("10.5"));
console.log(Number(true));
console.log(Number(false));

Output:

100
10.5
1
0

When conversion is not possible:

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

Output:

NaN

The Boolean() Function

The Boolean() function converts a value into true or false.

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

Output:

true
false
true
false

It is useful when you need to explicitly determine whether a value is truthy or falsy.

The parseInt() Function

parseInt() converts a string into an integer by reading the string from the beginning and stopping when it can no longer parse the number.

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

Output:

100

Decimal input is truncated:

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

Output:

100

This makes parseInt() different from Number().

console.log(Number("100.99"));
console.log(parseInt("100.99"));

Output:

100.99
100

parseInt() with Numeric Strings Containing Text

parseInt() can extract an integer from the beginning of a string when the initial characters form a valid number.

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

Output:

100

Compare this with:

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

Output:

NaN

This difference is important.

Number() expects the entire string to represent a valid number, while parseInt() parses an integer from the beginning of the string.

parseInt() and Decimal Values

parseInt() returns an integer.

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

Output:

25

It does not round the value to the nearest integer. It removes the fractional part during parsing.

Specifying the Radix with parseInt()

When using parseInt(), it is good practice to specify the radix when you know the expected number system.

For normal decimal numbers:

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

Output:

100

The second argument 10 tells JavaScript to interpret the number using the decimal system.

You may encounter other radices as well:

parseInt("1010", 2);

Output:

10

Here, "1010" is interpreted as a binary number.

The parseFloat() Function

parseFloat() parses a string and returns a floating-point number.

For example:

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

Output:

10.5

Unlike parseInt(), it preserves the decimal portion.

console.log(parseInt("10.50"));
console.log(parseFloat("10.50"));

Output:

10
10.5

parseFloat() with Text

Like parseInt(), parseFloat() can parse a valid number at the beginning of a string.

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

Output:

99.99

But:

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

returns:

NaN

Number() vs parseInt() vs parseFloat()

These functions are similar but serve different purposes.

FunctionExampleResult
Number("100")"100"100
Number("10.5")"10.5"10.5
parseInt("100.5", 10)"100.5"100
parseFloat("100.5")"100.5"100.5
Number("100px")"100px"NaN
parseInt("100px", 10)"100px"100
parseFloat("100.5px")"100.5px"100.5

A simple rule is:

  • Use Number() when you want the whole value to represent a valid number.
  • Use parseInt() when you specifically need an integer parsed from the beginning of a string.
  • Use parseFloat() when you specifically need a floating-point number parsed from the beginning of a string.

What Is NaN in JavaScript?

NaN stands for Not-a-Number.

It represents an invalid or undefined numeric result.

For example:

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

Output:

NaN

Another example:

console.log(0 / 0);

Output:

NaN

Although its name contains “Not-a-Number”, NaN belongs to JavaScript’s number type.

console.log(typeof NaN);

Output:

number

Checking for NaN

You should not normally check for NaN using:

value === NaN

This does not work as expected because NaN is not equal to itself.

console.log(NaN === NaN);

Output:

false

Instead, use:

Number.isNaN(value)

For example:

const value = Number("Hello");

console.log(Number.isNaN(value));

Output:

true

Global isNaN() vs Number.isNaN()

JavaScript also has a global isNaN() function.

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

Output:

true

However, the global isNaN() performs coercion before testing the result.

For example:

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

Output:

false

"100" is converted to a number first.

Number.isNaN() does not perform this coercion.

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

Output:

false

because the string "Hello" itself is not the NaN value.

For precise NaN checking, Number.isNaN() is generally clearer.

What Is Infinity in JavaScript?

Infinity represents a numeric value greater than every finite JavaScript number.

You can produce it by dividing a positive number by zero:

console.log(10 / 0);

Output:

Infinity

Negative division by zero produces:

console.log(-10 / 0);

Output:

-Infinity

Both values have the number type.

console.log(typeof Infinity);
console.log(typeof -Infinity);

Output:

number
number

Checking for Infinity

You can use:

Number.isFinite()

to determine whether a value is a finite number.

console.log(Number.isFinite(100));

Output:

true

But:

console.log(Number.isFinite(Infinity));

Output:

false

The same applies to -Infinity.

console.log(Number.isFinite(-Infinity));

Output:

false

Implicit Conversion in Comparisons

JavaScript can also perform type coercion when using loose equality.

For example:

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

Output:

true

JavaScript converts one of the values before comparing them.

However:

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

Output:

false

Strict equality does not perform this type conversion.

For predictable code, prefer strict equality:

===

and strict inequality:

!==

when you want both the value and type to match.

Implicit Conversion with Boolean Conditions

JavaScript automatically converts values to booleans when they are used in conditions.

const username = "John";

if (username) {
    console.log("Username exists.");
}

Output:

Username exists.

Because a non-empty string is truthy.

With an empty string:

const username = "";

if (username) {
    console.log("Username exists.");
} else {
    console.log("Username is empty.");
}

Output:

Username is empty.

Double NOT for Boolean Conversion

You may sometimes see:

!!

used to convert a value into a boolean.

For example:

console.log(!!"Hello");

Output:

true

And:

console.log(!!0);

Output:

false

The first ! converts the value to a boolean and reverses it. The second ! reverses it again.

Although Boolean(value) is often easier for beginners to read, !!value is common in JavaScript code.

Type Conversion with User Input

Type conversion is especially important when working with HTML forms.

Suppose you have an input:

<input id="age" type="number">

You might retrieve its value using:

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

console.log(typeof age);

The value is still typically a string.

If you want a number:

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

console.log(typeof age);

Now the value is a number if the input represents a valid numeric value.

This is one of the most practical reasons to understand type conversion.

Practical Example: Adding Two User Values

Suppose two values come from input fields:

const first = "10";
const second = "20";

console.log(first + second);

Output:

1020

This happens because both values are strings.

Convert them first:

const first = Number("10");
const second = Number("20");

console.log(first + second);

Output:

30

This is a common beginner mistake when working with form data.

Practical Example: Converting a Price

const price = "1499.99";

const numericPrice = Number(price);

console.log(numericPrice);
console.log(typeof numericPrice);

Output:

1499.99
number

You can now perform calculations:

const total = numericPrice + 500;

console.log(total);

Output:

1999.99

Practical Example: Checking a Numeric Input

function calculateTotal(value) {
    const number = Number(value);

    if (!Number.isFinite(number)) {
        console.log("Please enter a valid number.");
        return;
    }

    console.log(number * 2);
}

calculateTotal("50");

Output:

100

If the input is invalid:

calculateTotal("Hello");

Output:

Please enter a valid number.

This combines type conversion with number validation.

Practical Example: Parsing CSS Values

Suppose you receive a value such as:

250px

You can extract the numeric portion using parseInt():

const width = "250px";

const value = parseInt(width, 10);

console.log(value);

Output:

250

For a decimal value:

const width = "250.75px";

const value = parseFloat(width);

console.log(value);

Output:

250.75

This is one situation where parsing functions can be useful.

Practical Example: Converting a Boolean

Suppose a value needs to be treated as a boolean:

const value = "Hello";

const result = Boolean(value);

console.log(result);

Output:

true

For an empty value:

const value = "";

console.log(Boolean(value));

Output:

false

Common Type Conversion Mistakes

Mistaking "10" for 10

These values look similar but have different types.

const a = "10";
const b = 10;

console.log(typeof a);
console.log(typeof b);

Output:

string
number

Expecting + to Always Perform Addition

This produces string concatenation:

console.log("10" + 5);

Output:

105

Convert the string first:

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

Output:

15

Using parseInt() When Decimal Precision Is Required

parseInt("19.99", 10);

returns:

19

If you need the decimal value, use:

parseFloat("19.99");

or, when the entire string should be a valid numeric representation:

Number("19.99");

Checking NaN with ===

This does not work:

value === NaN

Use:

Number.isNaN(value)

instead.

Assuming "false" Is Falsy

This is truthy:

Boolean("false");

because "false" is a non-empty string.

Output:

true

Assuming Empty Arrays Are Falsy

This is also truthy:

Boolean([]);

Output:

true

The same applies to empty objects:

Boolean({});

Output:

true

Best Practices for Type Conversion

Use explicit conversion when it makes your intention clearer.

const age = Number(input);

Prefer strict equality when you do not want automatic coercion:

if (value === 10) {
    // ...
}

Use Number() when the entire string should represent a valid number.

Use parseInt() when you specifically need to parse an integer from the beginning of a string.

Use parseFloat() when you need to parse a decimal number from the beginning of a string.

Use Number.isNaN() when checking specifically for the NaN value.

Use Number.isFinite() when you need to ensure that a value is a finite number.

Be particularly careful with form inputs because their values are commonly represented as strings.

JavaScript Type Conversion Cheat Sheet

GoalRecommended CodeExample Result
Convert to stringString(value)String(100) → "100"
Convert to numberNumber(value)Number("100") → 100
Convert to booleanBoolean(value)Boolean(1) → true
Parse integerparseInt(value, 10)parseInt("10.5", 10) → 10
Parse decimalparseFloat(value)parseFloat("10.5") → 10.5
Check NaNNumber.isNaN(value)true / false
Check finite numberNumber.isFinite(value)true / false
Get typetypeof value"string"
Boolean shorthand!!value!!1 → true

Type Conversion Quick Reference

String Conversion

String(100);        // "100"
String(true);       // "true"
String(null);       // "null"
String(undefined);  // "undefined"

Number Conversion

Number("100");      // 100
Number("10.5");     // 10.5
Number(true);       // 1
Number(false);      // 0
Number(null);       // 0
Number("Hello");    // NaN

Boolean Conversion

Boolean(1);         // true
Boolean(0);         // false
Boolean("Hello");   // true
Boolean("");        // false
Boolean(null);      // false
Boolean(undefined); // false

Parsing

parseInt("100.50", 10);  // 100
parseFloat("100.50");    // 100.5

Special Numeric Values

Number("Hello");    // NaN
0 / 0;              // NaN
10 / 0;             // Infinity
-10 / 0;            // -Infinity

Frequently Asked Questions About JavaScript Type Conversion

What is type conversion in JavaScript?

Type conversion is the process of changing a value from one data type to another, such as converting a string into a number.

Number("100");

What is implicit type conversion?

Implicit type conversion occurs when JavaScript automatically converts a value during an operation.

console.log("10" - 5);

JavaScript converts "10" into a number automatically.

What is explicit type conversion?

Explicit type conversion occurs when you intentionally convert a value using a function or another conversion technique.

Number("10");
String(10);
Boolean(10);

What is the difference between Number() and parseInt()?

Number() attempts to convert the entire value into a number, while parseInt() parses an integer from the beginning of a string.

Number("10.5");          // 10.5
parseInt("10.5", 10);    // 10

What is the difference between parseInt() and parseFloat()?

parseInt() returns an integer, while parseFloat() can return a decimal number.

parseInt("25.75", 10);  // 25
parseFloat("25.75");    // 25.75

What does Number("Hello") return?

It returns:

NaN

because "Hello" cannot be converted into a valid number.

What does Number("") return?

It returns:

0

An empty string is converted to zero by Number().

What does Boolean("false") return?

It returns:

true

The string is non-empty, so it is truthy. The fact that it contains the word "false" does not make it the boolean value false.

What is NaN?

NaN means Not-a-Number and represents an invalid numeric result.

const result = Number("Hello");

console.log(result);

Output:

NaN

How do you check for NaN?

Use:

Number.isNaN(value);

rather than:

value === NaN;

What is Infinity in JavaScript?

Infinity represents an infinite numeric value.

console.log(10 / 0);

Output:

Infinity

How do you check whether a number is finite?

Use:

Number.isFinite(value);

For example:

console.log(Number.isFinite(100));
console.log(Number.isFinite(Infinity));

Output:

true
false

Why does "10" + 5 produce "105"?

The + operator can perform string concatenation. Because one operand is a string, JavaScript converts the number to a string and joins the two values.

"10" + 5

produces:

"105"

If you want addition, convert the string first:

Number("10") + 5

which produces:

15

Leave a Comment