How to Reverse a String in Javascript

You will sometimes encounter the need to reverse a string in Javascript. To understand how to do this, we will write and embed our Javascript code inside a HTML page like so:

In the above HTML page you see the basic elements of the page like the head element containing the title (“How to Reverse a String in Javascript”) and a body with an empty script tag. Any HTML markup goes inside the body tags and any Javascript code goes inside the script tags.

The functions we present below primarily work with ASCII characters. They would not work for strings that are made up of multi-byte characters which is beyond the scope of this article.

Method 1: Use Array split, reverse, and join methods

The first approach we will learn converts the given string into an Array using the split() method, then uses the reverse() method on the Array to return a new Array, and then converts the Array back into a string using the join() method. Here is a function to do exactly this and an invocation of that function:

As you see above we use a sequence of split, reverse (in built Array reverse), and join methods to obtain our own reversal() function that reverses a string. The output is:

You can also replace the split() method with spread syntax notation like so:

This will give the same output as before:

Method 2: Use Array split and reduce methods

This method is a simple variant of the previous method. Like the above method, it uses split() to convert the string into an array. Then, instead of reverse and join it uses a single reduce() function that systematically applies a function over the elements of the array and returns a string in one go.

In the above code, the reversal() function is considerably simplified. It first uses split to convert the elements of the string into an Array. The reduce() method is then called over the array. Looking at the use of the reduce() method, note that it uses the function “sweep”. sweep takes a newstring and a character and note that the character is prepended (not appended) to the string. This function is systematically applied over the entire array with a “” initial value in the reversal function. The output is, as expected:

Learn more about the reduce() method in another Kodeclik blog post.

Method 3: Use iteration over the characters of the string

The third method we will explore simply iterates over the characters of the string systematically from left to right. As each character is encountered we add it to the beginning of a string we accumulate. In this way the characters are stored in a new string, in the reverse order in which they are encountered.

The output is as before:

In the reversal() function, new_s is the new string that holds the reversed sequence of characters. This is initially initialized to the empty string. Then as every new character (stored in variable “i”) is encountered, that character is added to the beginning of new_s.

Method 4: Use recursion

Our final method uses recursion instead of recursion. If we can somehow reverse all but the first character of the string, we can simply add the first character to the end of the reversed string. Similarly we can continue the recursion argument. This is what the code below does:

In the above method, observe the recursive nature of the reversal function (i.e., it calls itself with a smaller argument). The base case for the recursion is when the string has only one character or zero characters. In those cases, the string is already reversed and thus the function simply returns the input string (s) as the output. Else, the inductive case applies. Here, we first take out the first character using the charAt method with 0 as the argument. The remaining string (represented by substr(1) is reversed and then we add the character taken out at the end.

We have learnt four different ways to reverse a string in Javascript - which one is your favorite? Also see how to scramble a string in Javascript, i.e., not just reverse it but scramble it in any order.

If you liked this blogpost and manipulating strings, checkout our blogpost on how to check if a letter is uppercase in Javascript.

Interested in learning more Javascript? Learn how to loop through two Javascript arrays in coordination and how to make a Javascript function return multiple values!

Want to learn Javascript with us? Sign up for 1:1 or small group classes.