How to reverse string in JavaScript

In this post, you will learn how to reverse a string using JavaScript.

Such a type of question is generally asked in a programming interview. The interviewer may demand you to write various approaches to reverse a string, as they may ask you to use an inbuilt method or use a recursive method. Solving such problems can improve your logical skills and make us perfect for coding challenges.

In-built methods to reverse a string in JavaScript

Here, we have used the split(), reverse(), and join() methods to reverse a string. The split() method divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array. The reverse() method changes the sequence of elements of the given array and returns the reverse sequence and the join() method returns the array as a string.

// Program to reverse a string
function reverseString(str) {

	// return a new array of strings
	array_strings = str.split("");
   
	// reverse the new created array elements
	reverse_array = array_strings.reverse();
 
	// join all elements of the array into a string
	join_array = reverse_array.join("");
	
	// return the reversed string
	document.write("Reverse String: "+join_array+"<br />");
}
 
string = "Hello World";
document.write("Original String: "+string+"<br />")
reverseString(string);

Original String: Hello World
Reverse String: dlroW olleH

Reverse a string using for loop

Here is the program to reverse a string using a for loop. In this, we have passed the string to the reverseString() function and created an empty variable 'newString'. Next, the for loop is used to iterate over the string and, in each iteration 'str.length - 1' gives the position of the last element and assigns it to the 'newString' variable. This process continues for all string elements or until the value of i becomes 0.

// program to reverse a string
function reverseString(str) {

    // empty string
    let newString = "";
    for (let i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
}

string = 'etutorialspoint';
document.write("Original String: "+string+"<br/>");
result = reverseString(string);
document.write("Reverse String: "+result+"<br/>");

Original String: etutorialspoint
Reverse String: tniopslairotute

Using recursive function

A Recursion function is a function that is called itself. In the given example, we call the recursion function to get the sum of all the elements in a list. A recursion function continues until some condition is met to prevent it. That's why, we use the if else statement to break the infinite recursion.

function reverseString(str) {
  if (str === "") 
    return "";
  
  else
    return reverseString(str.substr(1)) + str.charAt(0);
}

string = "Welcome to etutorialspoint";
document.write("Original String: "+string+"<br/>");

result = reverseString(string);
document.write("Reverse String: "+result+"<br/>");

Original String: Welcome to etutorialspoint
Reverse String: tniopslairotute ot emocleW

Using conditional (ternary) operator

Here, we have used the ternary operator to reverse a string in JavaScript.

function reverseString(str) {
  return (str === '') ? '' : reverseString(str.substr(1)) +    str.charAt(0);
}

str = "etutorialspoint";
document.write("Original String: "+str+"<br />");
document.write("Reverse String: "+reverseString(str)+"<br />");

Original String: etutorialspoint
Reverse String: tniopslairotute

Related Articles