Solving Roman to Integer in JavaScript: Step-by-Step Guide

Introduction to Roman to Integer Conversion

The "Roman to Integer" problem is one of the most popular algorithmic challenges on platforms like LeetCode, and it's a frequent interview question for JavaScript developer roles. The task is deceptively simple: take a string representing a Roman numeral and convert it into its integer equivalent. Despite its apparent simplicity, the problem tests your understanding of string manipulation, object lookups, and conditional logic — all fundamental skills for any JavaScript developer.

In this tutorial, we'll walk through everything you need to know to solve this problem confidently. We'll start by understanding what Roman numerals are, explore why this problem matters, build a solution step by step, and finish with best practices and optimization tips.

What Are Roman Numerals?

Roman numerals are a numeral system originating in ancient Rome. Instead of using place-value notation like the Arabic numeral system we use today, Roman numerals use combinations of letters from the Latin alphabet to represent values. There are seven basic symbols:

• I = 1
• V = 5
• X = 10
• L = 50
• C = 100
• D = 500
• M = 1000

Generally, numerals are written largest to smallest from left to right, and you add the values together. For example, "XII" is 10 + 1 + 1 = 12. However, there's a critical exception: when a smaller numeral appears before a larger one, you subtract the smaller from the larger. This is called subtractive notation. For instance, "IV" is 5 - 1 = 4, and "IX" is 10 - 1 = 9.

The valid subtractive combinations are limited to six cases:

• IV = 4
• IX = 9
• XL = 40
• XC = 90
• CD = 400
• CM = 900

Understanding this subtractive rule is the key to solving the problem correctly. Without it, you'd incorrectly compute "IV" as 1 + 5 = 6 instead of 4.

Why This Problem Matters

You might wonder why converting Roman numerals is worth your time as a developer. The answer lies in what the problem teaches rather than the problem itself. Here are several reasons this problem is valuable:

It Tests Core JavaScript Skills

Solving this problem requires you to work with strings, loops, objects, and conditional statements — the bread and butter of everyday JavaScript development. If you can solve this cleanly, you demonstrate comfort with fundamental language constructs.

It Evaluates Algorithmic Thinking

The problem forces you to think about how to traverse data and make decisions based on context (the current character versus the next character). This kind of contextual decision-making appears in countless real-world scenarios, from parsing configuration files to processing streams of data.

It's a Common Interview Question

Many companies use this problem in technical interviews because it's quick to explain but reveals a lot about how a candidate approaches problem-solving. A clean, well-reasoned solution signals strong fundamentals.

It Has Real-World Analogues

While you may rarely convert Roman numerals in production code, the pattern of mapping symbols to values and handling context-dependent rules appears in many domains: parsing custom DSLs, handling currency symbols, processing legacy data formats, and more.

Step-by-Step Solution

Now let's build a solution from scratch. We'll approach this methodically, starting with the mapping of symbols to values and then handling the subtractive cases.

Step 1: Create a Symbol-to-Value Map

First, we need a way to look up the integer value of each Roman numeral character. A JavaScript object is perfect for this:

const romanMap = {
  I: 1,
  V: 5,
  X: 10,
  L: 50,
  C: 100,
  D: 500,
  M: 1000
};

This object gives us O(1) lookup time for any character, which is efficient and clean.

Step 2: Iterate Through the String

Next, we need to traverse the input string character by character. For each character, we'll compare its value to the value of the next character. If the current value is less than the next value, we subtract it; otherwise, we add it. Here's the logic in pseudocode:

// For each character at index i:
//   if value[i] < value[i+1]:
//     subtract value[i] from total
//   else:
//     add value[i] to total

Step 3: Implement the Full Function

Putting it all together, here's the complete solution:

function romanToInt(s) {
  const romanMap = {
    I: 1,
    V: 5,
    X: 10,
    L: 50,
    C: 100,
    D: 500,
    M: 1000
  };

  let total = 0;

  for (let i = 0; i < s.length; i++) {
    const currentVal = romanMap[s[i]];
    const nextVal = romanMap[s[i + 1]];

    if (nextVal && currentVal < nextVal) {
      total -= currentVal;
    } else {
      total += currentVal;
    }
  }

  return total;
}

Let's trace through an example to verify. Take the input "MCMXCIV" (which should equal 1994):

• i=0: M=1000, next C=100. 1000 > 100, so add 1000. Total = 1000.
• i=1: C=100, next M=1000. 100 < 1000, so subtract 100. Total = 900.
• i=2: M=1000, next X=10. 1000 > 10, so add 1000. Total = 1900.
• i=3: X=10, next C=100. 10 < 100, so subtract 10. Total = 1890.
• i=4: C=100, next I=1. 100 > 1, so add 100. Total = 1990.
• i=5: I=1, next V=5. 1 < 5, so subtract 1. Total = 1989.
• i=6: V=5, next undefined. No next value, so add 5. Total = 1994.

The function correctly returns 1994. The key insight is that by subtracting the smaller value when it precedes a larger one, we effectively handle the subtractive pairs without needing special-case logic for each combination.

Testing the Solution

A good solution is only as reliable as its test coverage. Let's write some test cases to validate our function across different scenarios:

function runTests() {
  const testCases = [
    { input: "III", expected: 3 },
    { input: "IV", expected: 4 },
    { input: "IX", expected: 9 },
    { input: "LVIII", expected: 58 },
    { input: "MCMXCIV", expected: 1994 },
    { input: "MMXXIV", expected: 2024 },
    { input: "XL", expected: 40 },
    { input: "CD", expected: 400 },
    { input: "CM", expected: 900 },
    { input: "MMMCMXCIX", expected: 3999 }
  ];

  testCases.forEach(({ input, expected }) => {
    const result = romanToInt(input);
    const status = result === expected ? "PASS" : "FAIL";
    console.log(`${status}: "${input}" => ${result} (expected ${expected})`);
  });
}

runTests();

Running these tests should produce all PASS results. The test cases cover simple additive numerals, all six subtractive combinations, and edge cases like the maximum standard Roman numeral (3999).

Alternative Approach: Replace and Sum

There's another popular approach that handles subtractive notation differently. Instead of comparing adjacent characters, you can replace the six subtractive pairs with additive equivalents before summing. For example, replace "IV" with "IIII" (both equal 4), "IX" with "VIIII", and so on. Then simply sum all characters:

function romanToIntAlt(s) {
  const romanMap = {
    I: 1,
    V: 5,
    X: 10,
    L: 50,
    C: 100,
    D: 500,
    M: 1000
  };

  let normalized = s
    .replace(/IV/g, "IIII")
    .replace(/IX/g, "VIIII")
    .replace(/XL/g, "XXXX")
    .replace(/XC/g, "LXXXX")
    .replace(/CD/g, "CCCC")
    .replace(/CM/g, "DCCCC");

  let total = 0;
  for (let char of normalized) {
    total += romanMap[char];
  }

  return total;
}

This approach is arguably more readable because it eliminates the conditional logic inside the loop. However, it creates intermediate strings through multiple replace operations, which uses more memory. For the small inputs typical of this problem, the difference is negligible, but it's worth understanding the trade-off.

Best Practices

Now that we have working solutions, let's discuss how to write the cleanest, most maintainable version of this code.

Validate Input

In a production environment, you should never trust input blindly. Add validation to ensure the input is a string containing only valid Roman numeral characters:

function romanToInt(s) {
  if (typeof s !== "string" || s.length === 0) {
    throw new Error("Input must be a non-empty string");
  }

  const validPattern = /^[IVXLCDM]+$/i;
  if (!validPattern.test(s)) {
    throw new Error("Input contains invalid characters");
  }

  const romanMap = {
    I: 1, V: 5, X: 10, L: 50,
    C: 100, D: 500, M: 1000
  };

  let total = 0;

  for (let i = 0; i < s.length; i++) {
    const currentVal = romanMap[s[i].toUpperCase()];
    const nextVal = romanMap[s[i + 1]?.toUpperCase()];

    if (nextVal && currentVal < nextVal) {
      total -= currentVal;
    } else {
      total += currentVal;
    }
  }

  return total;
}

Notice we also added .toUpperCase() calls to handle lowercase input gracefully, making the function more robust.

Use Meaningful Variable Names

Avoid single-letter variable names except for loop counters. Names like currentVal and nextVal make the code self-documenting and easier for other developers (or your future self) to understand.

Prefer the Comparison Approach

Between the two approaches we covered, the comparison-based solution is generally preferred because it avoids creating intermediate strings and runs in a single pass with O(n) time complexity and O(1) extra space (excluding the fixed-size map).

Consider Using a Map Object

While a plain object works fine, using a Map can be slightly more semantically appropriate and avoids potential issues with prototype properties:

const romanMap = new Map([
  ["I", 1],
  ["V", 5],
  ["X", 10],
  ["L", 50],
  ["C", 100],
  ["D", 500],
  ["M", 1000]
]);

For this specific problem, the difference is minimal, but it's a good habit when building lookup tables in larger applications.

Handle Edge Cases Explicitly

Think about what happens with empty strings, single characters, or strings with only subtractive pairs. Make sure your function handles all of these correctly. Writing comprehensive tests, as we did earlier, is the best way to ensure robustness.

Complexity Analysis

Understanding the time and space complexity of your solution is important, especially in interview settings. For our primary solution:

• Time Complexity: O(n) — We iterate through the string exactly once, where n is the length of the input string. Each iteration performs constant-time operations (object lookups and comparisons).
• Space Complexity: O(1) — The romanMap object has a fixed size regardless of input, and we only use a few primitive variables. The space used does not grow with the input size.

The alternative replace-and-sum approach has the same time complexity of O(n) but uses O(n) space because it creates a new normalized string that can be longer than the original (up to roughly 1.5x in the worst case).

Common Mistakes to Avoid

When solving this problem, developers often stumble on a few common pitfalls. Being aware of these will save you debugging time:

Forgetting the Subtractive Rule

The most common mistake is simply adding all values together without considering subtractive notation. This produces incorrect results for any input containing IV, IX, XL, XC, CD, or CM.

Off-by-One Errors with the Next Character

When accessing s[i + 1] at the last iteration, the value will be undefined. Our solution handles this with the nextVal && check, but forgetting this guard can lead to NaN results or unexpected behavior.

Case Sensitivity Issues

If your function receives lowercase input like "iv" instead of "IV", the lookup will fail unless you normalize the case. Always decide on a case policy and enforce it.

Not Testing Edge Cases

Testing only with simple inputs like "III" or "XII" can give false confidence. Always test with subtractive combinations, the maximum value, and boundary cases.

Conclusion

Solving the Roman to Integer problem in JavaScript is an excellent exercise that reinforces fundamental programming concepts including object lookups, string traversal, conditional logic, and algorithmic thinking. The core insight — subtracting a value when it's smaller than the next value — elegantly handles all six subtractive combinations without requiring special-case code for each one. By following the step-by-step approach outlined in this tutorial, validating your input, writing comprehensive tests, and adhering to best practices like meaningful naming and complexity awareness, you'll not only solve this specific problem but also build the kind of careful, methodical approach that serves you well across all programming challenges. Whether you're preparing for an interview or simply sharpening your skills, mastering this problem is a worthwhile investment in your growth as a JavaScript developer.