4 Ways to Reverse a String in JavaScript (JavaScript Interview)

Reverse a string is the most commonly asked javascript interview question for freshers to test their basic knowledge about the control flow in javascript. It's important to note that the String in javascript is immutable, which means any direct operation on the string won't change the original string but create another string with that change. 

Due to the immutability nature of strings, in all the approaches strings are first converted into an Array of chars to apply the optimal operations.

4 Ways to Implement Reverse a String in JavaScript

Here are the 4 primary ways to reverse a string in javascript

1. Using reverse() Method

In this approach, the string should be first converted into an Array using str.split() which converts the whole string into an Array of chars. Then use the Array's reverse() method to reverse the array elements. At the end [].join() the array to convert the array into a reversed string.

// Using the Array's reverse() method (most concise)
function reverseString(str) {
  return str.split("").reverse().join("");
}

// Test
const testStr = "Name is Anuj";

// Reversed testStr: junA si emaN
console.log("Reversed testStr: ", reverseString(testStr));

2. Using Extra Array (More Memory)

This approach uses an extra array to store the reverse string. To reverse the input string, a loop starts from the last index (str.length - 1) to the 0th index and the string values are stored in the array starting from the 0th index. Later the Array's join() method converts the array into the output reversed string.

This approach reverses the string in O(n); time complexity n - number of chars in the string. This requires more auxiliary memory, so not optimized for memory usage.

// 2. Using another array (more explicit)
function reverseStringWithExtraArray(str) {
  const reversedArray = [];
  for (let i = str.length - 1; i >= 0; i--) {
    reversedArray.push(str[i]);
  }
  return reversedArray.join("");
}

// Test
const testStr = "Hello from FrontendGeek";
// Output: Reversed (testStr): keeGdnetnorF morf olleH
console.log("Reversed (testStr):", reverseStringWithExtraArray(testStr));

3. In-place swapping (Most optimal)

This is the most memory-efficient approach. This approach involved 2 pointers, where one pointer starts from the 0th index (left pointer) and another pointer starts with the last index (length of the converted Array, right pointer). It swaps the characters at these pointers and moves them towards the center using a loop until they meet.

In-place swap is the most optimal way to reverse a string in javascript with O(n/2) ~ O(n) time complexity without using any extra auxiliary space

// 3. In-place swapping using 2 pointers approach
function reverseStringInPlace(str) {
     // Convert into Array, strings are immutable in js
    const strArray = str.split("");
    let left = 0;
    let right = strArray.length - 1;

    while (left < right) {
        // Swap characters
        [strArray[left], strArray[right]] = [strArray[right], strArray[left]];
        left++;
        right--;
    }

    return strArray.join("");
}

// Test
const testStr = "Hello from FrontendGeek";

// Output: Reversed In place (testStr): keeGdnetnorF morf olleH
console.log("Reversed In place (testStr):", reverseStringInPlace(testStr));

4. Reverse a String using Recursion

This method doesn't require the conversion of the input string into an Array. It reverses a string by recursively calling itself with a substring and concatenating the initial char at the end of the new string.

This recursive approach has O(n) time complexity where n: number of chars in the string, but requires intermediate memory to store the strings since strings in javascript are immutable. 

// 4. Using Recursion
function reverseStringRecursive(str) {
  if (str === "") {
    return "";
  } else {
    return reverseStringRecursive(str.substr(1)) + str.charAt(0);
  }
}

// Test
const testStr = "Hello from FrontendGeek";

// Output: Reversed Recursive (testStr): keeGdnetnorF morf olleH
console.log("Reversed Recursive (testStr):", reverseStringRecursive(testStr));

📣 Other Important Links

Prepare DSA for frontend

https://www.frontendgeek.com/frontend-interview/dsa-interview