Codewars solution: ‘Stop gninnipS My sdroW!’ .split() / .map()
My previous posts have dealt with javascript array methods .split(), .forEach() and .map(), the last of which I pointed my readers towards…
My previous posts have dealt with javascript array methods .split(), .forEach() and .map(), the last of which I pointed my readers towards a fantastic Codewars challenge named ‘Stop gninnipS My sdroW!’ as a great way to practice using these methods. For this article I will draw on those previous articles to outline my solution to the task.
Stop gninnipS My sdroW!
Write a function that takes in a string of one or more words, and returns the same string, but with all five or more…www.codewars.com
For those unaware, according to their docs, codewars is ‘a platform that helps you learn, train, and improve your coding skills by solving programming tasks of many types and difficulty levels’. There are coding challenges for all levels of experience, with users levelling up (well technically down) their kyu level, starting at 8.
I would highly reccomend setting up an account and working through the challenges, whether you are experienced or new to coding. Chipping away and researching the tasks is a great way to build resilience in regards to problem solving, as well as speed up your solutions with newly learned techniques and syntax. Without further ado, here is the task:
As outlined above, we are given a string of one or more words, this string will only consist of letters and spaces. The long and short of the task is that we need to create a function that takes this string, and returns another string whereby all words with 5 or more letters are reversed.
So first things first lets set up the function and return the original string to ensure everything is in order. We also want to write some pseudo-code to outline the steps we want to make in order to achieve out criteria, as well as a test input to work with.
We now have this set up nicely and have our steps laid out with a test input of "This is another test", meaning we are trying to achieve an output of “”This is rehtona test” with “another” being the only reversed word as it the only one that has 5+ characters.
lets go about splitting this string into an array of words. By using the .split(‘ ’) syntax with a space in between the quotation marks we instruct the split method to split the string at each space, with the space being removed leaving each set of characters as an item in the array.
As mentioned in my ‘.split() it up’ article, if we were to ditch space between the quotation marks we would obtain an array of each individual character including spaces, although that would not be useful to us here.
We can now move onto steps 2 and 3 of our pseudocode, whereby we loop through out newly formed array of word items, work out whether each item is 5+ character (reversing item if so), and then returning a new array made up of our manipulated (if neccessary) items.
.map() is perfect for this, as it always returns a new array, with the potential for each item within the array to be manipulated.
The above snippet shows is mapping over out array of words and parsing each item(word) to a function that checks if a words character length is 5 or above. If the item does indeed meet this criteria, the item is reversed, if not, the item is returned without amendment. As we are using the .map() method to iterate over this array and perform functions on each item, we are provided with a neat newly formed array as the output.
You may notice when reversing our word, we had to take a somewhat of a 3 step process with ‘return word.split(“”).reverse().join(“”);’. This is because much like the .map or .foreach methods, .reverse() only successfully runs on an array. This means that in order to reverse our word and return it as a string we had to split it into an array of it’s characters via .split(“”), then reverse it with .reverse() which leaves us with reversed array of the words characters. Finally we re-join this array using .join(“”), I will write a more in depth post on this process in the future.
This mention of the .join(“”) method leads us on nicely to our final step of joining our new array. We now have the correct output for our task although it is in array form. We will now utilise the .join(“”) method to give us a string as an output, thus completing out task and banking some sweet codewards kata (essentially Codewars points)!
As we can see by chaining .join(“ ”) to the end of our methods we return the correct string in regards to the task at hand. .join() can be seen as at lot like the opposite of .split(), with it’s ability to take an array and return a string. By throwing a space between the quotation marks we ensure spaces are placed between the arrays items when returning the string. Using .join(“”) without anything between the quotation marks would simply return a string or concatenated array items.
It has been a pleasure writing these words for everyone and I wholeheartedly appreciate all who read this article and finds it useful. As mentioned previously, I have written a few articles about methods relevant to this task:
Javascript Array Methods: .map()
.map() is one of the most frequently used javascript array methods. It is frequently utilised in modern frameworks such…medium.com
.split() it up!
The javascipt .split() method is something I have implemented over and over in my relatively short programming journey…medium.com
Please follow me on medium and Twitter for updates and new stories every week.