How to Reverse a String in JavaScript
String manipulation is a fundamental aspect of programming, and reversing a string is among the operations you are likely to encounter at some point.
In this guide, I will show you different ways in which you can do string reversal.
Scenarios For Reversing Strings
- Palindrome Verification: Checking if a word or phrase reads the same backward as forward (e.g., "racecar" or "madam").
- Creative Text Effects: Generating eye-catching visuals in user interfaces by reversing text elements.
- Data Encryption: String reversal can sometimes be employed in simple encryption algorithms to obscure the original content.
Methods for String Reversal in JavaScript
There are multiple ways for reversing strings in JavaScript. Below we will cover two of them:
1. Using Array Methods
You can reverse a string by using split(), reverse(), and join() methods.
The split() method splits the string into an array of characters. The reverse() method reorders the elements of the array to start from the last to the first. The join() method then reunites the array elements (characters) back to a string in reversed order.
Example
let originalStr = "Hello World!";
let reversedStr = originalStr.split('').reverse().join('');
console.log(reversedStr);
Output:
!dlroW olleH
2. For Loop Iteration
Using the for() loop, we can iterate through the characters of the string in reverse order and reconstruct the string.
Example
let str = 'Sheldon Cooper';
let reversedStr = '';
for (let i = str.length - 1; i >= 0; i--) {
reversedStr += str[i];
}
console.log(reversedStr);
Output:
repooC nodlehS
Explanation
In this example, we had our original string stored in the 'str' variable. To reverse the order of the string using this method, we needed to iterate through all the string characters in reverse order and join them together in that order.
We first created an empty string variable (reversedStr) that will hold the reversed string. We then obtained the length of the string using the length property (str.length), subtracted 1 from it to get the index of the last character of the string and assigned its value to a variable (i), which is our first expression and starting point in the for() loop.
Then we defined our condition that the iteration will continue until the value of i is equal to or greater than 0. We set the value of i to decrement with 1 (i--) in every iteration.
Before the iterations, the value of i is equal to the index of the last character of the string while at the end of iterations, its value should be equal to 0, i.e., the index of the first character of the string.
Using the decrementing for() loop, we use the value of i as the index to access the string characters, one at a time in reverse order, and concatenate them to the 'reversedStr' string. This results in a reversed string at the end of iterations, which we then log into the console for display.
That's it!
Using any of the above methods, you can effectively reverse the order of characters in a string using JavaScript.
