JavaScript Type Conversion

Introduction

When working with JavaScript, you often deal with different types of data such as strings, numbers, and booleans. Sometimes, you need to convert data from one type to another—for example, converting a string into a number or a number into a string. This process is known as type conversion.

JavaScript is a loosely typed (dynamically typed) language, which means it automatically handles many type conversions behind the scenes. However, understanding how type conversion works is essential to avoid bugs and write efficient code.

In this guide, you’ll learn everything about JavaScript type conversion, including types, methods, examples, real-life use cases, common mistakes, and interview questions.

What is Type Conversion in JavaScript?

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

Example:

let value = "100";
let number = Number(value);
console.log(number); // 100

In the above example, the string “100” is converted into the number 100.

Types of Type Conversion

JavaScript provides two types of type conversion:

1. Implicit Type Conversion (Type Coercion)

Implicit conversion is automatically performed by JavaScript when needed.

Example:

let result = "5" + 2;
console.log(result); // "52"

In the above example, JavaScript converts the number 2 into a string and concatenates.

Other Example:

"5" - 2   // 3
"10" * 2  // 20
true + 1  // 2
false + 1 // 1

2. Explicit Type Conversion (Type Casting)

Explicit conversion is manually done by the developer using built-in functions.

1. Converting to Number

You can convert values into numbers using the function below.

1. Number()

Number("100"); // 100
Number("abc"); // NaN

2. parseInt()

parseInt("100");     // 100
parseInt("100px");   // 100

3. parseFloat()

parseFloat("10.5"); // 10.5

2. Converting to String

You can convert to a string through a string method.

1. String()

String(100); // "100"

2. .toString()

let num = 200;
num.toString(); // "200"

3. Using + Operator

100 + ""; // "100"

3. Converting to Boolean

You can convert into a Boolean through the Boolean() function.

1. Boolean()

Boolean(1);   // true
Boolean(0);   // false
Boolean("");  // false
Boolean("Hi");// true

Real-Life Examples: User Input Handling

Suppose the user enter age, and we have to handle it.

Example:

let input = "35";
let age = Number(input);
console.log(age + 5); // 40

Type Conversion with Operators

Different operators behave differently:

Operation	Result
“5” + 2	“52”
“5” – 2	3
“5” * 2	10
“5” / 2	2.5

Note: + is used for concatenation, others for math.

Special Cases in Type Conversion

There are some special cases in Type Conversion, so you should know about this.

1. null Conversion

Number(null); // 0

2. undefined Conversion

Number(undefined); // NaN

3. Boolean Conversion

Number(true);  // 1
Number(false); // 0

4. Empty String

Number(""); // 0

Common Mistakes

You should avoid some common mistakes because many Beginners make them.

1. Unexpected String Concatenation

"10" + 5; // "105"

2. Using == Instead of ===

0 == false;  // true
0 === false; // false

3. Ignoring NaN

Number("abc"); // NaN

What is the Best Practice

Interview Questions

Conclusion

JavaScript type conversion is a powerful feature that allows flexibility when working with different data types. However, it can also lead to unexpected results if not handled carefully.

By understanding implicit and explicit conversion, along with best practices, you can avoid common bugs and write more reliable JavaScript code.

Related JavaScript Tutorials