Type Conversion in JavaScript

Last modified: March 24, 2024 by Atrowel

In the Primitive Values and Object References blog, we have learned about Primitive Values and Object References. Primitive values and object references in JavaScript refer to the two main types of data that the language uses. Primitives include basic data types like undefined, null, booleans, numbers, andstrings and are immutable (values cannot be changed). Objects encompass more complex structures, like arrays and functions, and are mutable (values can be modified). In this blog, we will learn about Type Conversion in JavaScript.

Type Conversion

In simple words, Type Conversion is nothing but the conversion of a value from one datatype to another. In JavaScript, we can change the datatype of any variable from one to another. For example, we can convert string to number, number to string, string to boolean, boolean to string, etc. Let’s take a look at the example:

//String to Number Conversion
let strNumValue = "879";
let numValue = Number(strNumValue);
console.log(typeof numValue); // Output: "number"

//Number to String Conversion
let numValue = 879;
let strNumValue = String(numValue);
console.log(typeof strNumValue); // Output: "string"

//Boolean to Number Conversion
let boolValue = true;
let numValue = Number(boolValue);
console.log(typeof numValue); // Output: "number"

//Number to Boolean Conversion
let numValue = 9;
let boolValue = Boolean(numValue);
console.log(typeof boolValue); // Output: "boolean"

//String to Boolean Conversion
let strValue = "true";
let boolValue = Boolean(strValue);
console.log(typeof boolValue); // Output: "boolean"

//Array to String Conversion
let arrElements = [7, 8, 9];
let strArrElements = arrElements.toString();
console.log(typeof strArrElements); // Output: "string"

//String to Array Conversion
let strValue = "welcome";
let arrValue = strValue.split('');
console.log(Array.isArray(arrValue)); // Output: true

Below is the Type Conversion Table:

Value	To String	To Number	To Boolean
undefined	“undefined”	NAN	FALSE
null	“null”	0	FALSE
true	“true”	1	TRUE
false	“false”	0	FALSE
“” (empty String)	“”	0	FALSE
“1.2”	“1.2”	1.2	TRUE
“one”	“one”	NAN	TRUE
0	“0”	0	FALSE
1	“1”	1	TRUE
infinity	“infinity”	infinity	TRUE
-infinity	“-infinity”	-infinity	TRUE
NAN	“NAN”	NAN	FALSE
(any object)	[object Object]	NAN	TRUE
[](empty array)	‘’	0	TRUE
[9](one numeric element)	“9”	9	TRUE
[‘a’](any other array)	“a”	NAN	TRUE
function()(any function)		NAN	TRUE

Types of Conversion

There are two types of Type Conversion:

Implicit Type Conversion
Explicit Type Conversion

Implicit Type Conversion

If a compiler converts one data into another type of data automatically is called Implicit Type Conversion. The advantage of this type of conversion is there is no data loss. Let’s take a look at the example:

//String and Number
let strNumValue = "99";
let result = strNumValue + 10;
console.log(result); // Output: "9910"

//Number and Boolean
let numValue = 90;
let boolValue = false;
let result = numValue + boolValue;
console.log(result); // Output: 90

//String and Boolean
let strBoolValue = "false";
let boolValue = false;
let result = strBoolValue + boolValue;
console.log(result); // Output: "falsefalse"

//Number and String
let numValue = 80;
let strValue = "20";
let result = numValue + strValue;
console.log(result); // Output: "8020"

Explicit Type Conversion

When data of one type is converted explicitly into another type with the help of a predefined function, it is called Explicit Type Conversion. There is a data loss because the conversion is done forcefully. Let’s take a look at an example:

//String to Number
let strNum = "90";
let numValue = Number(strNum);
console.log(numValue/); // Output: 90

//Number to String
let numValue = 768;
let strNumValue = String(numValue);
console.log(strNumValue); // Output: "768"

//Boolean to String
let boolValue = false;
let strBoolValue = boolValue.toString();
console.log(strBoolValue); // Output: "false"

//String to Boolean
let strBoolValue = "true";
let boolValue = Boolean(strBoolValue);
console.log(boolValue); // Output: true

//Number to Boolean
let numValue = 1;
let boolValue = Boolean(numValue);
console.log(boolValue); // Output: true

Conversion and Equality

JavaScript's == equality operator is quite flexible due to its ability to convert values. For example, it considers null andundefined as equal. It also treats certain strings, numbers, andbooleans as equivalent in certain cases. However, JavaScript also has a strict equality operator === which doesn't perform these conversions. It's essential to note that just because a value can be converted to another type doesn't mean they are equal. For example, while undefined converts to false in certain contexts, undefined is not equal to false. JavaScript's operators and statements handle values of different types and may perform conversions, but the ==operator doesn't convert its operands to booleans. Let's take a look at the example

// Example 1: Null and Undefined Equality
let value = null;
let value2 = undefined;
let result = value == value2;
// Explanation: null and undefined are considered equal by the == operator.
// The result will be true.

// Example 2: String and Number Equality
let strNumValue = "9";
let numValue = 9;
let result = strNumValue == numValue;
// Explanation: The == operator converts the string "9" to a number before comparison.
// The result will be true.

// Example 3: Boolean and Number Equality
let boolValue = false;
let numValue = 0;
let result = boolValue == numValue;
// Explanation: The == operator converts the boolean false to the number 0 before comparison.
// The result will be true.

// Example 4: String and Boolean Equality
let strBoolValue = "false";
let boolValue = false;
let result = strBoolValue == boolValue;
// Explanation: The == operator converts the string "false" to the boolean false before comparison.
// The result will be false.

// Example 5: Strict Equality
let strNumValue = "9";
let numValue = 9;
let strictResult = strNumValue === numValue;
// Explanation: The === operator performs strict equality without type conversion.
// The result will be false as the types are different.

// Example 6: Conversion of Undefined to False
let value = undefined;
let boolValue = false;
let conversionResult = value == boolValue;
// Explanation: In certain contexts, undefined is converted to false.
// The result will be true.