Converting to Integer with JavaScript parseInt() [Examples]

This article will show you how to use the parseInt() function in the JavaScript programming language.

JavaScript is notoriously loosely typed – meaning that variables of one type (e.g., strings of text, numerical values, boolean values) are converted to others, allowing you to perform mathematical operations on strings and silly things like that.

This causes all sorts of issues – strings containing numbers may not be parsed to the expected value, and all of a sudden, you have angry clients wondering why your shiny new widget counting app is reporting the wrong number of widgets.

The JavaScript parseInt() function will convert a string type value to an integer type value, allowing you to specify the string’s format being parsed to help assist you in making sure you’re only doing mathematical operations with numerical variables.

TLDR: JavaScript lets you do maths operations on strings containing number values. Please don’t do it; it’s a bad idea.

JavaScript parseInt() Syntax

The parseInt() function parses the first argument into an integer value, with an optional radix, and has the following syntax:

parseInt(STRING [, RADIX])

Note that:

• STRING is the string you wish to read and parse to an integer value
  • If the value passed is not a string, it will be converted to one (this has side effects for some types of variables like BigInt – seen below)
• RADIX is an optional radix value, which defaults to 10
  • The radix is the base of the number system – the number of unique digits in the system
    • So, the radix of the number system we use to count everyday things is 10, as it has 10 unique characters (0-9)
    • A radix of 8 will parse octal values, 7 – hexadecimal values, 2 – binary values, etc
  • It is used to determine how the STRING will be parsed
• The function will return either an integer or NaN
  • NaN is a special value which means Not a Number
  • It means that a value which should be a number could not be parsed as a number
  • Any mathematical operation between any other value and NaN will result in NaN
  • It usually means something has gone wrong with a number parsing or mathematical operation and that you need to check your code or handle input differently
• There are some special situations in which parseInt() will behave differently than you may expect:
  • If a non-numeric character is encountered, that character and everything after it are ignored when parsing the number
    • Thus, numbers with an e used to denote an exponent or BigInt values which use the character n should NOT be given to parseInt() as the incorrect value will be returned
    • + and – symbols are an exception to this
  • If the supplied RADIX is not numeric or cannot be parsed as a number, the following assumption will be made
    • If the STRING starts with 0x or 0X, the radix will be assumed to be 16
    • Otherwise, it will be assumed to be 10

parseInt() Examples

These examples all return 15:

parseInt(15)
parseInt('015')    
parseInt(15.99)
parseInt('15,123')
parseInt('FXX123', 16)
parseInt('1111', 2)
parseInt('15 * 3')
parseInt('15px')

These examples return NaN – a special value that means Not a Number:

parseInt('Hello Linux', 8)  
parseInt('867', 2)    // Invalid as digits other than 0 or 1 are invalid for a binary radix (2)

As parseInt() only parses the numerical values in a string, BigInt values lose precision and become integers (as they have an n character at the end in their number format).

This is because the BigInt is converted to a string for parsing, followed by the n character being ignored as it is non-numeric:

parseInt('1958764527465896583n') // Returns 1958764527465896583

Similarly, this shows how non-numeric characters and everything after them will be ignored by parseInt():

parseInt('987_321')  // Returns 987

The full Mozilla documentation outlines even more ways to use the function and what it does when presented with different types of input and different radix values.