This content originally appeared on Go Make Things and was authored by Go Make Things
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);
⏰🦉 Early Bird Sale! Today through Monday, get 40% off registration in the next session of the Vanilla JS Academy.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-06-05T14:30:00+00:00) How to reverse each word in a string with vanilla JavaScript. Retrieved from https://www.scien.cx/2023/06/05/how-to-reverse-each-word-in-a-string-with-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.