Methods to reverse string in JavaScript

In this tutorial, we are going to look at a few methods on how to reverse a string in JavaScript. We will use sample programs to understand the concepts.

A couple of the most common questions posed in JavaScript interviews is the question on “How to reverse a string in JavaScript” or “Write a function to reverse a string in JavaScript.” In this tutorial, we will look into three different methods of achieving the same result.

The built-in function method to reverse a string in JavaScript

Let’s look at an example where we are using built-in JavaScript functions to reverse a string.

Input:

// A program to reverse a string using built-in functions

function reversingString(str) {
        
    // return a new array of strings
    const arrayStrings = str.split("");
           
    // reverse the new created array elements
    const reversingArray = arrayStrings.reverse();
         
    // join all elements of the array into a string
    const joinArray = reversingArray.join("");
            
    // return the reversed string
    return joinArray;
}
         
// taking input from the user

const string = prompt('Enter a string: ');
        

const result = reversingString(string);
console.log(result);

Output:

Enter a string: Flexiple
elpixelf

In the above code snippet, we have used JS built-in functions to reverse an inputted string.

Firstly, the string is split into individual elements using the split() method. Then the string elements are reversed using the reverse() method. Finally, the reversed string elements are joined back together into a single string using the join() method.

Reverse string in JavaScript using the For Loop

In this section, we will look at an example of how a string can be reversed using the for loop.

Input:

// A program to reverse a string using the For Loop

function reversingString(str) {
        
    // empty string
    let aNewString = "";
    for (let i = str.length - 1; i >= 0; i--) {
        aNewString += str[i];
    }
    return aNewString;
}
        
// take input from the user
const string = prompt('Enter a string: ');
        
const result = reversingString(string);
console.log(result);

Output:

Enter a string:Flexiple
elpixelF

In the above code snippet, once the code is run, the user is expected to enter a string. This string is passed to the reversingString() function. Firstly, an empty aNewString variable is created. Then the for loop is used to iterate over the strings. The value of i decreases in each iteration and it continues until it comes 0.

Using recursion to reverse a string in JavaScript

In this method, we are going to use the concept of recursion to reverse a given string.

Input:

function reversing(str){
if(str === ""){
 return str
}else{
 return reversing(str.substr(1)) + str[0]
}
}
        
// take input from the user
const string = prompt('Enter a string: ');
        
const result = reversing(string);
console.log(result);

Output:

Enter a string:Flexiple
elpixelF

In this case, are making the function reversing() call itself until it hits an empty string. We then take the first character of the entered string using the substr() method and add it to the end of the resultant string.

Closing thoughts

In this short tutorial, we have looked at three different methods of reversing a string in JavaScript. We understood how to use the concepts of recursion, for loop and use built-in functions to achieve the same.