Reverse a String in JavaScript

How to Reverse a String in JavaScript?

by

In the technical phase of interviews, reverse a string in javascript is one of the most often asked JavaScript questions. Interviewers may ask you to develop alternative ways to reverse a string, or reverse a string without utilizing built-in methods, or reverse a string using recursion.

There may be tens of various methods to implement it, omitting the built-in reverse function, which JavaScript lacks.

Table Of Contents
  1. Algorithm Challenge
  2. Three Ways to Reverse a String in JavaScript
  3. Conditional (Ternary) Operator

Here are three of my favorite techniques to address the challenge of reversing a string in JavaScript.

Algorithm Challenge

Reverse the supplied string. Before you can reverse the string, you may need to convert it to an array.

The output must be a string.

Reverse a String in JavaScript img-1
  • reverseString (“softhunt”) should be replaced with “tnuhtfos“
  • reverseString (“John”) should be replaced with “nhoJ“
  • “enoyreve sgniteerg” should be returned by reverseString(“Greetings Everyone”).

Three Ways to Reverse a String in JavaScript

Reverse a String with Built-In Functions

For this approach, we will employ three methods: String.prototype.split(), Array.prototype.reverse(), and Array.prototype.join().

  • The split () function divides a String object into an array of strings by splitting it into substrings.
  • The reverse () function is use to reverse an array in situ. The first array element is replace by the last, and the last by the first.
  • The join () function merges all array components into a string.

Code

i) We use the split () method to convert our string into an array

var stringToArray = "softhunt".split("");
["s", "o", "f", "t", "h", "u", "n", "t"]

ii) We use the reverse () method to reverse the array

var arrayReverse = ["s", "o", "f", "t", "h", "u", "n", "t"]. reverse ();
["t", "n", "u", "h", "t", "f", "o", "s"]

iii) By using join () method to join all elements of the array into a string

var join Array = ["t", "n", "u", "h", "t", "f", "o", "s"]. join ("");

Result:”tnuhtfos”

Return the reversed string

Reverse a String in JavaScript img-2

Connecting the three methods:

Reverse a String in JavaScript img-3

Reverse a String with a Decrementing for Loop

i) Create an empty string that will host the newly created string 

var newString = "";

ii) Create the FOR loop. The starting point of the loop will be (str.length – 1) which corresponds to the last character of the string, “t” As long as i is greater than or equals 0, the loop will go on We decrement i after each iteration.

for (var i = str.length - 1; i >= 0; i--) { newString += str[i];

iii) Here softhunt’s length equals 8 For each

  • iteration: i = str.length – 1 and newString = newString + str[i]
  • First iteration: i = 8 – 1 = 7, newString = “” + “t” = “t”
  • Second iteration: i = 7 – 1 = 6,
  • newString = “o” + “n” = “tn”
  • Third iteration: i = 6 – 1 = 5,
  • newString = “tn” + “u” = “tnu”
  • Fourth iteration: i = 5 – 1 = 4,
  • newString = “tnu” + “h” = “tnuh”
  • Fifth iteration: i = 4 – 1 = 3,
  • newString = “tnuh” + “t” = “tnuht”
  • Sixth iteration: i = 3 – 1 = 2,
  • newString = ” tnuht ” + “f” = ” tnuhtf”
  • Seventh iteration: i = 2 – 1 = 1,
  • newString = ” tnuhtf” + “o” = ” tnuhtfo”
  • Eight iteration: i = 1 – 1 = 0,
  • newString = ” tnuhtfo” + “s” = ” tnuhtfos”
  • End of the FOR Loop*/ Return the reversed string return newString; // ” tnuhtfos”
Reverse a String in JavaScript img-4

Reverse a String with Recursion

For this solution, we will use two methods: the String.prototype.substr() method and the String.prototype.charAt() method.

The substr() method returns the characters in a string beginning at the specified location through the specified number of characters.

img-5

The charAt() method returns the specified character from a string.

img-6

The depth of the recursion is equal to the length of the String. This solution is not the best one and will be really slow if the String is very long and the stack size is of major concern.

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

Conditional (Ternary) Operator

img-8

Reversing a String in JavaScript is a small and simple algorithm that can be ask on a technical phone screening or a technical interview. You could take the short route in solving this problem or take the approach by solving it with recursion or even more complex solutions.

If you have any query then go to the javascript official documentation.

That’s all for this article if you have any confusion contact us through our website or email us at [email protected]

If you want to learn more about the JavaScript programming language then click the link to see our last article 5 BEST JAVASCRIPT FRAMEWORKS IN 2021/2022

Leave a Comment