JavaScript’s parseInt function is all about converting a string to an integer. The function takes a string value as an argument and converts it to a numerical value with no decimal places, or alternatively the value NaN. ParseInt has a total of two parameters and thus takes two arguments. The second parameter specifies a radix value (i.e., a value representing the mathematical base that will be used when converting the string value to a number).

A simple example using the conventional base-10 (decimal) counting system looks like this:

1 2 3 4 5 6 7 |
<span style="font-weight: 400;">var x = "1";</span> <span style="font-weight: 400;">console.log(x, typeof x); //1 string</span> <span style="font-weight: 400;">x = parseInt(x, 10);</span> <span style="font-weight: 400;">console.log(x, typeof x); //1 number</span> |

Live code example: https://codepen.io/anon/pen/NNVryN?editors=0010

If no argument is passed to parseInt for the radix value, the default value of base-10 will likely be employed. Alternatively, you can 2 for the radix value to tell the parseInt function to use the binary (base-2) numbering system; a value of 8 will tell parseInt to use the octal numbering system; and a value of 16 will tell the parseInt function to use the hexadecimal, or base-16, numbering system. With bases greater than 10, letters of the alphabet are used to represent numbers greater than 9. Wikipedia gives more information about numbering systems; including the binary, octal, decimal, and hexadecimal systems, which have their own entries: https://en.wikipedia.org/wiki/List_of_numeral_systems#Standard_positional_numeral_systems.

To show an example of using a non-decimal system, let’s look at an example of converting a binary number in to an integer in the base-10 system:

1 2 3 4 5 |
<span style="font-weight: 400;">var x = 10;</span> <span style="font-weight: 400;">x = parseInt(x, 2);</span> <span style="font-weight: 400;">console.log(x); //2</span> |

Live code example: https://codepen.io/anon/pen/oxRLJV?editors=0010

See that? The variable x was given a value of 10. In binary, a value of 10 (i.e., “one zero”) is equivalent to 2 in the decimal system. We passed 10 to the parseInt function and specified a radix of base-2. The function returned the integer value 2, which is the integer equivalent of “one zero.” Pretty nifty!

So what happens if we pass a numerical value with a decimal point to the parseInt function? Let’s take a look:

1 2 3 4 5 |
<span style="font-weight: 400;">var x = 3.14;</span> <span style="font-weight: 400;">x = parseInt(x, 10);</span> <span style="font-weight: 400;">console.log(x); //3</span> |

Live code example: https://codepen.io/anon/pen/bpyeZw?editors=0010

Would you look at that? The parseInt function took our numerical value with a decimal place and parsed it in to an integer. It doesn’t get more titular than that!

But… what if we pass a non-numerical value to parseInt? What happens then? Here’s an example:

1 2 3 4 5 |
<span style="font-weight: 400;">var x = "Hola World!";</span> <span style="font-weight: 400;">x = parseInt(x, 10);</span> <span style="font-weight: 400;">console.log(x); //NaN ...or, Not a Number</span> |

Live code example: https://codepen.io/anon/pen/ONYXGN?editors=0010

That’s right, if parseInt is passed an argument that doesn’t readily convert to a numerical value, then the returned value will be that of NaN (or Not a Number). If the function is passed a combination of numerical and alphabetical string values, then the function will convert the numerical characters to a integer and discard the remaining alpha characters. Here’s that in action:

1 2 3 4 5 6 7 |
<span style="font-weight: 400;">var x = "123UnoDosTres";</span> <p style="text-align: center;"><a class="mb-button mb-style-raised mb-size-default mb-corners-default mb-text-style-default " style="background-color: #ba4033;" href="/courses/javascript-training-courses/">Explore JavaScript Courses</a></p> <span style="font-weight: 400;">x = parseInt(x, 10);</span> <span style="font-weight: 400;">console.log(x); //123</span> |

Live code example: https://codepen.io/anon/pen/EKzyze?editors=0010

So there you have it; the basics of JavaScript’s parseInt function. Remember that parseInt’s primary purpose is to take a string value and convert that value to an integer (no decimal places) of the type number. You can specify the base (or counting system) that you want to use. If the function is passed a value that cannot be readily converted in to a number, then parseInt will return a value of NaN.

Additional information on JavaScript’s parseInt function can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

#### Kurt Cagle

#### Latest posts by Kurt Cagle (see all)

- Creating Network Diagrams With Vis.js - May 26, 2017
- What Does ES2017 Bring to JavaScript? - April 28, 2017
- Decorating (your Javascript) for Fun and Profit - February 20, 2017