JavaScript Reverse String: 3 Best Ways To Do It

Are you tired of struggling to reverse a string in JavaScript? Don’t worry, you’re not alone! Reversing a string might seem like a simple task, but it can be surprisingly tricky, especially if you’re new to JavaScript. 

In this blog post, we’ll see different methods to reverse a string, numbers and arrays:

• Reverse a string using the built-in reverse() method 
• Using a for loop to reverse string
• Reverse using the reduce() method 
• Compare different reverse methods
• Reverse a number
• Reverse an array of numbers

Let’s look into each method in detail.

How to reverse a string in JavaScript?

The ability to reverse a string is useful in multiple use cases. For example, the reverse can be used to check if a word is a palindrome or not. A palindrome is a word that reads the same way forward and backward.

Not only strings, but you can also use the reverse() method to reverse the order of elements in an array. In a later part of this, let’s see an example of how to reverse an array or number of objects.

1. Reverse string using the string.reverse() JavaScript method

The reverse() method is one of the simplest methods to reverse a JavaScript String. The reverse() method is one of the built-in array methods. It reverses the order of the original array’s elements.

To use this method in JavaScript to reverse a string first splits the string into an array of characters. Here’s an example:

let originalString = "Hello World";

// split reverse and join
let reversedString = originalString
    .split('')
    .reverse()
    .join('');
console.log(reversedString);
// Output: "dlroW olleH"

To reverse a string, you can use one of the JavaScript Array Methods reverse() to reverse a string. 

Reverse a String In JavaScript using Reverse() Method

If you want to reverse a string without utilizing the built-in reverse() array method, you can use either a loop or a reduce()-based solution.

2. Reverse a string in JavaScript using a for loop

A for loop is another method to reverse a string in JavaScript. When using a for loop, you must iterate through the string’s characters from the last index to the first index. Retrieve the characters using the charAt() method. Finally, using JavaScript String Concatenation, we can create a new string. 

Here’s an example reverse a string without using the reverse() method:

let originalString = 'Hello World';
let reversedString = '';
for (let index = originalString.length - 1; index >= 0; index--) {
        reversedString += originalString.charAt(index);
}
console.log(reversedString);
// Output: "dlroW olleH"

3. String reverse using the reduce() method

The reduce() function is a more elegant way of reversing a string in JavaScript. This method takes each array element and applies a function to it, reducing the array to a single value.

When using this method to reverse a string, use the reduce() function to loop through the characters and concatenate them to a new string in reverse order.

Here’s an example reverse a string using the split() and reduce() methods:

let originalString = 'Hello World';
let reversedString = originalString
  .split('')
  .reduce((acc, char) => char + acc, '');
console.log(reversedString); 
// Output: "dlroW olleH"

Reverse number using JavaScript

To reverse a string, you can use one of the methods listed above. What if you need to reverse a number? The solution is straightforward.

• Use the toString() function to convert any number, not only an integer to a string.
• To reverse a string, use one of the methods listed above in this article.
• Using the JavaScript parseFloat() or JavaScript parseInt() methods depending on the data type, convert the generated string to a number.

const number = -12345.67;
const reversedString = number
  .toString()
  .split('')
  .reverse()
  .join('');
let reversedNumber = parseFloat(reversedString) * Math.sign(number);
console.log(reversedNumber); 
// Output: -76.54321

The JavaScript toString() method was used to transform the input number into a string in the above code. The string is then split into an array of characters using the split method with the empty string (‘ ‘) delimiter. We next reverse the array’s order using the reverse() method and then join the array into a string using the join(‘ ‘) method, with the empty string ‘ ‘ serving as the separator once more.

The resulting reversed string is then converted back to a number using the parseInt() or parseFloat() methods. 

With this approach, you can easily reverse any number in JavaScript.

Reverse array using JavaScript

Reversing an array is simple and straightforward because reverse() is a built-in array method.

const numbers = [10, 20, 30, 40, 50]
let reversedNumbers = numbers.reverse();
console.log(reversedNumbers)
// Output: [50, 40, 30, 20, 10]

The JavaScript reverse() method will update the original array. You can use the reverse() method to reverse object arrays as well as numeric arrays.

const books = [
    { bookdId: 100, title: 'Mastering JS' }, 
    { bookdId: 200, title: 'JS for WebDev' },
    { bookdId: 300, title: 'Pactical JS' }
    ]
let reversedBooks = books.reverse();
console.log(reversedBooks)
/* Output:
 [
    { bookdId: 300, title: 'Pactical JS' },
    { bookdId: 200, title: 'JS for WebDev' },
    { bookdId: 100, title: 'Mastering JS' }
] 
*/

Conclusion

In this article, we have explored three different methods to reverse a string in JavaScript. 

• To reverse a string using the reverse() method is simple and straightforward. 
• If you want to reverse a string without using the built-in reverse() method, you can use for loop or reduce() methods. 
• Compared to the different reverse methods, every reverse method has its own set of benefits and drawbacks.
• In addition to the string reverse method, you learned how to reverse a number and an array of numbers.

Regardless of the method chosen, it is important to understand the underlying logic and principles involved in reversing a string. Which method you are going to use to reverse a string?