FreeCodeCamp and JavaScript: The parseInt() method

Today we’re going to look at the parseInt() method.  This is really useful when you need an integer but all you have is a string.

Cue MDN. Let’s start with the syntax:

parseInt(string, radix);

There are two parameters up there:

  • string – This is the value you want to parse.  Normally it’s a string, but if not JavaScript will convert it using the toString() method.  If there are spaces in front of it (i.e., ”   56″) these will be ignored.
  • radix – In simple terms, this sets the numeric base system fof the string you gave it.  So, we normally use base 10 (decimal), computers use base 2 (binary) and base 8 (hexadecimal).  Generally, you’ll set this to 10, for decimal.  Note that neither of these values are shown as optional – always set the radix, because if you don’t, you could get some really strange results.

parseInt() will take the string and convert it to an integer.  If the string can’t be converted (it’s a bunch of letters, etc.) it will return NaN.  When it returns an integer, it will convert the string per the radix – what base you have chosen to specify in your second argument above.

If you send it something like 365ksj45, it will return the integer up to the first non-number character (here, that’s k).  If, on the other hand, you send it something like lk35422, you’re going to get NaN back, because the first character is, you guessed it, Not a Number. There’s one exception to all this, though.  If JavaScript sees (for example) 0x13B, it’s going to parse that as hexadecimal (hex) and you’ll get back 315.  One way to check to see if your string can be parsed is to call isNaN on it.  Mind you, you should specify octal or hex as your radix!

Finally, the reverse method (convert the integer back to a string), you would call:

intValue.toString(radix);

So let’s look at some of MDN’s examples.  Every one of these will return a 15!  You may want to review converting numbers back and forth from octal to decimal, hex to decimal, etc, or a lot of these will be…strange to your eyes.

parseInt(” 0xF”, 16);

Okay, so here we have a leading space that’s ignored, a 0x that indicates that this is probably hex, and we’re specifying that the string is indeed base 16, or hex.  0xF in decimal is 15.

parseInt(” F”, 16);

Same as above, but we left the 0x off.  We said we wanted it to be read as hex, so parseInt() was able to figure it out anyway.

parseInt(“17”, 8);

We’ve specified a radix of octal, or base 8.  In base 8, 17 is not 17….it’s 15!

parseInt(021, 8);

We’ve specified a radix of octal, or base 8.  In base 8, 021 is not 21….it’s 15!

parseInt(“015”, 10);

We’ve specified a radix of base 10, or good old decimal.  However, JavaScript ignores that leading 0 – it also realizes that it’s not a hex number because we told it that it was decimal – and returns 15

parseInt(15.99, 10);

We’ve specified a radix of base 10.  Now, this method is parseInt, so we’re going to get an integer back, not a float, so we get 15, not 15.99.

parseInt(“15,123”, 10);

This one is tricky.  It parses the 15 in base 10, like we told it to.  So why don’t we get back 15,123?  Well, because the comma is NaN and so the rest of the string is ignored!

parseInt(“FXX123”, 16);

We specified base 16, or hex.  We get back 15 again, becausew it sees the F, parses that, then runs into X, which is NaN, and it ignores the rest of the string.

parseInt(“1111”, 2);

We specified base 2 (binary).  In binary, 1111 is equal to 15 in decimal.

parseInt(“15*3”, 10);

Wait!  That’s an equation!  Yep, and parseInt() decides that since we told it that we want this interpreted as base 10, it will take the 15, run into an * which is totally NaN, and return just the 15.

parseInt(“15e2”, 10);

I bet you already figured out that e is NaN, so yeah, just the 15 is returned.

parseInt(“15px”, 10);

Yep, px are both NaN.  Just 15 is returned.

parseInt(“12”, 13);

Wait! What?  Base 13???  Well, parseInt90 is smart.  It converts it from base 13 and we get…15!

How about some bogus numbers.

parseInt(“Hello”, 8);
// Not a number at all

Right.  There’s no H in octal, so it doesn’t even try.

parseInt(“546”, 2);
// Digits are not valid for binary representations

Binary numbers are 0 and 1.  No binary number is going to have a 5, 4, or 6, silly human.

What if we want a negative number?  Add a negative sign (-) in front.  All of these will give you -15, and since they are similar to the ones giving you +15 above, I won’t go through them in detail:

parseInt(“-F”, 16);
parseInt(“-0F”, 16);
parseInt(“-0XF”, 16)
;parseInt(-15.1, 10)
parseInt(” -17″, 8);
parseInt(” -15″, 10);
parseInt(“-1111”, 2);
parseInt(“-15e1”, 10);
parseInt(“-12”, 13);

Here’s another hex example, this time returning 224:

parseInt(“0e0”, 16);

Finally, there are ways to make the parse much more strict.  The one below uses a regular expression.  I’m not going to go through this in detail, but I’m including it here for completeness.

filterInt = function (value) {
  if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
       return Number(value);
  return NaN;
}

Remember, always set your radix!!!  See you next time!

Advertisements

One thought on “FreeCodeCamp and JavaScript: The parseInt() method

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s