JavaScript Type Conversion

In programming, type conversion is the process of converting data of one type to another. For example, converting string data to number.

There are two types of type conversion in JavaScript:

  • Implicit Conversion - Automatic type conversion.
  • Explicit Conversion - Manual type conversion.

JavaScript Implicit Conversion

In certain situations, JavaScript automatically converts data of one type to another (to the right type). This is known as implicit conversion. For example,

// numeric string used with + gives string type
let result;

// convert number to string
result = "3" + 2; 
console.log(result, "-", typeof(result));

result = "3" + true; 
console.log(result, "-", typeof(result));

result = "3" + null; 
console.log(result, "-", typeof(result));

Output

32 - string
3true - string
3null - string

In this example, we performed implicit type conversion using the + operator with a string and another data type.

Here,

  • "3" + 2 - Converts the number 2 to string and joins it to "3", resulting in the string "32".
  • "3" + true - Converts the boolean true to string and joins it to "3", resulting in the string "3true".
  • "3" + null - Converts null to string and joins it to "3", resulting in the string "3null".

Note: The typeof operator gives the data type of the variable.


JavaScript Explicit Conversion

In explicit type conversion, you manually convert one type of data into another using built-in functions. For example,

let result;

// convert string to number
result = Number("5");
console.log(result, "-", typeof(result));

// convert boolean to string
result = String(true);
console.log(result, "-", typeof(result));

// convert number to boolean
result = Boolean(0);
console.log(result, "-", typeof(result));

Output

5 - number
true - string
false - boolean

Here,

  • Number("5") changes the string "5" into the number 5.
  • String(true) turns the boolean true into the string "true".
  • Boolean(0) converts the number 0 to the boolean false because 0 is considered a falsy value in JavaScript.

More on JavaScript Type Conversion

Implicit Conversion to Number

When you use arithmetic operators like -, *, or / with numeric strings, JavaScript automatically changes those strings into numbers.

Let's look at an example.

// numeric string used with - , / , *
// results in number type

let result;

result = "4" - "2"; 
console.log(result, "-", typeof(result));

result = "4" - 2;
console.log(result, "-", typeof(result));

result = "4" * 2;
console.log(result, "-", typeof(result));

result = "4" / 2;
console.log(result, "-", typeof(result));

Output

2 - number
2 - number
8 - number
2 - number
JavaScript Type Conversion Table

The table shows the conversion of different values to String, Number, and Boolean in JavaScript.

Value String Conversion Number Conversion Boolean Conversion
1 "1" 1 true
0 "0" 0 false
"1" "1" 1 true
"0" "0" 0 true
"ten" "ten" NaN true
true "true" 1 true
false "false" 0 false
null "null" 0 false
undefined "undefined" NaN false
'' "" 0 false
' ' " " 0 true

You will learn about the conversion of objects and arrays to other data types in later tutorials.

Rules for Type Conversion

Understanding the rules for type conversion is crucial for avoiding unexpected results in your JavaScript code.

Here are some key points:

  1. Operations involving binary + will convert numbers to strings in the case of string and number concatenation.
  2. Logical operations convert operands to boolean values.
  3. When subtracting a string from another string, JavaScript attempts to convert both strings to numbers.
  4. When you change an object's type, some data might get lost.

Also Read:

Before we wrap up, let’s put your knowledge of JavaScript Type Conversion to the test! Can you solve the following challenge?

Challenge:

Write a function to concatenate two strings.

  • Given two input strings (str1 and str2), return the concatenated string.
  • For example, if str1 = "Hello, " and str2 = "World!", the expected output is "Hello, World!".

Video: JavaScript Operators

Did you find this article helpful?

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges