CodeWars: Reverse Word Challenge

Breaking down our first coding challenge

Kent Roth
Kent Roth
Jun 1, 2019 · 5 min read
Image for post
Image for post

Introduction

Recently, I have been spending time working on the various code challenges at . Initially, I was having trouble with the challenges or would feel completely lost on how to complete them, but after spending more time learning JavaScript, I started to put some of the problems together. In this series, I want to break down some of these challenges and discuss how I completed them.

The Reverse Words Challenge

In this piece, I’ll be covering the Reverse Words challenge. The goal of this challenge is to reverse the word in a string, and if there are multiple words in the string, they will stay in the same place, but the words would be backward. For this challenge, the string is “The quick brown fox jumps over the lazy dog.” and the goal is to return“ehT kciuq nworb xof spmuj revo eht yzal .god”. I’ll be going over .split(), .reverse(), and .join() and have included links to MDN for each of these at the bottom of the post.

Let’s Get Solving

function reverseWords(str) {
return str
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

This is what we are starting with. We have a function that will take one argument that is a string. Initially, you might be thinking that we can do str.reverse() to get started, but unfortunately .reverse() only works on an array. Instead, the first thing we need to do is use str.split(‘’) to return an array of characters. For this, you can use .split(‘’) or .split(‘ ‘). If you are using split with no space between the quotations, it will split after every character. If you use split with a space between the quotations, it will split at every space in the string. For this challenge, I chose to use .split(‘').

function reverseWords(str) {
return str.split(‘’)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Output: [‘T’, ‘h’, ‘e’, ‘ ‘, ‘q’, ‘u’, ’i’, ’c’, ’k’,’ ‘, ‘b’, ’r’, ’o’, ’w’, ’n’, ’ ‘, ’f’, ’o’, ’x’, ’ ‘, ’j’, ’u’, ’m’, ’p’, ’s’, ’ ‘, ’o’, ’v’, ’e’, ’r’, ’ , ’t’, ’h’, ’e’, ’ ‘, ’l’, ’a’, ’z’, ’y’, ’ ‘, ’d’, ’o’, ’g’, ’.’].

Now that we have this massive array that is split at every character, we can add .reverse() and flip this thing around. When using the .split() and .reverse() methods you do not need to make different variables and chain them together, you can simply just add them on like: str.split(‘’).reverse(). Let’s check the output and see what we got:

function reverseWords(str) {
return str.split(‘’).reverse()
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Output: [‘.’, ’g’, ’o’, ’d’, ’ ‘, ’y’, ’z’, ’a’, ’l’, ’ ‘, ’e’, ’h’, ’t’, ’ ‘, ’r’, ’e’, ’v’, ’o’, ’ ‘, ’s’, ’p’, ’m’, ’u’, ’j’, ’ ‘, ’x’, ’o’, ’f’, ’ ‘, ’n’, ’w’, ’o’, ’r’, ’b’, ’ ‘, ’k’, ’c’, ’I’, ’u’, ’q’, ’ ‘, ’e’, ’h’, ’T’]

We are getting closer to what we want but are not there yet. Now we need to get this thing put back together and into a string so we can do some more work on it. That is where .join() comes in. We use .join() just like we used .split(). For this, we need to add the same argument to .join() that we did on .split():

function reverseWords(str) {
return str.split(‘’).reverse().join(‘’)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Output: ‘.god yzal eht revo spmuj xof nworb kciuq ehT’

It looks like we are almost there. The words are flipped, but now they are in the wrong positions. Looking back at the goal, we need to get “ehT” back into the first spot and “.god” back into the last spot. To do this, we need to split the string back up into an array so we can reverse it again. This time we will use .split(‘ ‘). Make sure there is a space between the quotations, this lets us split at the spaces instead of after every character.

function reverseWords(str) {
return str.split(‘’).reverse().join(‘’).split(‘ ‘)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Output [ ‘.god’, ‘yzal’, ‘eht’, ‘revo’, ‘spmuj’, ‘xof’, ‘nworb’, ‘kciuq’, ‘ehT’ ]

We are getting closer to finishing this thing off! Now that we have the string split into an array, we can reverse the order of the words. .reverse() works by reversing the order of each item in the array, so when we use it now it will not change the letters in each string, it will just flip the index position of each string in the array.

function reverseWords(str) {
return str.split(‘’).reverse().join(‘’).split(‘ ‘).reverse()
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Output [ ‘ehT’, ‘kciuq’, ‘nworb’, ‘xof’, ‘spmuj’, ‘revo’, ‘eht’, ‘yzal’, ‘.god’ ]

That looks a lot better! The last thing we need to do to complete this challenge is to get this array converted back to a string, we will do that by using .join() again. The last .split(‘ ‘) we used we had a space between the quotation marks, when we use .join(‘ ‘) it will need to be the same.

function reverseWords(str) {
return str.split(‘’).reverse().join(‘’).split(‘ ‘).reverse().join(‘ ‘)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Output ‘ehT kciuq nworb xof spmuj revo eht yzal .god’

There it is! This is the final function that delivers the results we are looking for:

function reverseWords(str) {
return str
.split(‘’)
.reverse()
.join(‘’)
.split(‘ ‘)
.reverse()
.join(‘ ‘);
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);

Conclusion

When you are chaining these calls together, they do not all need to be on the same line. Once I save, prettier takes over and spaces them all out for me to make it easier to read. When things are broken up like this to me, it feels like my eyes slide over them easier, and I can understand what is going on faster.

Here are some links to MDN if you want to learn more about split, reverse, or join:

I appreciate you taking the time to read this, and I hope it helped you in some way. This is my first blog post explaining code, so if you have any suggestions or feedback to help me in improve, feel free to drop a comment here. Thank you for your time and I hope you stop by for my next post.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store