How to Reverse Each Word of a String in JavaScript?

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 the split() method, reverses the order of the characters using the reverse() method, and then joins the characters back together using the join() 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.