How to Reverse a String in JavaScript

Reversing the order of characters in a string is one of the most commonly asked questions in coding interviews, algorithm challenges, as well as various real-world applications such as data encoding and decoding, palindrome checking, text processing, and so on. In this tutorial, we are going to explore several different ways to reverse a string in JavaScript.

How to reverse a string using the reverse() method

First, you should know that unlike reversing arrays in JavaScript, there isn't a built-in method specifically for reversing strings. However, there is a workaround. You can convert the string into an array, reverse it using the reverse() method, and finally convert the array back into a string.

Here is a demonstration:

let originalString = "Hello, World!";
let array = originalString.split("");
let reversedArray = array.reverse();
let reversedString = reversedArray.join("");
 
console.log(array);
console.log(reversedArray);
console.log(reversedString);

[
 '!', 'd', 'l', 'r',
 'o', 'W', ' ', ',',
 'o', 'l', 'l', 'e',
 'H'
]
[
 '!', 'd', 'l', 'r',
 'o', 'W', ' ', ',',
 'o', 'l', 'l', 'e',
 'H'
]
!dlroW ,olleH

When given an empty string (""), the split() method will split the entire string into an array of individual characters. The reverse() method will then reverse the order of elements in the array, and finally join() joins the characters back together into a string.

Alternatively, you can convert the string into an array using the spread syntax.

let originalString = "Hello, World!";
let reversedString = [...originalString].reverse().join("");
console.log(reversedString);

!dlroW ,olleH

Everything else works exactly the same.

How to reverse a string using for loops

If you don't want to turn strings into arrays, you can also use a for loop to reverse a string in JavaScript. Recall that it is possible to access individual characters in a string using the square bracket syntax. So this is what you can do:

let originalString = "Hello, World!";
let reversedString = "";
 
for (let i = originalString.length - 1; i >= 0; i--) {
  reversedString += originalString[i];
}
 
console.log(reversedString);

!dlroW ,olleH

In this example, we initialized an index i and made sure it points at the last character in the array (i = originalString.length - 1).

The index i decrements by 1 for every iteration until it reaches 0, which points to the first character of the string.

And for every iteration, the character that i points to will be appended to the reversedString.

How to reverse a string using recursion

Lastly, you can also reverse the string using recursion.

function reverseString(str) {
  if (str === "") {
    return "";
  } else {
    return reverseString(str.substr(1)) + str.charAt(0);
  }
}
 
let originalString = "Hello, World!";
let reversedString = reverseString(originalString);
 
console.log(reversedString);

In this example, when the reverseString() function is executed, it will test if str is empty. If it is, an empty string will be returned. If not, the string will be divided into two parts. The substr() method is used to extract a substring based on the given index.

And then, reverseString() will be called again, and this process will be repeated, until an empty string is returned.

Conclusion

In this tutorial, we went over three different ways you can reverse a string in JavaScript. Hope this tutorial has been helpful to you.

Happy coding!