Reverse A String In JavaScript

Introduction

 
"How to reverse a string in JavaScript?" is one of the most frequently asked interview questions especially if you're a fresher or have very little experience. Potentially there could be dozens of ways we could reverse a string. However, in this article, we'll learn three different methods to reverse a string in JavaScript.
 
The string we'll be using for this article will be "hello world!". However, these methods work with any strings you wish to reverse.
  1. const str = 'hello world!';    
  2. // Expected Output: !dlrow olleh

Using Split, Reverse, Join

 
In this first method we'll be using JavaScript's built-in split, reverse, and join methods to reverse the string.
  1. const str = 'hello world!';  
  2.   
  3. // step 1:  
  4. const strChunks = str.split("");  
  5. console.log(strChunks); // Output: ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]  
  6.   
  7. // step 2:  
  8. const strChunksReverse = strChunks.reverse();  
  9. console.log(strChunksReverse); // Output: ["!", "d", "l", "r", "o", "w", " ", "o", "l", "l", "e", "h"]  
  10.   
  11. // step 3:  
  12. const strReverse = strChunksReverse.join("");  
  13. console.log(strReverse); // Output: !dlrow olleh  
As you can see in the above code, in the first step we're splitting the string "hello world" into an array using the split method with each element of the array representing a single character of the string. The parameter passed to the split method is an empty string with no spaces in it. In the next step, we're reversing that array using JavaScript's native reverse method which reverses the elements in the array. And in the final step, we're joining the array elements i.e. characters of the string using the join method.
 
Instead of writing each operation in a separate statement, we could chain the methods and perform all the operations in a single line.
  1. const str = 'hello world!';  
  2. const strReverse = str.split('').reverse().join('');  
  3. console.log(strReverse); // Output: !dlrow olleh  
The above code snippet will produce same output as the previous code block.
 

Using for loop

 
Next we'll be using a simple for loop to reverse a string. 
  1. const str = "hello world!";    
  2. let strReverse = "";    
  3.     
  4. for (let i = str.length - 1; i >= 0; i--) {    
  5.     strReverse = strReverse + str[i];    
  6. }    
  7.     
  8. console.log(strReverse);    
  9. // Output: !dlrow olleh   
As you can see in the above code snippet, we're creating a variable strReverse that contains a empty string (with no spaces in it). Next thing we're doing is we're looping over the string that needs to be reversed using the for loop. The initial value of i in the loop is the str.length - 1 i.e. the index of the exclamation mark character. After each interation we're decrementing the value of i. The loop will continue until it reaches the first character of the string i.e. h from the word hello. In the each iteration we're concatenating the character to the strReverse variable.
 

Using Recursion

 
And last but not least we'll see how we can reverse a string using the recursion. The recursion is simply a process where a function calls itself directly or indirectly.
  1. const message = "hello world!";  

  2. function reverse(value) {    
  3.   return value === '' ? '' : reverse(value.slice(1)) + value.charAt(0);    
  4. };  
  5.   
  6. console.log(reverse(message));  
  7. // Output: !dlrow olleh  
The first thing the above function does is to check if string passed to it as parameter is empty. If yes, it'll simply return an empty string. If the condition is false  it'll simply call itself and pass the string value again but this time it'll remove the first character and pass rest of the string, appending the first character at the end of the return statement.
 
Let's understand this using an easier example. Lets say we're passing string 'abc' to the function:
  1. console.log(reverse('abc'));  // Output: cba   
The above code will call the reverse function four times. First time we're manually calling it and 3 times it'll call itself with recursion.
  • First time: reverse('abc') which will return reverse('bc') + 'a'
  • Second time: reverse('bc') which will return reverse('c') + 'ba'
  • Third time : reverse('c') which will return reverse reverse('') + 'cba'
  • Fourth time: reverse('') which will return an empty string terminating the recursion process.
And that's it! 
 
I hope you enjoyed this article. In case you've any queries or feedback, feel free to drop a message in the comment section.