Categories
Opinions

How To Reverse A String In JavaScript

JavaScript algorithm like how to reverse a string is a well know JavaScript Challenge. Solving it will really teach you different techniques of JavaScript string manipulation. In this article, we will be going through all the steps involved in successfully outputting a “Hello World” in its reversed form as “dlroW olleH”.

So let’s get cracking.

Problem

The given data can be any string. The string is not limited to a single world.

var name = "John Doe";
var loremText = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi modi aliquid alias distinctio necessitatibus porro consequuntur commodi voluptate aliquam autem, impedit inventore culpa hic aut laudantium assumenda officiis rem.";

As you can see the string could just be a name of person or it can go as long as entire paragraph.

How to reverse a string in JavaScript Solution

The solution to this JavaScript Algorithm isn’t straight forward. As I mentioned in the beginning, JavaScript doesn’t comes with method like reverse(); that we can attach to a string to magically return us string in a reverse order. But Arrays do have a reverse method.

You guessed it right. In order to solve this JavaScript challenge, we need to covert our string into arrays. Our entire solution is consisting of following three steps. (For the sake of understanding I am solving this particular JavaScript Challenge in three steps. Otherwise we can achieve this in one line which I will explain later)

  1. Splitting our string into JavaScrpt Array.
  2. Reversing all the elements of Array.
  3. Converting our Array elements back to the string.
  4. [Optional] One line solution to this JavaScript Algorithm

Step 1: Splitting our string into JavaScript Array

String.split(); splits a string literal into array of strings based on the defined separator. This function accepts a separator or delimiter. The most common delimiter found in strings is space or ” “. Other examples are – (dast), “/” (slash) etc. This method also accepts regular expression as a separator and one optional limit parameter. For full documentation please visit this mdn article.

Well hang on if above paragraph is hard to get hold of, because I will backup my words with an example. Consider following code snippet. Do not miss comments as they explain the code.

var string = "The spectacle before us was indeed sublime.";
var stringArray = string.split(" "); // Here we are separating our string wherever empty space is found.
console.log(stringArray); // Results into: ["The", "spectacle", "before", "us", "was", "indeed", "sublime."]

Now looking at above code snippet, we can see that the separator is removed and sub-strings are returned in the form of an array.

So why we converted our strings into an Array when we only have to deal with strings. Let’s find out that next.

Step 2: Reversing all the elements of Array

Array.reverse() is very straight forward. It reverses position of elements in place. Which also means that it mutates the original array ( not like string.split(” “) which returns something new rather than modifying original string). So let’s see this in action.

stringArray.reverse();
console.log(stringArray); // ["sublime.", "indeed", "was", "us", "before", "spectacle", "The"]

Now we have array in reversed form. We just need to tie the array elements into a single entity.

Final Step: Converting Array elements back to the string

We have reached the final step of solving this JavaScript Algorithm. Array.join() accepts a separator just like we provided to the split method of String. In our case we will stick with empty space. One thing to notice is that if we omit the separator parameter, our sting will be joined with comma’s. An empty delimiter parameter will result into string all in one line. Here is how.

var reversedString =  stringArray.join(' ');
console.log(reversedString); //"sublime. indeed was us before spectacle The"

//If we omit the separator parameter then what happens
console.log(stringArray.join()) //"sublime.,indeed,was,us,before,spectacle,The"

// And if we use an empty separator (Note that there is difference between empty and space separator
console.log(stringArray.join('')) //"sublime.indeedwasusbeforespectacleThe"

 

[Optional] One Line Solution

Now that you know all the required pieces. We can go a little advance by combining all the above steps in one line as:

var string = string.split(' ').reverse().join(' ');
console.log(string); //"sublime. indeed was us before spectacle The"

 

Conclusion

Hence we have successfully managed to reverse a string using above 3 steps process. I have also provided following codepen to play with different strings and separator types.

See the Pen JavaScript Challenge Algorithm : Reverse a String by Samiullah Khan (@samiullah1989) on CodePen.6143

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.