Type Conversion in JavaScript

During programming, you will need to convert the one data type into another. Most of the times during working with operators and function, data type will automatically be converted from one into another. This is called Type Conversion.
When you will work with - (minus) operator, string like "4" will automatically be converted into number like 4. To have more idea, please have a look at the following examples.


console.log("4" - "3"); //output: 1
console.log("4n" - 3); //output: NaN

console.log("4" * 3); //output: 12
console.log("4" / 4); //output: 1
                    

In above code, first line, "4" and "3" will automatically converted into numbers and then operation will be performed.
In the second line, "4n" can not converted into any number. This will not be valid operation. So output is NaN.
Same will be happen with "4" - 3 or 4 - "3" or "4" - "3d" .
You should have understanding with "4" * 3 and "4" / 4.


console.log("4" + 3); //output: "43"
console.log(4 + 2 + "1"); //output: "61"
console.log("1" + 2 + 4); //output: "124"
                    

In the above code first line, You will be thinking that output should be 7 but when you use + with a string it will perform string interpolation. So the output will be "43".
In second line, You will be thinking output would be "421" but in JavaScript, operation will start from left to right. So 4 + 2 will be 6, and after that 6 + "1" will be "61".
In the third line, you should have understand the output :).

Convert to string

You already have seen "string interpolation". The + operator automatically converts a number to string if other operand is a string. In some cases, you will have a need to convert type to string. We are going to look at some basic methods to do that.

toString method

Most of the data types in JavaScript has toString function, which converts perticular data into string. Actually, we have discussed that everything in JavaScript is derived from Object class. The main toString method is derived from Object class. Please have a look at following code to know more.


let num = 5;
console.log(num.toString()); //output: "5"

let obj = {
    a: 1
};
console.log(obj.toString()); //output: "[object Object]"
                    

In above code, to convert num variable to stirng, num.toString() is used.
But confusion happens into conversion of obj. obj is object. When you apply toString to any object, it will return "[object Object]". There is other way to convert it into proper form like {"a":"1"}.

String method

There is another way to convert any data type to string is to call String function and pass the data as a parameter. Please have a look at the following code.


let num = 5;
console.log(String(num)); //output: "5"
                            
let obj = {
    a: 1
};
console.log(String(obj)); //output: "[object Object]"
                    

convert to number

Sometimes, you will need to convert data to number format to perform a mathematical operation.

Number method

Just like String() method, Number method is used to convert data to number.


var num = "21";
console.log(Number(num)); //output: 21

var num1 = "21.1";
console.log(Number(num1)); //output: 21.1

var num2 = "21.1d";
console.log(Number(num2)); //output: NaN

console.log(Number(undefined)); //output: NaN

console.log(Number(null)); //output: 0

console.log(Number(false)); //output: 0

console.log(Number("")); //output: 0

console.log(Number(" ")); //output: 0

console.log(Number(true)); //output: 1
                    

In above code, first two conversion are ok, in the third one, "21.1d" gets converted to NaN because it has alphabetical character which Number method can not convert to number.
Number(undefined) converted into NaN.
Number(null), Number(false) and Number("") are converted into 0. If you are converting the string with white space, then space is ignored and it is considered as an empty string. So Number(" ") return 0.

parseInt and parseFloat

Both parse the number. It is not exactly converting the value to a number. Please have a look at the following code.


let num1 = "21";
console.log(parseInt(num1)); //output: 21

let num2 = "21d";
console.log(parseInt(num2)); //output: 21

let num3 = "d21";
console.log(parseInt(num3)); //output: NaN

let num4 = "21.1";
console.log(parseInt(num3)); //output: 21

let num5 = "21";
console.log(parseFloat(num5)); //output: 21

let num6 = "21.1";
console.log(parseFloat(num6)); //output: 21.1

let num7 = "21.1d";
console.log(parseFloat(num7)); //output: 21.1

let num8 = "d21.1";
console.log(parseFloat(num8)); //output: NaN

console.log(parseInt(undefined)); //output: NaN
console.log(parseInt(null)); //output: NaN
console.log(parseInt("")); //output: NaN
console.log(parseInt(false)); //output: NaN 
console.log(parseInt(true)); //output: NaN
                    

  • parseInt
  • From above code, you will have known that parseInt will convert "21", "21.1" and "21d" to integer. But it can not convert "d21" to number as it starts with the alphabetic character.

  • parseFloat
  • parseFloat() will convert "21","21.1","21.1d" to floating point number. But it can not convert "d21.1" to number as it starts with the alphabetic character.
    Difference between Number() and parseFloat() lies in its ability to convert "21.1d" to number.

The main difference between Number(value) and these two methods is

  • parseInt(value) and parseFloat(value)
  • These two methods parse the numbers from the value provided to them. So they can not parse number From undefined, null, "", true and false. So, it returns NaN as we can see from above code.

  • Number(value)
  • While Number(value) is actually converts the value to number. So it converts undefined, null, "", true and false to their proper number value as you can see in this section

Convert to boolean

To convert any value in boolean, Boolean(value) is used.
When converting to boolean,

  • "Empty" values like 0, null, undefined and "" ( empty string ) are converted to false.
  • Other than above values, everything gets converted into true.


console.log(Boolean("")); //output: false
console.log(Boolean(0)); //output: false
console.log(Boolean(null)); //output: false 
console.log(Boolean(undefined)); //output: false 
console.log(Boolean(false)); //output: false

console.log(Boolean(true)); //output: true
console.log(Boolean("0")); //output: true
console.log(Boolean(1)); //output: true
console.log(Boolean(" ")); //output: true
                    

In above code please note that, Boolean(false) returns false and "0" is non-empty string. So Boolean("0") returns true. Boolean(" ") (string with space) also returns true as it is not empty string.

Conclusion

In this section, you leared about how to convert the value into string, number and boolean. You also leared about parseInt(value) and parseFloat(method) and how they are different from each other and how they are different from Number(value).
In next section, you will learn about operators in JavaScript.