To reverse each word of a string in JavaScript, first split the string into a words array using the String.split()
method, then reverse each word and finally join them back together using the Array.join()
method to form the reversed string.
For example:
// Original String const str = "This is a random string"; // Reverse each word of the string let reversedStr = str.split(' ') .map(word=>word.split('').reverse().join('')) .join(' '); // Print the reversed string console.log(reversedStr);
Output:
"sihT si a modnar gnirts"
In this example:
- First, we split the string into words using the
split()
method with a space as the separator. - Then, we use the
map()
method to apply a function to each word in the array. The function splits each word into an array of characters using thesplit()
method, reverses the order of the characters using thereverse()
method, and then joins the characters back together using thejoin()
method. - Finally, we use the
Array.join()
method with a space(' '
) as the separator to join the reversed words back together into a string.
Let’s break down the whole code into smaller steps and try to understand how it works.
To get each word of the string separately, we split it into an array of words using the String.split()
method with a space(' '
) character as a separator:
// Original String const str = "This is a random string"; // Split string into words array const wordsArr = str.split(' '); console.log(wordsArr); // Output: 👉 ['This', 'is', 'a', 'random', 'string']
The next thing we have to do is, iterate through the words array and reverse each word.
But JavaScript doesn’t have any built-in method to reverse the string. What it has is the Array.reverse()
method that reverses the array.
Therefore, we have to first convert each word into an array using the Array.split()
method and then call the Array.reverse()
method to reverse the array items and then join back the array items using Array.join()
method:
// Sample word string const word = 'This'; const wordArr = word.split(''); // wordArr: 👉 ['T', 'h', 'i', 's'] const reversedArr = wordArr.reverse(); // reversedArr: 👉 ['s', 'i', 'h', 'T'] const reversedWord = reversedArr.join(''); // reversedWord: 👉 "sihT"
The last thing we need to do is join back each word(reversed) of the array with a space character using the Array.join()
method and get the final string.
// Reversed words array const reversedWordArr = ['sihT', 'si', 'a', 'modnar', 'gnirts']; // Join each word of the array const reversedStr = reversedWordArr.join(' '); console.log(reversedStr); // Output: 👉 "sihT si a modnar gnirts"
Method 2: Use a For Loop to Reverse Each Word of the String
You can also use a for
loop to loop through each word of the string and then manually reverse each word of the string instead of using the built-in reverse()
method.
For example:
// Original String const str = "This is a random string"; // Get words from string const wordsArr = str.split(' '); // Loop through each word for(let i = 0; i < wordsArr.length; i++){ // Current word let word = wordsArr[i]; // Create an empty string to store reversed word let tempWord = ""; // Loop through current word string for(let j = word.length - 1; j >= 0; j--){ // Join each character of original word // in a reversed manner tempWord = tempWord + word[j]; } // Replace original word with the reversed word wordsArr[i] = tempWord; } // Join back each reversed word with a space character(' ') const reversedStr = wordsArr.join(' '); // Print the result console.log(reversedStr);
Output:
"sihT si a modnar gnirts"
In this method:
- We first split the given string into a words array using the
String.split()
method with a space character(''
) as a parameter. - We then loop through the words array to reverse each word.
- To get the reversed version of the word, we create a temporary empty string(
""
) which stores each character of the word in a reversed manner. - We then replace the original word with its reversed version.
- Finally, we use the
Array.join()
method with a space character(' '
) as a parameter to join back each word of the array into a string.
You can use either of the two methods to reverse each word of the string.
The first method is pretty straightforward as it uses only the built-in methods of JavaScript to reverse each word of the string.
On the other hand, the second method needs some manual work to reverse each word. However, this method helps you understand how things are actually working behind the scenes.
That’s all for the day. Happy Coding.