How does the parseInt() function work in JavaScript?
JavaScript provides a lot of different built-in functions to help solve common problems (for example, round a number to 2 decimals places, get the time, and many more). One of those common tasks is when developers need to convert a variable into a number. That's why the parseInt function exists.
The parseInt function converts a string into a number.
javascriptconst str = '123456';
// Outputs: 123456
console.log(parseInt(str));
In this article, I will go over, in detail, the parseInt function, its parameters, and common pitfalls. Also, I will show how to use it with real-life examples.
Let’s get to it 😎.
The definition
The parseInt function transforms a string into a number.
Notes:
1. If for whatever reason the function is unable to transform the string into a number, it returns a NaN.
2. This function will ignore trailing spaces.
3. The parseInt function parses strings while ignoring case sensitivity.
4. If the passed value is not a string, it will be converted automatically into one using the toString function.
5. Only the first number is parsed.
The syntax
javascriptparseInt(value, radix)
The first parameter value is required. It holds the value to be parsed.
The second parameter radix is optional. Its default value is 10. It holds the number system (from 2 to 36).
Browser support
All major browsers support the parseInt function 🥳. It is an ECMAScript1 feature (1997).
Examples
Here is the parseInt function in action:
javascript// Outputs: 3434234
console.log(parseInt('3434234'));
// You need to use parseFloat to parse decimal number.
// Outputs: 20
console.log(parseInt('20.14'));
// Outputs: NaN
console.log(parseInt('My name is Tim'));
// Only the first int is parsed.
// Outputs: 30
console.log(parseInt('30 20 49'));
The radix parameter
The optional radix parameter tells the parseInt function that the passed value is of a particular number system (decimal, hexadecimal, binary, etc...).
Its default value is 10 (decimal).
Here is an example of the parseInt function using the binary number system:
javascript// Outputs: 3
console.log(parseInt("11", 2));
In this case, the parseInt function uses the binary system or base 2.
parseInt vs parseFloat
The biggest difference between parseInt and parseFloat is:
- The parseInt function converts a string into an int (NO decimals).
- The parseFloat function converts a string into a float (WITH decimals).
Here is an example:
javascript// Outputs: 20
console.log(parseInt('20.25'));
// Outputs: 20.25
console.log(parseFloat('20.25'));
parseInt vs Number
While at first glance, those two functions seem the same, they have some big differences between them.
The biggest difference between parseInt and the Number constructor is:
- The parseInt function performs parsing.
- The Number constructor performs a type conversion.
Also:
- The Number constructor doesn't detect implicit octals, but parseInt can.
- The parseInt function ignores trailing characters.
Final thoughts
As you can see, converting a string into a number in JavaScript is very easy.
The three simplest ways to do it are:
- Use the parseInt function.
- Use the parseFloat function for floating-point numbers.
- Utilize the Number constructor.
Personally, most of the time, I convert strings into numbers using the Number constructor, but in most cases, you can use either one of those three methods.
I have written more tutorials on JavaScript if you are interested in learning more about this language.
Thank you very much for reading this article.
Please share it with your fellow developers and colleagues.
If you have any questions please ask them in the comments section.
I always check for new comments and answer them.