JavaScript Type Conversion — Complete Guide

Module 5 — Type Conversion

Type conversion is one of the most important concepts in JavaScript. Since JavaScript is a dynamically typed language, variables can change their data type at runtime. JavaScript often converts values automatically, and developers can also perform conversions manually when needed.

Understanding type conversion is essential for building reliable applications, preventing unexpected bugs, and working effectively with user input, APIs, databases, and JSON data.

In this module, you'll learn:

• What type conversion is
• Implicit Conversion (Type Coercion)
• Explicit Conversion
• Number()
• String()
• Boolean()
• parseInt()
• parseFloat()
• toString()
• JSON.parse()
• JSON.stringify()
• Best practices

What is Type Conversion?

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

Example:

javascriptCopy
1let age = "25";
2
3console.log(typeof age);
4
5age = Number(age);
6
7console.log(typeof age);

Output

textCopy
1string
2number

Types of Type Conversion

JavaScript supports two kinds of conversions.

textCopy
1Type Conversion
2
3│
4
5├── Implicit Conversion
6│     (Automatic)
7
8└── Explicit Conversion
9      (Manual)

Implicit Conversion (Type Coercion)

Implicit conversion occurs automatically when JavaScript converts one data type into another during an operation.

Example 1

javascriptCopy
1console.log("10" + 5);

Output

textCopy
1105

The number 5 is automatically converted into a string.

Internally

javascriptCopy
1"10" + "5"

Example 2

javascriptCopy
1console.log("10" - 5);

Output

textCopy
15

JavaScript converts "10" into a number because subtraction only works with numeric values.

Example 3

javascriptCopy
1console.log(true + 1);

Output

textCopy
12

Internally

textCopy
1true → 1

Example 4

javascriptCopy
1console.log(false + 10);

Output

textCopy
110

Example 5

javascriptCopy
1console.log(null + 5);

Output

textCopy
15

null becomes 0.

Example 6

javascriptCopy
1console.log(undefined + 5);

Output

textCopy
1NaN

Common Implicit Conversion Rules

Explicit Conversion

Explicit conversion means the programmer manually converts one data type into another using built-in functions.

Example

javascriptCopy
1const age = "23";
2
3const result = Number(age);
4
5console.log(result);

Output

textCopy
123

Number()

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

Convert String

javascriptCopy
1console.log(Number("100"));

Output

textCopy
1100

Convert Boolean

javascriptCopy
1console.log(Number(true));
2console.log(Number(false));

Output

textCopy
11
20

Convert Null

javascriptCopy
1console.log(Number(null));

Output

textCopy
10

Convert Undefined

javascriptCopy
1console.log(Number(undefined));

Output

textCopy
1NaN

Invalid Conversion

javascriptCopy
1console.log(Number("JavaScript"));

Output

textCopy
1NaN

String()

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

javascriptCopy
1console.log(String(100));
2console.log(String(true));
3console.log(String(null));

Output

textCopy
1"100"
2"true"
3"null"

Boolean()

The Boolean() function converts values into either true or false.

Truthy Values

javascriptCopy
1Boolean(1)
2Boolean(100)
3Boolean("Hello")
4Boolean([])
5Boolean({})

All return

textCopy
1true

Falsy Values

javascriptCopy
1Boolean(0)
2Boolean("")
3Boolean(null)
4Boolean(undefined)
5Boolean(NaN)

All return

textCopy
1false

Truthy vs Falsy Values

parseInt()

parseInt() converts a string into an integer.

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

Output

textCopy
1100

Decimal Example

javascriptCopy
1console.log(parseInt("99.99"));

Output

textCopy
199

Invalid Example

javascriptCopy
1console.log(parseInt("Hello"));

Output

textCopy
1NaN

Mixed String

javascriptCopy
1console.log(parseInt("123px"));

Output

textCopy
1123

parseFloat()

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

javascriptCopy
1console.log(parseFloat("99.99"));

Output

textCopy
199.99

Mixed Example

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

Output

textCopy
199.99

Number() vs parseInt() vs parseFloat()

toString()

The toString() method converts a value into a string.

javascriptCopy
1const age = 25;
2
3console.log(age.toString());

Output

textCopy
1"25"

Boolean Example

javascriptCopy
1const status = true;
2
3console.log(status.toString());

Output

textCopy
1"true"

String() vs toString()

Example

javascriptCopy
1console.log(String(null));

Output

textCopy
1"null"

javascriptCopy
1console.log(null.toString());

Output

textCopy
1TypeError

JSON.stringify()

Converts a JavaScript object into a JSON string.

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23
4};
5
6const json = JSON.stringify(user);
7
8console.log(json);

Output

textCopy
1{"name":"Ankit","age":23}

Type

javascriptCopy
1console.log(typeof json);

Output

textCopy
1string

JSON.parse()

Converts a JSON string back into a JavaScript object.

javascriptCopy
1const json = '{"name":"Ankit","age":23}';
2
3const user = JSON.parse(json);
4
5console.log(user);

Output

javascriptCopy
1{
2    name: "Ankit",
3    age: 23
4}

Real-World Example

Saving Data

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23
4};
5
6localStorage.setItem(
7    "user",
8    JSON.stringify(user)
9);

Reading Data

javascriptCopy
1const user = JSON.parse(
2    localStorage.getItem("user")
3);
4
5console.log(user.name);

Type Conversion Table

Common Mistakes

Mistake 1

javascriptCopy
1console.log("5" + 2);

Output

textCopy
152

Expected

textCopy
17

Solution

javascriptCopy
1console.log(Number("5") + 2);

Mistake 2

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

Output

textCopy
1true

Because any non-empty string is truthy.

Mistake 3

javascriptCopy
1console.log(parseInt("12.9"));

Output

textCopy
112

Use parseFloat() if you want decimal values.

Best Practices

• Prefer explicit conversion over relying on implicit type coercion.
• Use Number() when converting entire numeric strings.
• Use parseInt() for integer parsing and parseFloat() for decimal parsing.
• Use String() when converting values that may be null or undefined.
• Use JSON.stringify() before storing objects in localStorage or sending them to APIs.
• Use JSON.parse() to convert JSON strings back into JavaScript objects.
• Validate conversions with Number.isNaN() when working with user input.

Mini Project: User Registration Data Converter

index.html

htmlCopy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Type Conversion Demo</title>
6</head>
7<body>
8
9<h2>User Information</h2>
10
11<div id="output"></div>
12
13<script src="script.js"></script>
14
15</body>
16</html>

script.js

javascriptCopy
1const apiResponse = `{
2    "name":"Ankit",
3    "age":"23",
4    "salary":"55000.75",
5    "isStudent":"false"
6}`;
7
8const user = JSON.parse(apiResponse);
9
10user.age = Number(user.age);
11user.salary = parseFloat(user.salary);
12user.isStudent = user.isStudent === "true";
13
14const output = document.getElementById("output");
15
16output.innerHTML = `
17    <p><strong>Name:</strong> ${user.name}</p>
18    <p><strong>Age:</strong> ${user.age}</p>
19    <p><strong>Salary:</strong> ${user.salary}</p>
20    <p><strong>Student:</strong> ${user.isStudent}</p>
21`;

Summary

In this module, you learned:

• What type conversion is and why it is important in JavaScript.
• The difference between implicit conversion (type coercion) and explicit conversion.
• How to convert values using Number(), String(), and Boolean().
• When to use parseInt() and parseFloat() for parsing numeric strings.
• The difference between String() and toString().
• How JSON.stringify() converts JavaScript objects into JSON strings.
• How JSON.parse() converts JSON strings back into JavaScript objects.
• Common type conversion pitfalls and best practices for writing predictable, maintainable code.

In the next module, you'll learn JavaScript Control Flow, including if, else, switch, loops (for, while, do...while), break, continue, and for...of/for...in, which are essential for controlling program execution.