Palindromes! Palindromes!! Palindromes!!! Ooooh boy. I’m pretty sure that by now you are wondering what these are. You know personally as a software developer when someone utters words like this while communicating with me i gesture awkwardly and give a pretty obnoxious smirk to indicate some level of disinterest. I’m really not a fan of confusing people.

Seat belts on? Let’s do justice to the big word. Shall we?

What is a Palindrome?

A palindrome is a word, number, or other sequence of characters which reads the same backward as forward, such as “madam” or “racecar”. Using a bit of programmer’s speak we could say it’s a string of text that doesn't change when re-arranged in reverse(the opposite direction).

So much for the big word huh?

# The Challenge

Given a string of text, return true or false indicating whether or not the text is a palindrome.

PS: I remember taking this challenge once during Andela’s test.

# Algorithmic Logic

The challenge says “given a string of text” which implies that our function would have a string-typed parameter which we may call “text”. Next, we are to evaluate if the string is a palindrome. To do this, we’ll have to reverse the string first and then compare it with the string that was passed in as an argument.

To avoid issues with letter casing, it seems reasonable to convert text to a single case type, be it upper or lower. Finally, we are to “return true or false” depending on the result of our evaluation. True for when it is a palindrome and false for otherwise.

All said! You shall now proceed to the Code Dojo.

# Code Implementation

There’s quite a handful of approaches to implementing a palindrome checker and this mostly due to the fact that there are several ways to reverse a string and several ways to loop through a string. Hence, there’s a couple of stunts and combos one could pull off. However we’d consider two unique ways to implement this below:

## The Intuitive Approach

Okay, i must confess the title sounds a bit misguiding. This isn’t exactly the first thing everyone would do if they are presented with this challenge. It’s really just a direct approach to solving the problem. How direct? You’d see.

/*

The Intuitive Approach: This is mostly a direct

approach that most would follow. We split the

string into characters, reverse the array of characters,

join the characters back to form a string, and then

test the created string against what was originally received.

*/

function palindrome(text) {

// Split, reverse and join string to get reversed text

var reversedText  = text.toLowerCase()
                    .split('').reverse().join('');

return text === reversedText;

}

I’m sure there’s someone thinking “this really isn’t direct at all”. Oh well! Let’s unveil the “mysteries”, shall we?

• First our function accepts a parameter which is the string of text which is to be tested.
• Next, we convert all letters of the string to lowercase, then call the .split() method on the string that is received and pass it an empty string in order to spread the characters into and array.
• Next, we call .reverse() on the array to re-order its elements in reverse.
• After that we call .join() on the reversed array to form a string once again.

Voila! we have a reversed string. Notice how we chained all these methods in succession making our code concise yet functional. This is one of the reasons i love Javascript. Elegant syntax!

• At the end we return the result of our comparison which is a boolean indicating if the string that was passed in equals the reversed string we created. This tells us if the text that was passed in is a palindrome.

Capiche!!! That was easy wasn’t it?

Let’s try something slightly more complex.

## Looping through and Comparing Characters

Hmmmmmm! I did call this a slightly complex implementation.

Disclaimer: This could be a bit more confusing than you expected. But i’ll break it down to the best of my ability. So, fear not!

Following this approach we try to loop through the string as it was passed in and compare each character with the character currently in the position it’d have taken if the string was reversed.

For example if we were testing the string “developer”, we would compare “d” with “r” because if the string was reversed “d” would take “r”s position. Weird punctuation, I know! *smiles*

Correspondingly we’d compare “e” in position 2 with “e” in position 2 from the end as well. If the string were a palindrome, all of these would test true.

Alright now! Let the code speak for itself.

/*

Looping and Comparing using .every(): This approach allows us to

split the sting into an array of characters and then loop through

the characters comparing them with the characters in their

corresponding positions from the right.

*/

function palindrome(text) {

// Split text into array of characters

let charArray = text.toLowerCase().split('');

// Loop through every character and compare with the

// character in its corresponding position if the string

// was reversed. Then store the result

let result = charArray.every((letter, index) => {

return letter === charArray[charArray.length - index - 1];

});

// Return the result of the evaluation

return result

}

**Dramatic sound effect here**…lol… I’m really just too playful.

Well, i’m sure you must’ve noticed that learning to do amazing things with core Javascript is a fun and adventurous process. Alright let’s do the review thing.

• We converted all letters of the string to lowercase, then used .split() once again to spread the characters of the string into an array.
• Next we use a special array method .every() to loop through the array an perform our check. Basically, the .every() method tests whether all elements in the array pass the test implemented by the provided function. The provided function in our case accepts the current letter and its index in the array as parameters. Then we return the result of the comparison between the letter and the letter currently occupying the position this letter would assume if the string was reversed. Learn more about .every() here.
• Cumulatively, the .every() method would evaluate to true if the test passes in all cases and false if it didn't. The result of that evaluation is what we store in the variable “result” and that’s what our function returns as an indication that the string failed or passed the palindrome check.

Perhaps you noticed too? There’s something intrinsically wrong with our second implementation performance-wise. Maybe try identifying it by yourself before you proceed with the rest of the article?

Okay, here it is. We loop through the entire string and compare every letter with the corresponding letter in its position in reverse. Maybe take out a pen and paper and try to do this manually, then you’d notice that once you loop beyond the string holding the middle position, you are intrinsically repeating comparisons you’ve already gone through in the first half of the iteration. That’s redundant, don’t you think?

In order to fix this, we’d add a check to ensure that we stop looping once we get to the mid-point of the string. I’d really like you to try your hands on optimizing this. I’ll be posting the solution in the comment section and on twitter after seeing what you could come up with.

Have fun while at it!

# Evaluation & Summary

We’ve now examined two ways to implement a palindrome checker in Javascript. Both implementations are okay and could help you pass that coding interview. However as is our concern in this case, we need to determine which has higher performance characteristics as we take a look at their pros and cons.

In my next article i will explore more ways to implement this algorithm as we consider other stricter variations of palindromes, then we’d run a performance test to determine the most highly performant.

Feel free to implement this in other ways and explore the pros and cons of using each method. Also share them with everyone in the comment section (possibly a link to your pen). We look forward to seeing them. Ask questions as well. I’m sure we’d be able find the answers somehow.

Please share this article with other’s too if you found it helpful. You received freely, give freely. I also won’t mind a round of applause you know (***winks***).

Connect with me on twitter will you? @worldclassdev

SUBSCRIBE FOR UPDATES & STAY TUNED FOR THE NEXT ARTICLE ON THE SERIES.

Over the years, Javascript has continued to gain lots of attention as its increasingly vast capabilities continue to expand. It has grown from being just a client-side scripting language for making cool interactive web interfaces to being used extensively on the server-side, for mobile applications, desktop applications, embedded systems, IOT, and so on.

However, it’s become clear that despite the wide range of frameworks available to enhance the strengths of a Javascript developer, it eventually all boils down to understanding the basics. The ability to manipulate vanilla Javascript to do things in the most efficient way is what makes the difference. There’s really so many Javascript developers out there these days and it makes me wonder how many of us really know our stuff.

In this series, we will be implementing various algorithms using Vanilla Javascript. We will explore various solutions and examine the pros and cons of each approach. We’d also be posting links to a CodePen show-casing these implementations. It’ll benefit you most when you try to re-create these solutions on your own as well as make an attempt to improve them.

We’d recommend that you try to do it yourself first and only refer to the code to get pointed in the right direction, confirm your solutions, and study other approaches. The algorithms will range from writing basic to advance algorithms hence, some of these challenges would be indeed very challenging. Do not be discouraged. That’s the point of it all and that’s how you get to grow as a developer.

So sit tight and enjoy the ride. Let’s all grow together!

# The Challenge

Basically, we want to be able to receive a string of text of any length and return the number of vowels found within the text.

# Algorithmic Thinking

Reading through the challenge statement above, you’d notice the statement “receive a string of text”. If you’re quite used to programming in general, this should bring the idea of functions to mind. We could write a function that’d have a parameter called “text”. Text would be a string of any length which would be passed to the function as an argument when it is called.

Next, within the function we have to go through the text and search for occurrences of the English vowels (a,e,i,o,u).

The function then returns the total number of matches(vowels) found. This should bring “return statements” to mind as they basically stop the execution of a function and return a value from that function.

Oooooohhh yeah!!! We got the boring stuff out of the way. These algorithms won’t write themselves, would they?

# Code Implementation

We’d explore two ways to implement this. First we’d follow an Iterative approach and then the use of Regular Expressions.

## An Iterative Approach

In the iterative approach, we would have to loop through each letter of the string passed and then check to see if they match any of the vowels. Before running through the text we would have a counter initialized and assigned a value of zero. In a case where there’s a match, we would increment the counter. Pretty simple right?

Well here’s our implementation:

/*

An iterative approach to counting the number of vowels in a

string of text.

*/

const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {

// Initialize counter

let counter = 0

// Loop through text to test if each character is a vowel

for (let letter of text.toLowerCase()){

    if (vowels.includes(letter)) {

       counter++

    }

}

// Log formatted response to console

console.log(`The text contains ${counter} vowel(s)`)

// Return number of vowels

return counter

}

/*

    ============== Test Case ===================

*/

countVowelsIterative('I am a world-class developer using iterations');

// Logs "The text contains 16 vowel(s)" to the console

// returns 16

Well, that was pretty self explanatory right? Let’s go over some key points.

• First, we declared a constant “vowels” which contained an array of the five English vowels.
• Next, we make use of a for…of loop to iterate through each letter of the text. If you’re not conversant with this, a for…of loop basically creates a loop iterating over iterable objects. Iterable objects could be strings, arrays, maps, sets etc. You can learn more here.
• Notice how we convert all letters of the text to lowercase within the loop. This is because, we don’t want to miss the cases of uppercase vowels within the passed text (trust me that wasn’t intentional).
• Next within the loop, we use an if statement to check if the selected letter is included in the array of vowels we defined earlier. Fittingly, we call the includes() method on the array of vowels to determine whether the array includes the selected letter, returning true or false as appropriate. Learn more about how includes() works here.
• If the condition evaluates to true, we increment the counter.
• After looping through we log a formatted message to the console telling us the number of vowels and then return the counter which is equivalent to the number of vowels found.

Wheeewww!!! That felt good. Now let’s consider a slightly more advanced yet concise approach.

## Using Regular Expressions

Regular Expressions are quite a bit of a trouble for most developers in my experience. Usually, we don’t get to understand the syntax and its application. Hence, we mostly get some snippets online when we need to make use of them. Okay then! Let’s try to change that!

Basically regular expressions help us find patterns or characters/ character combinations within strings. See why this is relevant to us? They’ll help us find the desired characters within the text passed. By extension, regular expressions can help us to do way more remarkable things such us the implementation of content filters. However, my favorite thing about Regular Expressions is the fact that the basics stay same across all languages.

Without further ado, let’s examine the solution. If you’d love to learn more about Regular Expressions in Javascript, go through the Mozilla Developer Network’s documentation here.

Here’s our implementation:

/*

Using Regular Expressions to count the number of vowels in a

string of text.

*/

function countVowelsRegex(text) {

// Search text with Regex and store all matching instances

let matchingInstances = text.match(/[aeiou]/gi);

// Check if matching instances exist then calculate length

    if(matchingInstances) {

    // Log formatted response to console

    console.log(`The text contains ${matchingInstances.length} vowel(s)`)

// Return number of vowels

        return matchingInstances.length

    } else{

        return 0

    }

}

/*

    ============== Test Case ===================

*/

countVowelsRegex('I am a world-class developer uisng Regex');

// Logs "The text contains 13 vowel(s)" to the console

// returns 13

I guess you won’t need a review of this one, would you? Okay! Okay! Let’s look at the solution.

• The first thing we did within the function was to call thematch() method on the text which returns an array of the matches found after matching the regular expression passed as an argument against the text. Learn more about how match() works here.
• The regular expression specifies the letters to be looked for within the brackets[]. For simple patterns, Regular expressions are usually defined within a pair of slashes. Notice the characters “gi” trailing the closing slash?
  “g” stands for a global search which does not return after the first match, restarting the subsequent searches from the end of the previous match.
  “i” stands for case insensitive search which makes the whole expression case-insensitive (for example /xyz/i would match XyZ).
• Next we use a conditional to check if any matching instances were found. The .match() method used above returns an array of the matched items if matches were found and “null” if they weren’t. Hence in the conditional, if “matchingInstances”evaluates to a truthy value(that is an array of matches found), we log a formatted message showing the number of vowels which is same as the length of the array. Then we return the number as well. On the other hand if it evaluates to a falsy value, we return 0 as it means no matches were found.

# Evaluation & Summary

We have now successfully implemented an algorithm that counts the number of vowels in a string of text in Javascript.

Let’s evaluate both methods used. The iterative approach although not as concise as the other is an easier and somewhat more logical approach especially for beginners. However as the result below shows, the Regex method is better optimized.

Click here to run these tests by yourself.

Perhaps we could say the Regex method wins? Nevertheless, both approaches work and could be used in an interview situation.

Click here to view on CodePen.

Was this exciting for you? Let me know in the comment section below. It really was for me. We were able to successfully examine two approaches to implementing an algorithm that helps us count the number of vowels within a given piece of text. In the process, we’ve learnt about some Javascript methods and regular expressions. These tools are very important items in a Modern Javascript Developer’s toolbox.

Feel free to implement this in other ways and explore the pros and cons of using each method. Also share them with everyone in the comment section (possibly a link to your pen). We look forward to seeing them. Ask questions as well. I’m sure we’d find the answers somehow.

Please share this article with other’s too if you found it helpful. You received freely, give freely. I also won’t mind a round of applause you know (***winks***).

Connect with me on twitter will you? @worldclassdev

SUBSCRIBE FOR UPDATES & STAY TUNED FOR THE NEXT ARTICLE ON THE SERIES.

DISCLAIMER: If you are looking for just a brief and shabby explanation of concept/ workings of components in react, this series isn’t for you.

This series takes a “deep” dive into the concept of components in development with Facebook’s react. If you are a novice with no previous knowledge of the library, a newbie in the world of crafting dynamic UI’s with react, or a react developer with a handful of knowledge and experience relating to the library, this series is just for you as it comprehensively sheds light on react components from a beginner’s level to advanced.

This first part of the series sheds some light on the following;

• What is react?
• What is a component?
• Factors to consider when creating components in react

A BRIEF INTRODUCTION TO REACT

React is an open-source JavaScript library maintained by Facebook that can be used for creating views rendered in HTML. Unlike some other similarly popular equally capable technologies (e.g Angular, Ember etc), React is not a framework. It is a library. Thus, it does not, by itself, dictate a framework pattern such as the MVC pattern. You use React to render a view (the V in MVC), but how to tie the rest of the application
together is completely up to you.

The take-home here will be that React is a Javascript library used for creating views. This implies that React helps you design the user interfaces and implement whatever logic may be required as it renders your application.

That said, lets dive into the concept of components.

WHAT IS A COMPONENT?

In a general sense, a component is a part or element of a larger whole. To bring this home lets consider a classroom setting. What are the components of a typical classroom?

I’m pretty sure you’re thinking students, teachers, some pieces of furniture and so on. The figure below presents a sample breakdown. Not exactly the best there is if you ask me. But it does the job.

In react, the same logic applies. The applications user interface is broken down into “smaller”, “reusable” components to which data is passed and logic is applied to render the UI appropriately.

Lets now take time to understand the key factors behind the formation of react components.

HOW SMALL IS SMALL?

Let’s consider the classroom example again. Did you notice that the components we outlined for a classroom aren’t exactly all that there is? That even those components have their own components?

Lets further break down the students component as shown in the figure below. This component comprises of a number of students yeah? So we have a student component! Could we go further? Each student has body parts, Don’t they? So we have the hands, legs, mouth etc. But then the hand is made up of muscles, then the muscles of tissues and tissues of cells. Getting too abstract?

Of course, it is.

It’s getting so abstract that the components are losing relevance of some sort in the larger context under consideration.

The point?

When creating react components, ensure that the components created stay relevant to the application, carrying out a specific function for it.

Word of Caution: Do not bundle things up so much that your components are cluttered and lack a particular focus. And don’t break things down so much that you start having irrelevant components that are of no specific relevance to the application at large. Understand the big picture.

EACH COMPONENT SHOULD CARRY OUT A SPECIFIC FUNCTION RELEVANT TO THE APPLICATION. KEEP IT SIMPLE.

===Lets consider yet another important point ===

RE-USABILITY EXAMINED

Let’s consider the classroom example yet again. The idea of something being reusable certainly implies that its required (needed) in many instances. Making reference to the first figure, we had a students component. If break that down further, we would have a student component. Now that is an ideal example of a reusable component. Because this component would be required in many instances when we have a handful of students.

In react we take out time to carefully observe patterns in the applications user interface. Where a pattern is noticed, a component that typically fits the function required therein is created. It is with this single component that multiple instances are rendered to the application.

Okay now. This is getting pretty boring. No more theories! Let’s get our hands dirty.

In Part Two of this series, we’d learn how to create react components by considering a real-life hosted react application and taking moments to reflect on these concepts.

Stay expectant!!!

Show appreciation for this article by clapping and sharing with your friends. That’s if you did appreciate it of course.