How to Create a Roman Numeral Converter – Freecodecamp Project

This article guides you to solve the Roman Numeral Converter Project in freeCodeCamp’s JavaScript Algorithms and Data Structures Certification

Introduction

The second JavaScript Algorithms and Data Structures Certification Project on freeCodeCamp requires developers to build a simple Roman numeral converter.

Remember the Roman Numerals we learned in primary school? 1 = I, 2 = II, 3 = III, 4 = IV, 5= V… 10 = X, and so on.

This project tasks you to write a program that takes Arabic numerals (1, 2, 3) as arguments and converts them to their Roman equivalents. For instance, if you pass 100 to the converter, it should return C.

Are you interested in growing your brand through content marketing, check our offerings to see how we can help you by creating quality articles and blog posts for your blogs and websites.

What do you learn by completing the Roman Numeral Converter Project?

After completing this challenge, you will be able to do the following:

• create a Roman numeral converter (of course)
• write a JavaScript function
• create an object in JavaScript
• return the property names of an object using the Object.Keys() method
• reverse an iteration using the .reverse() method
• iterate through the keys of an object using the forEach() method
• use the while loop to check for conditions and return correct information based on the existence or otherwise of those conditions.

How to Create a Roman numeral Converter

The following steps will guide you to create a Roman numeral converter with JavaScript:

1. Create a function called convertToRoman() and pass ‘num’ as its parameter. The parameter, ‘num’ holds the Arabic numerals to be converted.

function convertToRoman(num) {
}

2. Create an object containing the key Arabic numerals as properties and store their Roman equivalents as the values of those properties. This serves as a table of conversion.

const numerals = {
   1: 'I',
   4: 'IV',
   5: 'V',
   9: 'IX', 
   10: 'X',
   40: 'XL',
   50: 'L',
   90: 'XC',
   100: 'C',
   400: 'CD',
   500: 'D',
   900: 'CM',
   1000: 'M'
 };

You can construct other Roman numerals using the keys in the numerals object. To get the conversion right, you need to iterate from the largest Roman numeral, which is 1000, to the least. For every num you pass into the converter, it checks the number of thousands, or the number of hundreds, and so on, in that num.

3. Create an empty string to store the Roman numerals after conversion.

let romanizedNumerals = '';

4. Create an array with only the keys (Arabic numerals) of the numerals object and reverse them to start from the largest. You assign it to another variable name. I called mine ‘arabicNumerals’

const arabicNumerals = Object.keys(numerals).reverse();

Object.keys() method returns the property names of a given object

The .reverse() method logs the results in a reversed order, from the last (largest unit) to the first (Smallest unit).

5. Iterate through all the ArabicNumerals starting from 1000

What the iteration aims to achieve is this: 

• if the num passed as argument is greater than or equal to 1000, add M to romanizedNumerals and subtract 1000 from num
• if num is still greater than or equal to 1000, add another M to romanizedNumerals and subtract another 1000 from num
• continue with this process till the num is no longer greater than or equal to 1000
• then if the num goes below 1000 but above 900, add CM (900) to romanizedNumerals and continue the same process
• if the num is greater than or equal to 500, add D to romanizedNumerals and subtract 500 from num
• if the num is greater than or equal to 100, add C to romanizedNumerals and subtract 100 from num
• continue the same process till the number is no longer greater than 100
• then if the num is greater than or equal to 10, add X to romanizedNumerals and subtract 10 from the num till it is no longer greater than 10

With this iteration, the converter can construct the Roman numerals for each number.

For instance, if 2210 is passed as the num, the converter checks the num and discovers that it is greater than 1000. Hence, it adds an M to romanizedNumerals and subtracts 1000 from the num. This leaves it with 1210.

The converter checks again, and discovers that the num is still greater than 1000, so it adds another M to romanizedNumerals (making romanizedNumerals so far to be MM) and subtracts another 1000 from num. That leaves num with only 210.

The converter checks once again and finds that num is now less than 1000 but greater than 100, so it adds C (100) to romanizedNumerals and subtracts 100 from num. This leaves num with 110.

The converter checks again and finds that num is still = or > 100, so it adds another C and subtracts 100 from the num, that leaves num with 10. The converter checks again and finds that the num is still greater than or equal to 10, hence it adds X and subtracts 10 from num. That leaves num with 0.

So the converter has no other number to check. Hence it completes the iteration and logs MMCCX as the roman numeral of 2210.

To write the code that achieves this process, use the forEach() method to iterate through the property names of the object (which you retrieved with the Object.keys() method and assigned to the variable arabicNumerals).

arabicNumerals.forEach(key => {
    while (key <= num) {
      romanizedNumerals += numerals[key];
      num -= key;
    }
  });

So what this code does is this: 

• use the forEach() method to iterate through the object properties (keys), starting from the largest
• use a while loop to check if the key is less than or equal to the num you want to convert to Roman numerals (that is, if the num is greater than or equal to the key, starting from 1000)
• if it is, add the Roman numeral of that key to romanizedNumerals
• then subtract that particular key from the num.
• when the converter is done with the first key, move over to the next key on the object which is 900 and perform the same iteration

6. Return romanizedNumeral

return romanizedNumerals;

That is it.

The entire code will be:

function convertToRoman(num) {
 const numerals = {
   1: 'I',
   4: 'IV',
   5: 'V',
   9: 'IX',
   10: 'X',
   40: 'XL',
   50: 'L',
   90: 'XC',
   100: 'C',
   400: 'CD',
   500: 'D',
   900: 'CM',
   1000: 'M'
 };
  let romanizedNumerals = '';
  const arabicNumerals = Object.keys(numerals).reverse();
 
  arabicNumerals.forEach(key => {
    while(key <= num) {
      romanizedNumerals += numerals[key];
      num -= key;
    }
  });
 return romanizedNumerals;
}

Conclusion

Hopefully, this explanation makes you understand the solution better. I also hope that this enhances your understanding of basic JavaScript processes.

if you’re in need of high quality technical content, check out our unique offerings and let us do the writing for you while you focus on other business tasks.