Type Casting in JavaScript

Type casting in JavaScript is the process of converting a value from one data type to another data type.

For example, we can convert a String into a Number or a Number into a String.

let age = "25";

let numberAge = Number(age);

console.log(numberAge);
console.log(typeof numberAge);

Output:

25
number

Here, the String "25" is converted into a Number using Number().

JavaScript supports two types of type conversion:

• Implicit Type Casting
• Explicit Type Casting

1. Implicit Type Casting

Implicit type casting happens when JavaScript automatically converts one data type into another during an operation.

For example:

let a = "10";
let b = 5;

console.log(a + b);

Output:

105

Here, a is a String and b is a Number. JavaScript converts the Number 5 into a String and combines them.

Another example:

let a = "10";
let b = 5;

console.log(a - b);

Output:

5

Here, JavaScript converts the String "10" into a Number because the - operator performs a mathematical operation.

This automatic conversion is called Implicit Type Casting or Type Coercion.

2. Explicit Type Casting

Explicit type casting happens when the programmer manually converts a value from one data type to another.

JavaScript provides built-in methods such as Number(), String(), and Boolean() for explicit conversion.

Converting String to Number

We can use Number() to convert a String into a Number.

let price = "500";

let result = Number(price);

console.log(result);
console.log(typeof result);

Output:

500
number

Here, the String "500" is explicitly converted into the Number 500.

Converting Number to String

We can use String() to convert a Number into a String.

let age = 25;

let result = String(age);

console.log(result);
console.log(typeof result);

Output:

25
string

Here, the Number 25 is converted into the String "25".

Converting Value to Boolean

We can use Boolean() to convert a value into true or false.

let value = 10;

let result = Boolean(value);

console.log(result);

Output:

true

In JavaScript, most non-zero values are converted to true.

For example:

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

Output:

false
true
false
true

Values such as 0, "", null, undefined, and NaN are considered falsy. Most other values are considered truthy.

Converting String to Number Using parseInt()

parseInt() converts a String into an integer.

let value = "100px";

let result = parseInt(value);

console.log(result);

Output:

100

Here, parseInt() reads the numeric part from the beginning of the String and returns 100.

Converting String to Decimal Using parseFloat()

parseFloat() converts a String into a floating-point number.

let value = "99.50";

let result = parseFloat(value);

console.log(result);

Output:

99.5

Here, the String "99.50" is converted into the Number 99.5.

Number() vs parseInt() vs parseFloat()

Method	Purpose	Example	Result
Number()	Converts a value into a Number	Number("25")	25
parseInt()	Converts a value into an Integer	parseInt("25.5")	25
parseFloat()	Converts a value into a Decimal Number	parseFloat("25.5")	25.5

Important Example

Sometimes a conversion cannot be performed successfully.

let value = "Hello";

console.log(Number(value));

Output:

NaN

NaN means Not a Number. It indicates that JavaScript could not convert the given value into a valid Number.