The mistake to avoid with the parseInt method in JS

Need to retrieve the integer value of a number in Javascript and you're used to using the parseInt method?

I'm going to show you the real danger of this method if it's not used correctly and the consequences this can have on the logical operation of your application!

Problem

Many developers think that the parseInt method allows you to retrieve the integer value of a number, which is true, but only partially.

The term "parse" means "analyze," and shouldn't be overlooked because this method isn't meant to transform a number, but to analyze and extract a number from a string of characters, then keep only the integer part, like this:

parseInt("0.5", 10);
//$> 0 (SUCCESS)

parseInt("0.0000005", 10);
//$> 0 (SUCCESS)

But since Javascript is dynamically typed, if you pass it a parameter of type "number," it will convert it into a string before "parsing" it. Not optimized, but it works:

parseInt(0.5, 10);
//$> 0 (SUCCESS)

In reality, this doesn't always work, and that's where the problems arise:

parseInt(0.0000005, 10);
//$> 5 (FAIL)

Why does the parseInt method return the correct result with 0.5 but not with 0.0000005? It's precisely because of the dynamic "number" -> "string" conversion.

The "number" type in Javascript optimizes the handling of certain numbers by using scientific notation.

The number 0.0000005 then becomes 5e-7

The automatic conversion then amounts to calling the function this way:

parseInt("5e-7", 10);
//$> 5

And since we're asking for the integer part, parseInt will only return the leftmost integer part of the number found, i.e. 5 instead of 0.

We find the same problem with very large multiples of 10, for example:

parseInt(1000000000000000000000, 10);
//$> 1

Solution 1

The first solution I recommend is to systematically switch to TypeScript.

Indeed, the specification of the parseInt(string, radix) method clearly states that the first parameter must strictly be a string of characters, but since Javascript is dynamically typed, the code still executes.

By switching to TypeScript, the compiler (or the IDE extension) will tell you that calling this method with a parameter of type "number" is illegal, and will save you from bad experiences!

If you don't know (or barely know) TypeScript, here's an article in which I explain this language in a simple way.

Solution 2

As Mozilla's documentation states, the parseInt method should never be used as a substitute for the Math.floor method, which takes a number as a parameter.

To use one method or the other depending on the parameter type, you can use the typeof() method to retrieve the type and use the correct method, as in the example below:

function toInt(n){
    if(typeof(n) === "number"){
    	return Math.floor(n);
    } else if(typeof(n) === "string") {
    	return parseInt(n, 10);
    } else {
    	throw new Error("...");
    }
}

I hope this article was useful to you, and see you soon on the blog.