DEV Community: MichaelX

Roman Numeral Converter FCC Solution

MichaelX — Tue, 16 Aug 2022 23:57:00 +0000

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.

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.

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.

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() 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() 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:

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...

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() 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.

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:

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.

Palindrome Checker FCC Solution

MichaelX — Mon, 15 Aug 2022 22:30:00 +0000

Before we start, I find it essential you know that Aibohphobia is the fear of palindromes which of course is a palindrome itself, and for all the law suitors out there I'm pretty sure someone with this phobia won't be checking out this article in the first place heheh... ;).

Today we're going to be solving FreeCodeCamp's palindrome checker algorithm the first algorithm in this series. Essentially, we're to return a value of true or false depending on whether the input string is a palindrome or not.

A palindrome is a word that is spelt the same way if read from left to right or from right to left and this is not regarding punctuation marks, spaces or even case.

We can test our algorithm using strings such as "leperS RepEl", "AiboHphobIa", "RaceCar", "rotaTor" and so on. But I will be using "eye" for this example.

We will also be testing for numbers and symbols e.g "2_A3*3#A2" to ensure they aren't being considered when checking for our palindromes.

Here is the piece of code we're given:

function palindrome(str) {
  return true;
}

palindrome("eye");

It is important that we understand what we are working with before we start coding.

So, we're given a string to check if it is a palindrome or not, hence from the definition of a palindrome, we are to determine if the string reads the same when read backwards or when reversed. Excluding all non-alphanumeric characters and regardless of case.

For my solution, I will first filter the string, removing all all non-alphanumeric characters. I will use two methods for this which are Regular Expressions otherwise known as REGEX or REGEXP and also using a for loop.

Here is my REGEX approach to filtering the string...

function palindrome(str) {
  const newStr = str.toLowerCase().replace(/\W|_/g, '');

}

palindrome("eye");

Here, I created a variable newStr which takes in the input from the function which in this case is a string and then runs the toLowerCase() and the replace() methods on it.

The toLowerCase() method is used to turn a string to all lower cased, and we do that here to eliminate any case sensitivity issue we might run into as JavaScript is case sensitive. I also used the replace() method which essentially searches for the presence of a character in a given string and then replaces the character with a provided parameter. Here our replace function takes in a Regular expression /\W|_/g which checks for all instances of non-alphanumeric characters and then replaces these characters with an empty string, hence removing them.

I cannot explain REGEX in this post as it is quite complicated to fully understand and is very broad, but the breakdown of the expression is this:
The double slashes (//) at the beginning and end of the expression indicates to JavaScript that it is a Regular Expression. The g is something known as a flag in regex which tells JavaScript to check for all the instances of the characters we don't need and not just the first instance of them. The \W checks for everything that is not a letter, examples are numbers, symbols and spaces, but for some reason underscores or _ aren't included in this matching so _ was used to check for them.The | stands for or in REGEX to match a string pattern or another which in this case it searches for non-alphanumerics or an underscore.

The next method I will use to filter the string is the string looping approach

function palindrome(str) {
  const lettersArr = "abcdefghijklmnopqrstuvwxyz".split('');
  const tempStr = str.toLowerCase();
  let newStr = ""

  for(let i = 0; i < str.length; i++){
    if(lettersArr.includes(tempStr[i])){
      newStr += tempStr[i]
    }
  }
}

palindrome("eye");

Here I created two variables, tempStr and newStr and another variable lettersArr. The lettersArr variable stores all the letters of the alphabet string lowercased and then uses the split() method on them. The split method takes a string and splits it into an array with each split located at a the instance of a character that will be provided as a parameter. Here the split method uses "" an empty string so it returns an array consisting of all the letters of the alphabet in lowercase format. The tempStr variable copies the input string and converts it to lowercase. I am going write code to loop over every character of the tempStr variable to check for non-alphanumeric characters. The newStr currently has an empty string value but it will store our filtered string.

The for loop runs depending on the length of the original input string and then runs the code it contains for each iteration. Within this for loop, for each iteration a series of events occur, which are: the code gets the character in our tempStr variable which is the same length with the original string, so we get each of its characters individually. I then used the includes() method to check if the character at given index is contained in our alphabets array and if it is, this means it is a letter and it will be added to our newStr variable.

Now we have our filtered string, what next?

I am going to create a variable to store our string in reverse format in order to check if we have a palindrome or not.

Note: I will be using the REGEX approach of filtering the string for the rest of the blog just to make the code a bit more concise.

function palindrome(str) {
  const newStr = str.toLowerCase().replace(/\W|_/g, '');
  const palinStr = newStr.split('').reverse().join('');
}

Here, I created a variable I called palinStr to store the reversed string. This variable takes the filtered string and performs some actions on it so as to reverse it. The split('') method splits the string into an array, I've explained that before in the string filtering code. The reverse() method is an array method that reverses an array. It is a built in JavaScript feature. The join() method joins the elements of an array with a separator that is passed in as a parameter, here I passed in "" so it just combines the array items into one word without any separation or spacing.

I would love to show two methods of reversing the string as well, but just to keep the blog from taking up all the bits in dev.to and taking a bazillion years to read, I won't be doing that. Although if you want me to write a seperate blog on strings and or array methods, you can say that in the comments and I will be sure to do just that.

Now I have my filtered string and also my reversed filtered string. What next?

Finally, I will check if the filtered strings newStr and palinStr are the same and return true or false.

function palindrome(str) {
  const newStr = str.toLowerCase().replace(/\W|_/g, '');
  const palinStr = newStr.split('').reverse().join('');

  return newStr === palinStr
}

palindrome("eye"); // true
palindrome("leperS RepEl"); // true
palindrome("Hi there"); // false
palindrome("AiboHphobIa"); // true
palindrome("RaceCar"); // true
palindrome("BobT12_+"); false
palindrome("rotaTor"); true
palindrome("2_A3*3#A2"); true

Here is the final code:

function palindrome(str) {
  const newStr = str.toLowerCase().replace(/\W|_/g, '');
  const palinStr = newStr.split('').reverse().join('');

  return newStr === palinStr
}

palindrome("eye");

I will also be making some blogs on regex very soon as it is a very essential and tricky skill to master when learning JavaScript, web development, or just programming in general.

I will be posting more blogs and articles like this so if you found this blog helpful, be sure to obliterate that like button and annihilate the subscribe button. A follow would also be nice btw cos then I get to post more, and you get to learn more, everybody wins!!! Adios amigo, see you on my next post.