JavaScript

How to Convert Data Types in JavaScript | Tutorial for beginners

In JavaScript, as well as in other programming languages one data type can be converted into another data type. If we have to convert one variable to another then we can use type conversion and we can do this either implicitly or explicitly. We will discuss both types of conversions in detail with the help of some examples.

How to Convert Data Implicitly in JavaScript

In implicit type conversion, JavaScript instinctively changes the data type of a variable to another data type and in this case, there is no need to convert a variable forcefully to any other data type. We will discuss the implicit way of converting data type in detail with some examples:

Implicit Conversion of Number data type to String data type

When we add a number with a string then JavaScript Implicitly converts the number into a string prior to concatenation:

let Add;

Add = '50' + 50;

console.log("Number Added with String : " , Add);

We add a string data type value ‘50’ with a numeric value of 50, here the ‘+’ operator act as a concatenation operator:

Therefore, the ‘+’ operator concatenates the string with the number and as a result, we will get ‘5050’ instead of ‘100’. This shows that JavaScript implicitly converts a number into a string:

Implicit Conversion of String data type to Number data type

In JavaScript, if we utilize subtract, division, or multiplication sign between the two strings then as a result JavaScript will automatically convert these strings to the Number data type:

let sub;
sub = '50' - '50';
console.log("Strings considered as Numbers '-' operation : " , sub);

let div;
div = '50' / '50';
console.log("Strings considered as Numbers '/' operation : " , div);

let mul;
mul = '50' * '50';
console.log("Strings considered as Numbers '*' operation  : " , mul);

In this example, we pick two numeric strings and perform subtraction, division and multiplication operations on them:

In the output, we observe that when we use the “/”, “-“, or “*” operator between two numeric strings then JavaScript consider them as a number type values and give the output accordingly:

Now we consider some non-numeric strings and perform the same operations on them:

let sub;
sub = 'Daniel' - 'Micheal';
console.log("Strings considered as Numbers '-' operation : " , sub);

let div;
div = 'Daniel' / 'Micheal';
console.log("Strings considered as Numbers '/' operation : " , div);

let mul;
mul = 'Daniel' * 'Micheal';
console.log("Strings considered as Numbers '*' operation  : " , mul);

Here we try to subtract, multiply, and divide the operator with two alphabetic strings “Daniel” and “Micheal”:

As a result, JavaScript responded with “NaN” (this means it’s not a Numeric value):

Implicit Conversion of Boolean data type to Number data type

JavaScript considers ‘0’ as false and all other values as true:

let BolToNum;
BolToNum = 50 + true;
console.log("Addition of numeric value and Boolean value True : " , BolToNum);

BolToNum = 50 + false;
console.log("Addition of numeric value and Boolean value False : " , BolToNum);

BolToNum = '50' - true;
console.log("Subtraction of Non zero value and Boolean value True : " , BolToNum);

BolToNum = '50' - false;
console.log("Subtraction of Non zero value and Boolean value False : " , BolToNum);

If we add any numeric value other than zero with “true” then the resultant value for the Boolean “true” will always be ‘1’:

From the output, it is clear that when a Boolean value “true” is added or subtracted from the number then JavaScript added or subtracted “1” from the numeric value while when Boolean value is “false” then JavaScript added or subtracted “0” from the numeric value:

The value of “null” is equal to zero, when we utilize an “undefined” with a numeric or Boolean value then the resultant output will be “NaN”.

How to Convert Data Explicitly in JavaScript

The term Explicit in JavaScript defines a manual way of converting from one data type to another, for this purpose numerous built-in functions are available in JavaScript. Using these functions we can convert the one data type to any other data type according to the requirements. We will discuss the explicit way of converting a data type in detail with a couple of examples.

How to Explicitly Convert the Numeric string type to Number data type

We can convert a string into a number data type using a built-in function “Number()”:

let StrToNum;

StrToNum = Number('50e-5');

console.log("Converting numeric string to Number type Explicitly : " , StrToNum);

In this example we convert a numeric string into a numeric data type explicitly using the “Number()” method, if we didn’t utilize the “Number” method then by default JavaScript will show a string value. The output of the above-given code will be a numeric value:

How to Explicitly Convert the Numeric string type to Boolean data type

We will utilize the same “Number” method for the Boolean value to explicitly convert the Boolean type to the number type:

let BolToNum;
BolToNum = 50 + Number(true);
console.log("Converting numeric string to Number type Explicitly : " , BolToNum);

BolToNum = 50 + Number(false);
console.log("Converting numeric string to Number type Explicitly : " , BolToNum);

In this example, a numeric value is added with a boolean value, and as a result, we want a numeric value. So we utilize a built-in method “Number” with the boolean value which will convert the boolean value to a numeric value:

The “Number” method will convert the boolean values “true” and “false” to the numeric values “1” and “0” respectively:

The output verifies that the “Number” method explicitly converts the boolean “true” to numeric value 1 and boolean “false” to numeric value 0, therefore we get “51”. When 50 is added with a boolean “true” and it gives “50”. When boolean “false” is added with the numeric value ‘50’.

JavaScript offers many more functions like “parseInt()”, “parseFloat()” and “Math.floor()” to convert a string into a number data type, we can use any of these method according to our requirement:

let StrToNum;

StrToNum = parseInt('50.50');

console.log("String converted to Number : " , StrToNum);

StrToNum = parseFloat('50.50');

console.log("String converted to Float : " , StrToNum);

StrToNum = Math.floor('50.50');

console.log("String converted to Number : " , StrToNum);
  • “parseInt” will convert the string into integer,
  • “parseFloat” will convert the string to float value,
  • “Math.floor” method will convert the string value to an integer number.

The output of the above-given example is:

How to Explicitly convert a numeric data type to string data type

JavaScript offers two methods “String()” and “toString()” to convert a numeric value to a string value:

let NumToStr = 50;

String(NumToStr);

console.log("Conversion using String method : " , NumToStr);

(50).toString();

console.log("Conversion using toString method : " , NumToStr);

The “String()” and “toString()” methods perform exactly the same functionality. The output of the above-given example will be:

How to Explicitly Convert a Boolean type to String data type

We can convert a boolean value into a string value using the “string()” method or the “toString()” method:

let BolToStr;

BolToStr = String(true);

console.log("Converting Bool to String : " , BolToStr);

BolToStr = String(false);

console.log("Converting Bool to String : " , BolToStr);

The output of this code will be:

How to Explicitly Convert a Number/String type to Boolean data type

We can convert any string or any numeric value into a boolean data type with the help of “Boolean()” method:

let Bol;
Bol = Boolean('');
console.log("empty string : " , Bol);

Bol = Boolean(0);
console.log("convert 0 boolean : " , Bol);

Bol = Boolean(undefined);
console.log("convert Undefined to boolean : " , Bol);

Bol = Boolean(null);
console.log("convert null to boolean : " , Bol);

Bol = Boolean(NaN);
console.log("convert NaN to boolean : " , Bol);

If we convert a numeric value “0” to Boolean type then the result will be zero, or if we pass empty string, undefined, or null or NaN then the “Boolean” method will return zero:

In all these cases the “Boolean()” method will return false:

All the values except the values in above example will return “true”:

Bol = Boolean(50);

console.log("convert a numeric value to boolean : " , Bol);

Bol = Boolean('New York City');

console.log("convert a String type value to boolean : " , Bol);

We put a numeric value ‘50’, and a String “New York City” in the ‘Boolean()’ method, it will return true:

For example when we put a numeric value other than zero, or a string type value, then “Boolean()” method will return true:

Conclusion

To convert one data type into any other data type is the most frequently asked question in any programming language. In this tutorial we have learned how JavaScript converts a data type implicitly or explicitly. In this article, we have discussed how we can convert a string type to a number data type or a number to string or date type to number type or conversely number to date data type, or Boolean to number type or contrarily we can convert a number type to Boolean type.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.