How to Use parseInt() in JavaScript

The parseInt function parses a string argument and returns an integer.

In its most simple form, the function looks like this:

const x = '8';
console.log(parseInt(x)); 
// expected output: 8

While this simple form of the function is easy to understand, it’s important to note that the above syntax is not recommended! This is because there is additional complexity to the parseInt() function, and due to this complexity the above form of the function may lead to undefined results (more details on this below, under radix). The recommended form to use is:

const x = '8';
console.log(parseInt(x, 10)); 
// expected output: 8

Syntax – parseInt() in JS

The syntax of parseInt is as follows:

parseInt(string, radix)

The parseInt function takes two parameters:

• string – a string literal to be parsed;
• radix – an integer between 2 and 36.

String

The string parameter has the following attributes:

• The value to be parsed
• parseInt() parses not only digits, but also characters. See the section String parameter elaborated below for more detail on this.
• White space at the beginning of the argument are ignored (‘   8’ is read as simply ‘8’)
• Strings parsed by parseInt() are not case sensitive. This means that ‘e’ is equivalent to ‘E’ when parsing strings.
• If the argument is not a string, it will be automatically converted into one using the toString() method:

const arr1 = [3, 6];
console.log(arr1.toString()); // expected output: 3,6

• There are only two meaningful symbols for parseInt(): the + and – operators. These are used to indicate if the content is a positive or negative integer:

const x = '+5';
const y = '-6';
console.log([parseInt(x), parseInt(y)]); 
// expected output: [5, -6]

These operators can only be used at the beginning of the string. If they appear later in the string, they are treated by parseInt() just like any other character, causing the function to stop the reading process. See the section String parameter elaborated below for more detail on this.

This means that parseInt() does not perform calculations, even if the string provided represents a valid mathematical equation:

const y = '6+7';
console.log(parseInt(y)); // expected output: 6

In the above example, as the (+) operator did not appear at the beginning of the string, parseInt() stopped the reading process when the operator was reached, resulting in only the value 6 being printed.

Radix

The Radix represents the mathematical base of the number to be parsed. When provided, the string argument is parsed in accordance with the radix (i.e. radix of 2 converts the string input to binary, 8 to octal, 10 to decimal, 16 to hexadecimal, and so forth).

According to MDN, if the radix is undefined, 0 (zero) or unspecified, JavaScript assumes the following:

1. If the string begins with “0x” (a zero followed by an “x”), the string is parsed as hexadecimal (radix = 16).
2. If the string begins only with a zero, the radix might be 8 or 10, it is implementation dependent. The ES5 standard clarifies that a decimal radix should be used, but not all browsers support this yet.

Due to this complexity in how input is handled, it is highly recommended to always specify a radix when using parseInt() to avoid unexpected behavior.

Return value – parseInt() in JavaScript

The parseInt() function returns two different types of results:

1. An integer (by decimal base); or
2. NaN (not a number)

NaN is returned in these two cases:

1. 1. The radix is less than 2 or greater than 36; or
   2. The first non-whitespace character cannot be converted to a number, and is not + / –

String parameter elaborated

The characters that can be converted to a number using parseInt() depend upon the selected radix.

When parseInt() reaches a character that is not numeral in the specified radix, it stops reading the string and returns the integer value parsed up to that point.

For radices above 10, letters of the English alphabet indicate numerals greater than 9. For example, when using base 16 (hexadecimal numbers) ‘A’ through ‘F’ are used (A = 10, F = 15). As mentioned before, these characters are not case-sensitive.

The following example demonstrates this behavior:

const x = '2F';
const y = '2FG3';
console.log(parseInt(y, 16)); // expected output: 47
console.log(parseInt(x, 16)); // expected output: 47

In the above code, despite the strings containing two different values, the same result is returned in both cases. This happens because parseInt(y, 16) stopped reading the string when it encountered the ‘G’ character, as the character ‘G’ is not a valid character in the hexadecimal number system.

Note: The letter “e” is often used to indicate a number stored in scientific notation (for example, 4.38e12 = 4.38 X 10¹²). With parseInt(), “e” is read only if it is included in the radix’s valid character list, and only as a numeral – this can be different than what is intended by the original string. In this specific example, parseInt() stops reading when it reaches the decimal point, making the output of parseInt(“4.38e12”, 10) to be 4.

Tip: Some people use parseInt() to trim the mantissa off of decimal numbers (i.e. providing a value of ‘4.63’ to get the return value of 4). This is not an intended use of this function – you should instead use Math.floor() to achieve the same results.

Tip: Both Microsoft Windows and macOS provide a programmer’s calculator as an option. This mode allows you to see the result of an expression in different numerical bases.

Related Articles:

JavaScript – How to Format Date

JavaScript – How to Get an Input’s Value

JavaScript – How to use the toString method