Palindrome Checker FCC Solution
Tags: javascript, algorithms, programming
Published: 2022-08-15 22:30:00

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:

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

```javascript
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

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

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

```javascript
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:

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