Dealing with numbers in JavaScript can be tricky. Received values don’t always fall inside expected ranges; sometimes they’re negative when you expect positive results. Sometimes they’re not even cast as numbers. Dealing with these conditions, and converting strings into useful numerical results, often falls to s method - Math.abs() - and two functions: parseInt and parseFloat.

Math.abs()

Math.abs() returns the absolute value of a number - i.e. the number as a positive - without otherwise altering its value. Useful when working with results that may be negative, but which you need to be positive. In the console:

var newVal = -57.64;
Math.abs(newVal);

> 57.64

parseInt

As I’ve previously discussed, JavaScript treats values like "15" as a string, not a number. Results of numbers-as-strings are common when parsing CSS with JavaScript, or gaining values from an ill-prepared array. Results aren’t always this clean, either: receiving strings like “17px” is not uncommon. The issue is how to convert that into an actual value for use in calculations.

Into this role steps parseInt, an automatic “cleaner” function that converts text that contains numbers into logical numerical values. The text used in parseInt should always be paired with a radix: the base of the number that the text should be converted into. On most occasions this will be 10 (i.e. the base of the ordinary counting numbers you use every day), but not all browsers assume this, so it needs to be specified.

Returning to my earlier example of rotating an element to touch and mouse positions: I found the center of an element with code like this:

var elem = document.getElementById("elem1")
var centerPoint = window.getComputedStyle(elem).transformOrigin;

centerPoint might yield a result that looks like this:

75px 75px

We can split() the result on the space between the values:

var centers = centerPoint.split(" "),

…but that still leaves the px as part of each string. To clean that up, we’ll use parseInt():

var centerX = parseInt(centers[0], 10);

…where 10 is the base, providing a value of 75 as a pure number. This result can then be used in calculations in JavaScript.

parseFloat

parseFloat is the floating point equivalent of parseInt: it converts text into a number with decimal places. Again, it can be useful in parsing CSS and other tasks, especially when dealing with floating-point percentages:

var FP = "33.33333%";
console.log(parseFloat(FP));

> 33.33333

Conclusion

While parseInt() and parseFloat() are extremely useful and powerful functions with some degree of “intelligence”, it’s important to test a range of expected values against parsed results, to ensure they yield usable numbers.

Rendering by Mikael Hvidtfeldt Christensen, used under a Creative Commons Attribution 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.