Monday , 20 November 2017
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.

Boolean

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.

Number

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.

String

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.

Conclusion

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.

http://msdn.microsoft.com/en-us/library/ie/7wkd9z69(v=vs.94).aspx

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link