How to Convert a Decimal Number to Roman Numerals Using JavaScript

I’m going to walk you through a fascinating project: converting decimal numbers to Roman numerals using JavaScript. Whether you’re a beginner or an experienced developer, this project is a great way to practice your coding skills while learning something new. Let’s dive in!

What Are Roman Numerals

Roman numerals are a numeral system that originated in ancient Rome. They use combinations of letters from the Latin alphabet (I, V, X, L, C, D, M) to represent numbers. Here’s a quick reference:

Roman numerals are often used in clocks, book chapters, movie credits, and more. Converting decimal numbers to Roman numerals is a fun and practical exercise.

Converting Decimal to Roman

The goal is to write a JavaScript function that takes a decimal number (e.g., 42) and converts it into its Roman numeral equivalent (e.g., XLII). To achieve this, we’ll break down the problem into smaller steps.

Define the Roman Numerals

First, we need to map decimal values to their corresponding Roman numerals. We’ll use two arrays:

• One for decimal values.
• One for Roman numerals.

const decimalValues = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const romanNumerals = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];

Notice that we’ve included special cases like 900 (CM), 400 (CD), 90 (XC), etc., to handle subtractive notation in Roman numerals.

Write the Conversion Function

Next, we’ll write a function that iterates through the decimalValues array and builds the Roman numeral string.

function decimalToRoman(num) {
    let roman = ''; // Initialize an empty string to store the Roman numeral

    // Loop through the decimal values
    for (let i = 0; i < decimalValues.length; i++) {
        // While the current decimal value fits into the number
        while (decimalValues[i] <= num) {
            // Append the corresponding Roman numeral to the string
            roman += romanNumerals[i];
            // Subtract the decimal value from the number
            num -= decimalValues[i];
        }
    }

    return roman; // Return the final Roman numeral string
}

Test the Function

Let’s test the function with some examples:

console.log(decimalToRoman(42));   // Output: XLII
console.log(decimalToRoman(1987)); // Output: MCMLXXXVII
console.log(decimalToRoman(2023)); // Output: MMXXIII

Explanation of the Code

1. Mapping Values:
   • We use two arrays, decimalValues and romanNumerals, to map decimal numbers to their Roman equivalents. This ensures that we handle subtractive notation correctly.
2. Looping Through Values:
   • The for loop iterates through the decimalValues array. For each value, the while loop checks if the value fits into the input number.
3. Building the Roman Numeral:
   • If the value fits, the corresponding Roman numeral is appended to the roman string, and the value is subtracted from the input number.
4. Returning the Result:
   • Once the loop finishes, the function returns the complete Roman numeral string.

Adding Practical Functionality

To make this function more practical, we can add input validation and error handling. For example, Roman numerals can only represent positive integers, so we should ensure the input is valid.

function decimalToRoman(num) {
    // Check if the input is a valid number
    if (typeof num !== 'number' || num <= 0 || num >= 4000) {
        return 'Invalid input. Please enter a number between 1 and 3999.';
    }

    let roman = '';
    for (let i = 0; i < decimalValues.length; i++) {
        while (decimalValues[i] <= num) {
            roman += romanNumerals[i];
            num -= decimalValues[i];
        }
    }

    return roman;
}

Example Output

Here are some examples of the function in action:

console.log(decimalToRoman(42));   // Output: XLII
console.log(decimalToRoman(1987)); // Output: MCMLXXXVII
console.log(decimalToRoman(2023)); // Output: MMXXIII
console.log(decimalToRoman(0));    // Output: Invalid input. Please enter a number between 1 and 3999.
console.log(decimalToRoman(4000)); // Output: Invalid input. Please enter a number between 1 and 3999.

Final Thoughts

Converting decimal numbers to Roman numerals is a classic programming problem that combines logic, arrays, and string manipulation. By breaking the problem into smaller steps and using arrays to map values, we can create an efficient and elegant solution in JavaScript.

This project is a great way to practice your coding skills and learn about an ancient numeral system. You can further enhance the function by adding features like:

• Support for larger numbers: Roman numerals can technically go beyond 3999, but they require special notation.
• User input: Create a simple web interface where users can input a number and see the Roman numeral result.
• Reverse conversion: Write a function to convert Roman numerals back to decimal numbers.