Hi everyone! And welcome to another eye-shutting adventure in Boring JavaScript. Today we tackle the parseInt() method, a convenient way to convert those pesky strings into pesky integers. And not just any integer – but into whatever numeric base you wish, from 2 to 36. Fascinated? Sleepy? Keep reading and make sure you do fall asleep.

Don’t like to read? Then watch our video.

It’s a Numbers Game

The basic function of parseInt() is exactly what it says – it parses a variable and returns an integer representation of that number. What does it parse? Strings. What is the final value? A number that represents an Integer.

Let’s take a look at an example.

const stringNumber = "1234";
const number = parseInt(stringNumber);
console.log(`Number by Default: ${number}`);

// output: 
// Number by Default: 1234

Line 2 is the parseInt() method. It takes two arguments:

1. The string to parse. This is required.
2. The radix used. This is optional, and will default to 10 – most of the time. More on this later.

In the example above, the “stringNumber” variable contains a string that looks like an integer, so we use the parseInt() method to parse it out and place it into a number variable (in our case, ‘number’). The default radix – that is, the number base – in this case is 10, which means we’ll get numbers that are saved as Base 10.

Not Radial Tires, but Radix

And what is that radix? That is the numeric ‘base’ used to convert the string into a number. Go back to your computer science course. You were told that signals in computers were either ‘on’ or ‘off’ – that is, 1 or 0. That is called “Base 2” counting, as there are only 2 possible numbers to count. If you had three bits together, that meant you could count from 0 to 7, or “Base 8”. Four bits together – hexadecimal counting – used 16 numbers (0 – 9, a – f). That is “Base 16” counting. Humans have 10 numbers, 0 – 9, and that is “Base 10” counting.

All these bases can be passed in the ‘Radix’ argument, or the second argument, in the parseInt() method. Any base from 2 to 36 can be used. Here are some examples:

const stringNumber = "1234";
const number = parseInt(stringNumber);
const number10 = parseInt(stringNumber, 10);
const number16 = parseInt(stringNumber, 16);
const number8 = parseInt(stringNumber, 8);
const number2 = parseInt(stringNumber, 2);

console.log(`Number by Default: ${number}`);
console.log(`Number in Base 10: ${number10}`);
console.log(`Number in Base 16: ${number16}`);
console.log(`Number in Base 8:  ${number8}`);
console.log(`Number in Base 2:  ${number2}`);

/* output
Number by Default: 1234
Number in Base 10: 1234
Number in Base 16: 4660
Number in Base 8:  668
Number in Base 2:  1
*/

If the “stringNumber” variable was interpreted as a Base 10, Base 16, Base 8, or Base 2 number, then you’d get the different results you see above.

Now, why is Base 2 only “1” and not, perhaps, “1010001010” (or whatever)? That is because parseInt() will stop interpreting once it finds an invalid number. In our case, “2” in the string is not a valid number in Base 2 as it only has two numbers – 0 and 1. So parseInt() stopped parsing and gave back to us what it had.

But what if the number is invalid to begin with?

It’s Not A Number and Other Things

Let’s look at some code:

const stringNumber = "2345";
const number = parseInt(stringNumber, 2);
console.log(`Number by Default: ${number}`);

// output: 
// Number by Default: NaN

If parseInt() encounters an invalid character immediately upon parsing the string, it will return ‘NaN’ (‘Not a Number’). In our example above, we are trying for Base 2, but the first character is the number ‘2’, which is an invalid number in Base 2 counting.

Therefore, parseInt() will return NaN if the beginning of the string is invalid.

Let’s look at some other examples:

const base16 = "0x1ae0";
const scientificNotation = "6.1234e7";
const badString = "Cat";
const badString2 = "1Cat";
const bigNumber = "12345678901234567890n";

console.log(`Base16: ${parseInt(base16)}`);
console.log(`Scientific Notation: ${parseInt(scientificNotation)}`);
console.log(`Bad String:  ${parseInt(badString)}`);
console.log(`Bad String2: ${parseInt(badString2)}`);
console.log(`Big Number: Before = ${bigNumber}, After = ${parseInt(bigNumber)}`);

// output
/*
Base16: 6880
Scientific Notation: 6
Bad String:  NaN
Bad String2: 1
Big Number: Before = 12345678901234567890n, After = 12345678901234567000
*/

Some things to note here:

Lines 1 and 7: If the string starts with “0x”, parseInt() by default will consider the string to be Base 16, and therefore default the radix to 16. This is why you cannot assume the default for radix is Base 10. My take? Always specify the radix, and you will never go wrong.

Lines 2 and 8: Be careful when working with scientific notation. You may not get what you expect. IN fact, you won’t get anything what you expect, because with an integer, the period is an invalid character. And that is why you got ‘6’.

Lines 3 and 9: An example of returning NaN for a non-number string.

Lines 4 and 10: However, if the string contains a valid number at the beginning of the string, the parseInt() will simple stop parsing and return whatever number it has already parsed. So if your first character was correct and everything else was wrong, NaN will not be returned.

Lines 5 and 11: You also have to be careful about using parseInt() on BigInts. Just don’t.

The Video

As always, here is our video on the subject.

Shameless Plug

Check out all our videos at: https://www.boringjavascript.com
Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid
Twitter: https://twitter.com/TheVirtuoid
YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as: Javascript parseInt

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com