Getting Our Feet Wet.
Solving our very first Codewars kata in Javascript.
Okay! We've previously ....
approached the shore....
gathered our basic gear....
and practiced with our exit buddy.
Want a little more practice, a little more spaced repetition ? Try these simple quiz apps, built around the most common string and array methods mentioned in the previous post .
Time to get our feet wet.
Let's start with an 8kyu, fundamental string kata:
The instructions read:
Write a function that returns a string in which firstname is swapped with last name.
example: nameShuffler('john McClane'); => "McClane john"
We can't just jump in and code. We need to frame the problem and identify the steps to solving it. How do we do that?
We use PREP!
PREP stands for Parameters, Return, Examples, and Pseudocode.
For each problem, we're going to identify and write down these four parts. This will help us clarify the problem we need to solve, organize it, and even talk about it.
Parameters: are what's being taken into the function. In the above, we can see that the function is taking in a string. We see it in the function line, in the test examples, and sometimes in the instructions. Sometimes Codewars instructions aren't super clear, so you have to clarify the information you need by using other clues. In this case, we can see we're taking in a string.
Parameters: a string
Return: identifies what we're returning, or outputting, with our function. In this example, the instructions say "Write a function that returns a string".
Return: a string, with the words from the input string swapped.
Examples: In Codewars, the tests are always in the bottom right. But occasionally they're in the instructions as well. Here we have this example:
example: nameShuffler('john McClane'); => "McClane john"
This means that our function should be titled "nameShuffler", and if the string we take in is 'john McClane', our output should be "McClane john".
We can create a couple of our own examples, just for fun:
nameShuffler('Elizabeth Tudor'); => "Tudor Elizabeth"
nameShuffler('Ronald McDonald'); => "Mcdonald Ronald"
nameShuffler('FirstName LastName'); => "LastName FirstName"
Pseudocode: This is where we break the problem into steps. At first, you'll have no idea where to begin. That's okay! The more practice you get, the more comfortable you'll be. Don't stress, just try to have fun. And remember, you have your exit buddy !
Step 1: The first thing to do, is to write what we've already identified. The function line, the return, and console.log the tests. This takes away the blank page, and gives us a structure to work in.
function nameShuffler(str){
return str
}
console.log(nameShuffler('Elizabeth Tudor'))
console.log(nameShuffler('Ronald McDonald'))
console.log(nameShuffler('FirstName LastName'))
Step 2: Next, we're going to use the split() string method to split the string into an array, separated by the space between the words (also called a "delimiter"). The split() method is used frequently, and very handy for splitting a string into individual parts so that we can manipulate the parts.
function nameShuffler(str){
return str.split(' ')
}
If we were to show the output here (by doing a console.log), we would see:
['Elizabeth', 'Tudor']
Step 3: Now, we want to reverse the order of the words in the array. So we'll use the aptly named reverse() array method.
function nameShuffler(str){
return str.split(' ').reverse()
}
If we were to print the output here, we would see:
['Tudor', 'Elizabeth']
Step 4: Now, we use the join method to join the words in the array back into a string. Don't forget the space delimiter again.
function nameShuffler(str){
return str.split(' ').reverse().join(' ')
}
console.log(nameShuffler('john McClane'))
console.log(nameShuffler('Elizabeth Tudor'))
console.log(nameShuffler('Ronald McDonald'))
console.log(nameShuffler('FirstName LastName'))
Step 5: To test your solution, click the test button in the bottom right. It'll test against Codewars's tests. You can also console.log your own tests in your code editor, repl.it , or JSFiddle . If you use VSCode, I highly recommend the Quokka extension. It shows you your output and syntax errors as you go and can help clarify the steps you need to take.
Anyway, let's test our solution in Codewars:
Success! Great job!
We know the given test "john McClane" was successful.
You'll now want to click on "Attempt", which tests your solution against many more tests.
If all tests pass, click "Submit" to submit your solution. If you'd like, you can now see other submitted solutions (there are usually many different ways to solve a problem), or come back to this kata again later when you practice your spaced repetition.
A little tip: click "Very" satisfied to earn one extra point!
And there you have it!
Remember to sort by 8kyu, Most Completed, and have fun! It'll be awkward at first. You'll look up the methods over and over. But with practice and repetition (come back to katas you've already solved!) you'll be exploring the depths in no time.