6 Ways to reverse a string in JavaScript
By: Ahmed Khelili
Tags: Solutions, Web Development, Javascript Tips, JavaScript, Javascript Development

Photo by jisoo kim on Unsplash

This is a classic interview question, that you’ll mostly encounter when applying for job as a Java Script developer.And as many other algorithms there are many variations for solving this problem, and in this short blog I hope I can help you solve it in 6 different ways.

1.For loop

The first approach is the most obvious one, using a for loop to traverse our string backwardly, and storing the characters in a new string that we declare(notice we’re using let because we need reassign the value at each iteration).

This approach work, but if you don’t prefer the ugly for loops, than here is another approach.

2.The reverse method

This approach is much cleaner and shorter, we use the split method to transform our string to an array, and then use another built in method to reverse our array.Finally we use the join method to transform our array back to a string type.

3.Recursion

Probably not the most used approach to reverse a string in JavaScript, and probably not the best case for a recursion, but it certainly a good approach.

We start our function by defining a base case(that’s how we tell our function to stop calling itself so we don’t end up with a stack overflow), we use the slice method to take a chunk from the string, starting at index 1, and then adding the character at index 0 at the end of the string, we keep doing this until there’s nothing left in our original string.

4.The spread operator

One of the best new features that was introduced in ES6 is the spread operator, we can use it with any iterable element like in our case a String.

The syntax is three dots followed buy our string inside array brackets. It's very similar to the second approach, we only replace the split method with the spread operator.

5.The reduceRight method

reduceRight is a built in array method that work exactly like reduce, the only difference is that reduceRight start iterating from the right, which is perfect for this particular case.

6.Half index switch for loop

I know this isn’t the easiest one to implement, and believe me, I struggled a bit when I tried it myself, basically what we are doing here is first calculating half the string and iterate over it, we define a temporary variable and at each iteration we assign it the last character of the string.Also we assign the value of the last character to first character(basically what we are doing is switching values), and then we take the value stored in ‘tmp’ and assign it to the character at the current index(starting from zero).We keep doing this until we got a reversed string.

Conclusion

Obviously there are many other method and approaches for reversing a string that I didn’t cover in this simple blog, and depends on your use case you can chose to work with which ever that suits your needs, but keep in mind that these 6 methods differ in performances, and for that there are a cool tool that lets you test your functions and see live performances on the most popular browsers.

I hope you found this blog helpful, thanks for stepping by and I see you in another one.