Type Conversions in JavaScript

Introduction

In the previous post of this series, I have explained about all the data types that are present in JavaScript. If you did not read it then you may read it first to understand all the data types in detail or if you have knowledge about the data types then you may continue reading this post.

In this post, I am explaining about the type conversions in JavaScript. As we know that JavaScript is dynamically typed language, we don't need to specify the data type while creating any variables. Sometimes we requires that the some value stored in a variable as some other data type then it was already like the variable is storing a number data type and we require that value as a string. The concept of type conversion comes into picture here.

Type conversion achieved in JavaScript in two ways-

1. Automatic Type Conversion
2. Explicit Type Conversion

Now lets talk them about in detail.

Automatic Type Conversion

As the name suggests it is automatically done by JavaScript itself. Some functions like alert() will convert any given type to string to display it.

Another example of it is that when we apply the non-numbers to mathematical expressions or functions then the non-numbers are automatically converted to numbers. For example-

let subtract = "6" - "4";
alert(subtract) // 2

There are some more ways in which automatic type conversion is happen but I want to try on your own in your browser's console in dev tools.

Explicit Type Conversion

Explicit type conversion means that we have explicitly have to convert the data type of the value stored in a variable, by using some functions.

In JavaScript, we have generally four type of explicit type conversions such as-

1. string conversion
2. numeric conversion
3. boolean conversion
4. object to primitive conversion

In this post, I am just covering first three only because object to primitive conversion needed knowledge deeper understanding of objects, that I may cover in my future post.

1. String Conversion

To convert the other values to string data type, we have used string(other value) function. It is most obvious type of conversion because the value stays as it is but its data type is now changed to string.
Example-

//number to string
let numValue = 123; // numValue is of number data type.
let convertedValue = string(numValue);
alert(typeof convertedValue); // string

//boolean to string
let boolValue = false; // boolValue is of boolean data type.
let stringValue = string(boolValue);
alert(typeof stringValue); // string

2. Numeric Conversion

Numeric conversion is slightly complicated but i will explain it via examples that takes the complexity away. So numeric conversion is possible by a function called Number(otherValue).
Example-

let stringValue = "123"; // string data type
let booleanValue = true; //boolean data type

let numValue1 = Number(stringValue);
let numValue2 = Number(booleanValue);
let numValue3 = Number(!booleanValue); // for false boolean value

alert(typeof numValue1); // number as numValue1 is 123
alert(typeof numValue2); // number as numValue2 is 1
alert(typeof numValue3); // number as numValue3 is 0

Update- 11/12/2021

I am going through JavaScript.info to revise operators in JavaScript, then I show the use of unary + operator. It can also used to convert other data types to number. If we put + operator before any variable containing non-number data types then it will convert it to numeric form and use its numerical value.
Example-

let a = "5";
let b = "6";
console.log(a + b); // "56"
// but when we use + operator before the varible then
console.log(+a + +b); // 11

3. Boolean Conversion

Boolean conversion is easy because it has only one rule that is when any empty string "" or 0 is converted to boolean using Boolean() function then it is false othervise it is true.
Example-

let stringValue = "hi";
let numValue = 123;

let boolValue1 = Boolean(stringValue);
let boolValue2 = Boolean(numValue);

console.log(boolValue1); // true
console.log(boolValue2); // true

let stringValue1 = "";
let numValue1 = 0;

let boolValue3 = Boolean(stringValue1);
let boolValue4 = Boolean(numValue1);

console.log(boolValue3); // false
console.log(boolValue4); // false

some points to remember

Some people often confused when it comes to converting 0 and "0" to boolean because both of then seems to equal but, 0 is converted to false in boolean and "0" is converted to true because "0" is string having 0 as a character while 0 is a number.
Example-

let value1 = 0;
let value2 = "0";

console.log(Boolean(value1));
console.log(Boolean(value2)); 
// try this code in console window of dev tools of your browser

Other common mistake is that they convert undefined and null to number, undefined is converted to NaN and null is converted to 0.
Example-

let value1; // undefined
let value2 = null;

console.log(Number(value1));
console.log(Number(value2)); 
// try this code in console window of dev tools of your browser

When we are converting string to number then if the string have some trailing or leading white spaces then it will discarded. If the string contains some non-numeric characters then it will converted to NaN. The empty string becomes 0.
Example-

let value1 = "  123  ";
let value2 = "123@#";
let value3 = "";

console.log(Number(value1));
console.log(Number(value2));
console.log(Number(value3));
// try this code in console window of dev tools of your browser

In boolean conversion, the NaN, undefined and null are also converted to false. The space-only string " " is true.
Example-

let value1 = 0/0; //NaN
let value2; // undefined
let value3 = null;
let value4 = " " // space only string

console.log(Boolean(value1));
console.log(Boolean(value2));
console.log(Boolean(value3));
console.log(Boolean(value4));
// try this code in console window of dev tools of your browser

Summary

I know this post is looking some what complicated when you first look at it, but if read this post and try the code given here in your browser console then the things became clear.
Thank you for reading this post.

This post is based on what I learned about data types in JavaScript from javascript.info. It is basically a summary of that article. Visit it to get some deeper understanding.
Photo by Pankaj Patel on Unsplash