Monday , 15 July 2019
Home / Programming / JavaScript / Converting Data Types – Advanced JavaScript Tutorial
Converting Data Types
Converting Data Types

Converting Data Types – Advanced JavaScript Tutorial

As you may know, each value has a data type. Since JavaScript supports dynamic datatypes you can change a value’s data type like so.

In some situations, you’ll want to convert the value to another data type instead of just changing the value. JavaScript offers a variety of functions and methods to do so. Let’s set up things to get started.

Update your index.html to this.

Lastly, create a file called script.js inside a folder called js. Open up your script and let’s get started.


To convert a value’s data type to a boolean, you use the Boolean() function. Let’use this as an example. Insert this line of code into your script.

We pass in the Boolean() function a value. In our case, we pass in a string. If you refresh your page, then you should see true outputted. Remember, boolean values are just true or false. So, how does it determine what values are true or false? To keep it simple, any non-empty string is true. If you pass in an empty string, you’ll get false. Any number is considered true except 0 and NaN (Not a Number). Any object is true except the null object.


To convert any data type to a number, then you’ll find 3 functions in your arsenal. Update your script to this.

The first function is the Number() function. Now wait a minute, isn’t the Number keyword an object? Well, it may not make sense now, but you can use objects as functions as well. I’ll go more into detail about this in a future tutorial when we start talking about Object Oriented programming. For now, just know that you can use it to convert values into numbers.

If you refresh your page, then you should see a couple of different things outputted. To sum it up, any values with numbers are converted to numbers. If the strong contains letters or special characters, then it doesn’t convert. You get NaN. A true value is set to 1 and false is set to 0.

Update your script to this.

The parseInt() function is another function to convert values to a number data type. The difference is that it doesn’t accept booleans or empty strings. You’ll end up getting NaN. However, the parseInt() function is better at searching strings for a number. Take a look at the last one at each version. The Number() function returns NaN while the parseInt() returns a number. You’ll also notice you can use + or – signs to tell the function if you want a positive or negative number.

The last function is the parseFloat() function. Update your script to this.

This function works just like the parseInt() function. Except, it also reads numbers with decimal values. The parseInt() function will remove any decimal points even if you want them.

So, which functions should you use? A majority of the time, you want to use the parseInt() function because the Number() function isn’t as accurate and has a tendency to give you weird results. If you’re working with decimals, use the parseFloat() function.


To convert a value to the String data type, you’re supplied with 2 functions. Update your script to this.

As you may know, everything is an object. Every object created has a method called toString(). By using this method, you convert your value to a string. Simple as that! Let’s update your script to this.

The String() function also converts your values to strings. You’re free to use any of these functions to convert a value to a string. However, know that the toString() is a method attached to every object and the String() function is an object. It’s confusing, but once again, when we start talking about object oriented programming everything will make sense.


Converting data types is pretty easy in JavaScript. With so many methods and functions, you can change things with 1 line of code. You won’t find yourself using these functions often, but they do tend to come in handy once in a while. More information about data types can be found here.

About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.