Working with JavaScript ParseInt and ParseFloat

Every real web developer knows the JavaScript scripting/programming language well enough to write at least basic client-side scripts. Basic knowledge of this languages includes understanding how to work with JavaScript parseInt () and JavaScript parseFloat () to convert strings to numbers when needed. This tutorial probably will not be very helpful if you don't know what data types are or have no knowledge of programming.

When Is JavaScript ParseInt and ParseFloat Needed?

JavaScript parseInt and JavaScript parseFloat is needed whenever your script needs to convert a string to a number. There are numerous reasons why you might need to convert strings to numbers. For example, let's say that your program needs to perform mathematical calculations on data that a user submits via a text box or a prompt. Remember that there's no such thing as a number box in hypertext mark-up language (HTML). There are only text boxes and data entered via prompts is also text even if the user pressed a number key. This is why JavaScript parseInt and parseFloat are available to handle text to number conversions.

Example Code Not Using JavaScript ParseInt: The Problem That Occurs

The following snippet of code illustrates the problem with not using JavaScript parseInt or parseFloat when performing addition. The script simply gets one number and then gets a second number as input from a user for the purpose of adding the two numbers and displaying the sum of them.

var num1=prompt("enter a number", "")
var num2=prompt("enter a 2nd number", "")
var answer = num1 + num2
alert("sum is: " + answer)

If a user types in "2" for the first number and "5" for the second number, the program will say that the sum is "25" not "7" because it will concatenate the entries instead of performing addition. Remember that "+" in JavaScript is not only used for addition, it's also used for concatenation (stringing things together).

JavaScript parseInt would need to be used to convert the strings "2" and "5" into numbers so they can be added. Notice in my modified snippets of code below that conversion can be done on the spot (as the user enters the data) or it can be done just before performing addition.

Text to Number Conversion on the Spot:

var num1=parseInt(prompt("enter a number", ""))
var num2=parseInt(prompt("enter a 2nd number", ""))
var answer = num1 + num2
alert("sum is: " + answer)

Text to Number Conversion Right Before Addition:

var num1=prompt("enter a number", "")
var num2=prompt("enter a 2nd number", "")
var answer = parseInt(num1) + parseInt(num2)
alert("sum is: " + answer)

One more important thing to point out with JavaScript parseInt and parseFloat is that had we performed multiplication on the two numbers, the conversion would not have been necessary. Why? Because upon JavaScript seeing the multiplication operator (*), it would have automatically treated "2" and "5" as numbers, knowing that strings cannot be multiplied. The confusion that ocurrs with the "+" operator lies in the fact that it's not only used for addition, it's also used for concatenation; and both addition and concatenation can be performed on strings as well as on numbers. You can use the snippets of code in this tutorial to see JavaScript parseInt and parseFloat in action.

JavaScript ParseInt Versus JavaScript ParseFloat

While JavaScript parseInt turns a string into an integer, parseFloat turns a string into a floating-point number. However, you can't use parseInt to convert a floating-point number into an integer nor can you use parseFloat to convert an integer into a floating-point number.

Source:
AAS - Web Development