JavaScript Type Conversions (with Examples)

Type conversion, also known as type casting or type coercion, is a fundamental concept in JavaScript that allows you to convert a value from one data type to another. Whether you’re a beginner or an experienced JavaScript developer, understanding how type conversion works is crucial for writing efficient and error-free code. In this article, we will explore the ins and outs of type conversion in JavaScript, including implicit and explicit type conversion, data types in JavaScript, common use cases, best practices, and common mistakes to avoid.

JavaScript Type Conversion

JavaScript has two types of type conversion: implicit and explicit. Implicit type conversion, also known as type coercion, occurs automatically when JavaScript converts a value from one data type to another without the programmer explicitly requesting the conversion. On the other hand, explicit type conversion, also known as type casting, occurs when the programmer explicitly converts a value from one data type to another using built-in functions or operators.

Implicit Type Conversion

Implicit type conversion occurs when JavaScript automatically converts a value from one data type to another without the programmer explicitly requesting the conversion. For example, when you perform an operation between values of different data types, JavaScript will automatically convert one of the values to the appropriate data type before performing the operation.

One common example of implicit type conversion is when you concatenate a string and a number using the + operator. JavaScript will automatically convert the number to a string before performing the concatenation. However, implicit type conversion can sometimes lead to unexpected results and bugs if you’re not careful.

Example 1: Implicit Conversion to String

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

result = '3' + 2; 
console.log(result) // "32"

result = '3' + true; 
console.log(result); // "3true"

result = '3' + undefined; 
console.log(result); // "3undefined"

result = '3' + null; 
console.log(result); // "3null"

Example 2: Implicit Conversion to Number

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

let result;

result = '4' - '2'; 
console.log(result); // 2

result = '4' - 2;
console.log(result); // 2

result = '4' * 2;
console.log(result); // 8

result = '4' / 2;
console.log(result); // 2

Example 3: Non-numeric String Results to NaN

// non-numeric string used with - , / , * results to NaN

let result;

result = 'hello' - 'world';
console.log(result); // NaN

result = '4' - 'hello';
console.log(result); // NaN

Example 4: Implicit Boolean Conversion to Number

// if boolean is used, true is 1, false is 0

let result;

result = '4' - true;
console.log(result); // 3

result = 4 + true;
console.log(result); // 5

result = 4 + false;
console.log(result); // 4

Example 5: null Conversion to Number

// null is 0 when used with number
let result;

result = 4 + null;
console.log(result);  // 4

result = 4 - null;
console.log(result);  // 4

Example 6: undefined used with number, boolean or null

// Arithmetic operation of undefined with number, boolean or null gives NaN

let result;

result = 4 + undefined;
console.log(result);  // NaN

result = 4 - undefined;
console.log(result);  // NaN

result = true + undefined;
console.log(result);  // NaN

result = null + undefined;
console.log(result);  // NaN

Explicit Type Conversion

Explicit type conversion, also known as type casting, occurs when the programmer explicitly converts a value from one data type to another using built-in functions or operators. This gives you more control over the type conversion process and allows you to specify the exact type you want to convert to.

JavaScript provides several built-in functions for explicit type conversion, such as parseInt(), parseFloat(), Number(), String(), Boolean(), and Array.from(). These functions allow you to convert values to numbers, strings, booleans, and arrays, depending on your needs.

For example, if you have a string containing a number and you want to convert it to an actual number for mathematical operations, you can use the parseInt() or parseFloat() function. These functions take a string as input and return the corresponding integer or floating-point number, respectively.

let numString = "123";
let num = parseInt(numString);
console.log(num); // Output: 123

In this example, the parseInt() function is used to convert the string “123” to the integer 123.
Similarly, if you have a boolean value stored as a string and you want to convert it to a boolean data type, you can use the Boolean() function:

let boolString = "true";
let bool = Boolean(boolString);
console.log(bool); // Output: true

Explicit type conversion can be helpful in scenarios where you want to ensure a specific type of conversion, or when you need to handle user input or external data that may not always be in the expected data type.

Convert to Number Explicitly

let result;

// string to number
result = Number('324');
console.log(result); // 324

result = Number('324e-1')  
console.log(result); // 32.4

// boolean to number
result = Number(true);
console.log(result); // 1

result = Number(false);
console.log(result); // 0

Convert to String Explicitly

//number to string
let result;
result = String(324);
console.log(result);  // "324"

result = String(2 + 4);
console.log(result); // "6"

//other data types to string
result = String(null);
console.log(result); // "null"

result = String(undefined);
console.log(result); // "undefined"

result = String(NaN);
console.log(result); // "NaN"

result = String(true);
console.log(result); // "true"

result = String(false);
console.log(result); // "false"

// using toString()
result = (324).toString();
console.log(result); // "324"

result = true.toString();
console.log(result); // "true"

Convert to Boolean Explicitly

let result;
result = Boolean('');
console.log(result); // false

result = Boolean(0);
console.log(result); // false

result = Boolean(undefined);
console.log(result); // false

result = Boolean(null);
console.log(result); // false

result = Boolean(NaN);
console.log(result); // false

JavaScript Type Conversion Table