You should stop using `parseInt()`
Tags: javascript, programming, webdev
Published: 2021-10-14 12:39:05

This is something I see all the times, you have some code where at some point you have a variable that contains a number, maybe it comes from a form, or from the results of some API calls, or whatever, and you want convert it into an integer.

Something like this for example:

```javascript
const myNumber = '1';

if (parseInt(myNumber, 10) === 1) {
  // do something
}
```

While the code above works, it’s an extremely inefficient way to parse it.
What you should use instead is the  `Number()` function, and convert the code above to this:

```javascript
const myNumber = '1';

if (Number(myNumber) === 1) {
  // do something
}
```

From the changes above you gain two things:
* a more readable code
* a much more performing way to transform a string to an integer

## But what’s the difference between `Number` and `parseInt`?

The `Number(string)` function evaluate the full string and converts it to a string, and if the string is not a number it will just return `NaN`.
While `parseInt(string, [radix])` will try to find the first number in the string passed, and convert it to the radix passed, which is `10` by default, and it will return `NaN` only if it doesn’t find any number.

This means that if you pass a string like `5e2` , it `parseInt` will stop when it sees the `e` and it will just return `5`, while `Number` will evaluate the whole string and return the correct value `500`.

Here you can see some cases compared between the two functions:

```javascript
console.log(Number('a')); // NaN
console.log(Number('1')); // 1
console.log(Number('5e2')); // 500
console.log(Number('16px')); // NaN
console.log(Number('3.2')); // 3.2

console.log(parseInt('a')); // NaN
console.log(parseInt('1')); // 1
console.log(parseInt('5e2')); // 5
console.log(parseInt('16px')); // 16
console.log(parseInt('3.2')); // 3
```


## It’s also a matter of execution time

Maybe you are still undecided, and you think that “I just need to convert a simple number to an integer, why I should use Number instead?”.
Well, because of performances.

For example, let’s do a simple function, that loops  for 100m times, and that accepts a callback, and we call it twice using `Number` in the first case and `parseInt` in the second.

```javascript
function runBench(cb) {
  const start = new Date();
  for (let i = 0; i < 100000000; i++) {
    cb();
  }
  const end = new Date();
  console.log(`It took ${end - start} ms`);
}

const process1 = () => Number('3.2');
const process2 = () => parseInt('3.2', 10);

runBench(process1); // It took 140 ms
runBench(process2); // It took 4546 ms
```

Sure, you are not going to run a loop of 100 millions, but it’s to make evident the performance difference between the two functions, and also when you use `parseInt` in multiple places on the same function, things might just sum up at the end.

## So should I just avoid `parseInt` all the times?

No, not always, there are of course use cases where it’s beneficial to use it, for example if you want to extrapolate an integer out of a floating number, which is a good 50% faster than `Math.round()`.
For example  ifyou want to convert a string with pixels on it to just a number, like `32px` to `32`, then you should use `parseInt`, but most of the times you better stick with `Number` instead.
Or even if you want to convert a number from a decimal system to something else.

## Conclusions

Unless some specific cases, where `parseInt` returns what you need and `Number` doesn’t, for 99% of the cases you should better start to use the latter one.

## Update: a few more benchmarks

Just to give a broader picture as there are more ways to convert a string to a number, I also added tests using `parseFloat` and the Unary operator, here there results:

```javascript
function runBench(cb) {
  const start = new Date();
  for (let i = 0; i < 100000000; i++) {
    cb();
  }
  const end = new Date();
  console.log(`It took ${end - start} ms`);
}

const process1 = () => Number('1');
const process2 = () => parseInt('1', 10);
const process3 = () => parseFloat('1');
const process4 = () => +'1';

runBench(process1); // It took 70 ms
runBench(process2); // It took 4552 ms
runBench(process3); // It took 5082 ms
runBench(process4); // It took 412 ms
```

As you can see above, using the `Number()` is still the fastest way to do the conversion.