Roman Numeral Converter FCC Solution
Tags: javascript, algorithms, programming
Published: 2022-08-16 23:57:00

## JUPITER IS UPON US

Who knew ancient Romans where gonna be involved in modern day math? Well I didn't 🤷‍♂️... Some dudes in skirts making us write more code :'( perhaps Jupiter taught them more JavaScript than we know today... I wouldn't be surprised honestly.

We're continuing our FreeCodeCamp's JavaScript Algorithms and Data Structures Series with the one and only Roman Numeral Converter Algorithm. This is the second project in the series and it's a little bit tougher than the first, well not if you're Jupiter! But sorry, Dev.to only accepts humans for now, so it's just gonna be us coffee drinkers today.

Let's start with looking at the code and then I'll explain or perhaps solve it as we go.

```javascript
function convertToRoman(num) {
 return num;
}

convertToRoman(36);
```

This is the code we are to work with, and we're to take in a number as an input and then return the value of the number in roman numerals as the output. Quite ingenious of FreeCodeCamp I'd say.

I have a feeling we're going to be creating some loops soon enough, but we'll see along the way.

The first thing I think we should do is to create a container to hold the values of the roman numerals as strings and their corresponding values in digits. For this we would use a JavaScript object.

```javascript
function convertToRoman(num) {
  const numeralsObj = {
    1000: 'M',
    900: 'CM',
    500: 'D',
    400: 'CD',
    100: 'C',
    90: 'XC',
    50: 'L',
    40: 'XL',
    10: 'X',
    9: 'IX',
    5: 'V',
    4: 'IV',
    1: 'I'
  }

}
```

Here we're using an object `numeralsObj` to store the characters that make up any and every roman numeral value. Since we can use numbers as the key or property name to hold a value or property in a JavaScript object, we're using the corresponding digit values of each roman numeral as the key for each numeral.

Finally we have the first step down, but what is next?

Well the next thing I think we should do is have something to loop over in order to access each value of our `numeralsObj` object. I think using an array would do us some good in this situation so that's what we'll do next.

```javascript
function convertToRoman(num) {
  let numeralsObj = {
    1000: 'M',
    900: 'CM',
    500: 'D',
    400: 'CD',
    100: 'C',
    90: 'XC',
    50: 'L',
    40: 'XL',
    10: 'X',
    9: 'IX',
    5: 'V',
    4: 'IV',
    1: 'I'
  }

  const numberDivision = Object.keys(numeralsObj);
  // returns an array containing all the key names in the numeralsObj variable
// [1, 4, 5, 9, 10, ......, 1000]
  
}
```

Here we are using a variable `numberDivision` to store an array containing each and every key of the `numeralsObj` variable, hence providing us with every digit value we need to loop over as the keys in our object are numbers and not strings. How exactly are we getting this array? Well the [Object.keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) built in JavaScript method provides us with this functionality. It takes an object and returns an array consisting of the keys or names of all the properties of that object. And what do you know, we somehow managed to pick better names than Jupiter would have after all.
`ps: sorry jupiter :')`

There is a slight issue with this though. We have our array that stores the values we need, but this array is sorted by Object.keys() from lowest number to highest number. We want our array to be sorted from highest to lowest number and you'll see just why in a jiff.

We are going to use JavaScript's [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) method for this. The sort method is a little bit too complex for me to fully explain in this blog, but you can always check its documentation to know more about it otherwise, this is my short explanation of what it does. It takes an array and sorts it depending on the callback function passed into it. Otherwise if there is no callback, it performs a default sorting operation.

Here is the code with the sorting method applied:

```javascript
const numberDivision = Object.keys(numeralsObj).sort((a, b) => b - a);
// sorts the numbers in the array from biggest number to smallest number [1000, 900, 500, 400, ........., 1]
```

In summary, the callback function we are passing into the sort method tells it to sort the numbers in the array from biggest to smallest.

Next we are going ahead to implement our loop.
`we're a step ahead of you Jupiter :)... prolly cos u wearing a skirt lol...`

```javascript
function convertToRoman(num) {
  const numeralsObj = {
    1000: 'M',
    900: 'CM',
    500: 'D',
    400: 'CD',
    100: 'C',
    90: 'XC',
    50: 'L',
    40: 'XL',
    10: 'X',
    9: 'IX',
    5: 'V',
    4: 'IV',
    1: 'I'
  }

  const numberDivision = Object.keys(numeralsObj).sort((a, b) => b - a);
  // returns an array containing all the key names (numbers) in the numeralsObj variable and sorts the numbers from biggest number to smallest number [1000, 900, 500, 400, ........., 1]

  let value = num
  let result = ""

  // loops over each number in the numberDivision variable
  numberDivision.forEach(division => {
    
  })

  return result
}
```

Here we are using an [Array.prototype.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) to loop over the `numberDivision` array and check all its values to see which of their corresponding roman numerals will be added to our result string, and just when we should do so.

I also created two variables, `value` and `result`.
We are using `value` to store the input number so we do not have to modify the original input `we abide in the laws of functional programming`. We are also creating `result` in order to store our final roman numeral string.
Notice this variables are created with `let` and not `const` because we are going to change them later in the code.

We are also returning what would be our final result at the end of the function.

`hey Jupiter, it's whooping time, we wrote this code like a piece of pie`
Hey, what do you think all programmers become rappers. It'd be pretty cool actually, we'd be prograppers. If you don't think that's cool, wait until you realize that rn you're just a pro grandma. How cool is that? :(...
`shhhh: Jupiter can't be aware of this.`

Now let's complete the code with the final puzzle piece.

```javascript
function convertToRoman(num) {
  const numeralsObj = {
    1000: 'M',
    900: 'CM',
    500: 'D',
    400: 'CD',
    100: 'C',
    90: 'XC',
    50: 'L',
    40: 'XL',
    10: 'X',
    9: 'IX',
    5: 'V',
    4: 'IV',
    1: 'I'
  }

  const numberDivision = Object.keys(numeralsObj).sort((a, b) => b - a);
  // returns an array containing all the key names (numbers) in the numeralsObj variable and sorts the numbers from biggest number to smallest number [1000, 900, 500, 400, ........., 1]

  let value = num
  let result = ""

  // loops over each number in the numberDivision variable
  numberDivision.forEach(division => {
    // checks the current number and performs code if value is greater than or equal to the number
    while (value >= division) {
      result += numeralsObj[division] // adds the numeral to our result string
      value -= division // subtracts the corresponding digit from the value variable
    }
  })

  return result // final roman numeral
}

convertToRoman(36) // returns "XXXVI"


```

We have created a while loop which checks the numbers in the `numberDivision` array and adds their corresponding roman numerals to `result` if `value` is greater than or equal to the current number being checked. After adding the roman numeral to `result`, it then subtracts the corresponding digit from `value` and checks again until `value` is zero.

This is how it works:

Say we have an input of `5381`, we store this input in `value`, then the while loop starts checking `numberDivision` from its first item which is `1000`. It checks if `5381` is greater than or equal to `1000` and it is, so it runs the code block which adds the value of `1000` in `numeralsObj` which is `"M"` to `result`, then subtracts the current number being checked in `numberDivision` from `value` i.e it subtracts `1000` from `value` and `value` is now left with only `4381`. It then runs the while loop again and again until `value` is not greater than or equal to i.e `value` is less than `1000`, which means `value` is now only `381` and `result` is now `"MMMMM"` because the while loop condition returned `true` five times for `1000`. It then checks for `900`, `500` and `400` which all returns `false`.

`100` is now checked which returns `true` three times until `value` is `81` and `result` is `"MMMMMCCC"`. `90` is now checked, and returns `false`, then `50` is checked and returns `true`, so the code runs. `40` is checked which is also `false`, as `value` is now `31` and result is `"MMMMMCCCL"`.
`10` returns `true` three times when checked and leaves `value` with just `1` and result with `"MMMMMCCCLXXX"`, then `9`, `5` and `4` are checked, they all return `false` until the code checks `1` which returns `true` so `value` is subtracted by `1`, and is now zero and `result` is `"MMMMMCCCLXXXI"`.

Since value is zero and all the numbers in `numberDivision` have been checked, the loop stops and the JavaScript proceeds to the next step which is returning `result` and voila, we have our Roman Numeral.

This is why we needed our array to be in highest to lowest order because when checking, we start with a high value and not a low one or else all our results would be a series of `I's` to as much as input as we put in. But with the highest to lowest order our array uses, it checks the big numbers first and runs code for them if needed before going to the smaller numbers as `value` decreases.

These are the steps we followed:

- First we created an object to store the roman numerals an their corresponding digits.
- Next, we created a variable to store an array of all the digits we need to loop over.
- Next we sorted this digits array from highest to lowest
- Next we created two variables to store our input value and final result.
- Next we created a forEach loop to loop over every element in our digits array.
- Next we used a while loop to check if value is greater than or equal to the current digit in the digits array.
- Next we passed in the required numeral to result and decreased value.
- Lastly, we return our final result which holds the our roman numeral.

Here is the final code: 

```javascript
function convertToRoman(num) {
  const numeralsObj = {
    1000: 'M',
    900: 'CM',
    500: 'D',
    400: 'CD',
    100: 'C',
    90: 'XC',
    50: 'L',
    40: 'XL',
    10: 'X',
    9: 'IX',
    5: 'V',
    4: 'IV',
    1: 'I'
  }

  const numberDivision = Object.keys(numeralsObj).sort((a, b) => b - a);

  let value = num
  let result = ""

  numberDivision.forEach(division => {
    while (value >= division) {
      result += numeralsObj[division]
      value -= division
    }
  })

  return result
}

convertToRoman(36)
```

There are far more faster and lesser code demanding ways of doing this but I find this solution easier to understand, especially for newbies in development.

And just so you know Jupiter, your skirts don't scare us, we have the power of StackOverflow. And you know what they say, 

> he who steals code, eats gold

> and feels bold btw, and probably doesn't feel cold or smthn lyk dat.

`Ok enough with the rhymes I've told, they're just too much I don't think anyone is sold, I might just need to hit the road.`

Thanks for reading and make sure you **do not** subscribe or like the post so I'll get notified to post more. And just like before, see you in the next post.