How to reverse each word in a string with vanilla JavaScript

Today, I thought I’d do something different.

I’m going to give you a code challenge. You can go off and try to complete it on your own, then come back and see how I approached it. Or if you’d prefer, you can code along with me.

This approach to learning is similar to how the Vanilla JS Academy. If that sounds appealing to you, registration for the next session is open now.

Let’s dig in!

The challenge

Let’s imagine you have a string of words.

let message = 'Hey there friend! How are you today?';

We want to create a “secret code” (it won’t be very secret) by reversing each word in the sentence and returning it as a new string.

The end result should look like this.

let secret = 'yeH ereht !dneirf woH era uoy ?yadot';

If you want to try it on your own, here’s a template for you to start with.

My solution

Here’s how I would approach this project.

Note: like everything code, there are other ways you could do this, too, so don’t take my approach as “the right way” or the only way to do this.

First, I would create a createCode() function that accepts the string to encode as an argument.

/**
 * Create a secret message from a string
 * @param  {String} str The string to encode
 * @return {String}     The encoded string
 */
function createCode (str) {
	// ...
}

Inside the createCode() function, I would use the String.prototype.split() method to convert the str message into an array of words.

For this project, I would use a regex pattern to split on any whitespace (including spaces, line breaks, and so on).

/**
 * Create a secret message from a string
 * @param  {String} str The string to encode
 * @return {String}     The encoded string
 */
function createCode (str) {
	let words = str.split(/[\s]+/g);
}

Next, I would use the Array.prototype.map() method to create a new array of encoded words from our words array.

Inside the callback function, I would again use the String.prototype.split() method to create an array of letters for the word.

I would use the Array.prototype.reverse() method to reverse the letters, then the Array.prototype.join() method to recombine them into a string.

/**
 * Create a secret message from a string
 * @param  {String} str The string to encode
 * @return {String}     The encoded string
 */
function createCode (str) {
	let words = str.split(/[\s]+/g);
	let encoded = words.map(function (word) {
		return word.split('').reverse().join('');
	});
}

Now, we have an array of reversed words.

Our last step is combine all of the encoded words back into a string using the Array.prototype.join() method, and return them. I’d pass in a space as a delimiter.

/**
 * Create a secret message from a string
 * @param  {String} str The string to encode
 * @return {String}     The encoded string
 */
function createCode (str) {
	let words = str.split(/[\s]+/g);
	let encoded = words.map(function (word) {
		return word.split('').reverse().join('');
	});
	return encoded.join(' ');
}

Now, we can use our function like this.

let secret = createCode(message);

Here’s my completed code.