parseInt Function with Radix

JavaScript
1

I do not clearly understand how each piece of the code work in these codes below. I will appreciate it if someone can give me a clear detailed explanation of how each piece of the codes work.

Blockquote

How the result it outputs is 19.

Blockquote

function convertToInteger(str) {

  var a = 2;
  return parseInt(str, a);
}

convertToInteger("10011");
3

parseInt converts a string to integer, but here the “str” has no value in it, and “a” has a value of 2. The convertToInteger function has a string value of “10011” as an argument, how does that calculate and output “19”?

4

Str does have a value, it has the string value “10011” which is passed to the parseInt function along with a=2.

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).
(Sourced from MDN)

5

Well, str is a function parameter that takes its value from what is passed in as argument in the function call, like when you call the function as convertToInteger("10011"), str takes value of "10011"

`

6

According to my knowledge, “Radix” is number (from 2 to 36) that represents the numeral system to be used. The function parameter “str” takes the value of “10011”, but how the output becomes 19 is my question. If the parseInt converts str, “10011”, to integer, it will becomes 10011, isn’t it? After the parseInt, it will look like this (10011, 2), and not sure how the output result is 19.

7

because the second parameter says that that is a number in a numeral system in base 2, so “10011” is a binary number that parseInt is converting to a number in decimal system

8

10011 is the 19th number in the binary system, like 19 is the 19th number in the decimal system.

parseInt parses a decimal integer out of a string.

10011 is a decimal integer, but 10011 is the 10011st number in the decimal system, not the 19th.

1 Like
11

One more quick question please. I understand Decimal 19 is 10011 Binary. If I change the 2 (the value of “a”) to 3 it outputs 85. If I change 2 (the value of “a”) to 4, it outputs 261. Can you explain that to me?

12

10011 is a number in all numeral system
The binary system uses only 1 and 0
The ternary uses 0, 1 and 2, so 10011 is not the 19th number anymore, but the 85th
Base 4 uses 0, 1, 2, and 3, and 10011 is the 261st number
Like in decimal that uses 0,1,2,3,4,5,6,7,8,9, 10011 is the 10011th nunber

If you are still confused I suggest some research on the various numeral systems

1 Like
13

What @ILM said, and note that in reality, you’re unlikely to ever use 3 or 4 as a base.

Base 10 is decimal. Base 12 (duodecimal) has had quite a lot of weird political stuff around it since the 17th century as various people have tried to make it a standard over decimal. But we have 10 fingers, not 12, so we use decimal, so base 12 is not common.

Base 60 is common, as it is used for circular counting systems (clock time, degrees).

Base 2 is binary, so it quite useful when dealing with computers. Base 8 (octal) is used as a more compact way of expressing larger binary numbers. Base 16 (hexadecimal) is an even more compact way of expressing binary numbers and you’ll have encountered it with colours (#ffffff, #1d4c5f, the number is the 6 hex digits after the #) - 0 1 2 3 4 5 6 7 8 9 a b c d e f.

EDIT: It might help to have an example here

So say I want to convert a hex colour to an rgb colour, so #ffffff is the same as rgb(255, 255, 255).

function hexToRgb (hex) {
  /**
   * This regex splits a hex string to its component parts (red, green, blue).
   *
   *    ^               # start of string
   *    #?              # possibly a hash character
   *    ([a-f\d]{2})    # two characters, either a number or a, b, c, d, e or f
   *    ([a-f\d]{2})    # two characters, either a number or a, b, c, d, e or f
   *    ([a-f\d]{2})    # two characters, either a number or a, b, c, d, e or f
   *    $               # end of string
   */
  // `exec` will return an array, where the first element is the input,
  // and the next 3 elements are the groups captured by the regex --
  // i.e. the patterns in the regex surrounded by brackets.
  const [_, r, g, b] = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  // Now run parseInt on each of the components, with a radix of 16:
  return `rgb(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)})`;
}

So

hexToRgb("#ffffff"); // returns "rgb(255, 255, 255)"
hexToRgb("#1d1d1d"); // returns "rgb(29, 29, 29)"

And to go the other way, you can take a number and run toString with a radix, kinda the inverse of parseInt:

function rgbToHex (rgbString) {
  // Take a string like `rgb(255, 255, 255)` and grab the numeric values from it:
  const [_, r, g, b] = /^rgb\((\d+),\s*,(\d+),\s*,(\d+)\)$/;

  // The numeric values will be strings, so convert to a decimal integer,
  // then convert to a base-16 numeric string:
  return `#${parseInt(r, 10).toString(16)}${parseInt(r, 10).toString(16)}${parseInt(r, 10).toString(16)}`;
}

or, if you can put the individual numbers in:

function rgbToHex(r, g, b) {
  return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
2 Likes
14

Well explained. Thank you.