How I react to algos
Ah, see what I did there? REACTO and, "react to." Oh, never mind! This is an article about REACTO and how I've learned to love this common approach to solving problems.
What is REACTO?
Simply put, REACTO is an acronym that represents the stages of the problem solving with this method. These are the steps:
- R: Restate
- E: Example
- A: Approach
- C: Code
- T: Test
- O: Optimize
And yes, in that order. It is important to follow the steps so that you don't get lost in a thought-storm 🌩️. This approach will keep you focused and illuminate the path to the solution before you even begin coding! The trick is to hold off on coding right away, since our natural instinct may be to just jump into the code before making a plan of attack.
The Prompt
Okay, say you get a prompt from an algorithms repository of your choice, now what? Let's start with one of the simplest prompts I could find so we don't get too carried away in the coding part.
Here's the prompt:
Create a function that, when given some input, will take this input and return the first instance of double characters. Input will be a string. If there are no double characters found in the input the function should return boolean
false.
This one is pretty straightforward. Let's get started!
R: Restate the prompt
/*
Restate,
Create a function
- takes input type of string
- return the first instance of double characters
Input may be a string
If there are no double characters found in the input the function should return `false`.
*/
This one is pretty easy to do here, but you may actually only hear the prompt from an interviewer if this was a live interview. Make sure you're actively listening to the prompt and remember to ask clarifying questions. For instance, you might have asked if numbers may be passed into the function or just strings. In this case, the input will be restricted to string values. You may come up with more questions while reading this post, so if you do, please comment below. I'm still learning too!
E: Examples
Here is where you will want to write down some examples to visually aid you in your approach later. Your interviewer should give you some examples. If not, now is the time to ask for them! If you are taking a prompt from an online source like Codewars then they will have examples available.
Again, I write these in as comments just after the Restate section. Below, you will see I am naming this function firstDouble.
/*
...
Examples,
firstDouble("aardvark") >> "aa"
firstDouble("1-800-257-8999") >> "00"
firstDouble("pamphlet") >> false
*/
A: Approach
Here you need to write out your approach to coding a solution. You will write pseudocode here or just write out your plan without using a coding language. Let's add this plan in the comment as well.
First, you know that you will have an argument passed into the function, that is a string, and if no match is found it should return the boolean false. Now, if you're used to test-driven development you'd likely write tests first and then write code that satisfies the tests. In this case we are waiting for the T: Test step to do that. So I am going to note the function name and the argument passed into the function.
/*
...
Approach,
- create function firstDouble(stringArg)
*/
Well, that does look a lot like Javascript, but I won't get too much deeper than that in the Approach step. You know what kind of argument passes into the function and the function created. Let's add some more about how to begin parsing the input.
/*
...
Approach,
- create function firstDouble(stringArg)
- iterate over the input
-- check if the current character is the same as the previous character
*/
Now, when I realize I need to compare the current iteration to the last I know I'll need to create a variable to hold onto the value as I move into the next loop. So I will edit the approach to include this consideration in the second step of Approach, before the loop. While I am at it, I'll add that I need to declare a variable in the loop for the current character. This way when the loop ends I could assign the current character's value to the previous character variable.
/*
...
Approach,
- create function firstDouble(stringArg)
- declare variable to hold value of character from previous loop (lastCharacter)
- iterate over the input
-- declare variable for current character (currentCharacter)
-- check if the current character is the same as the previous character
*/
Wait, how many times do we loop? Well, it should be just as long as the input length. I'll add that into my approach. Now, I am thinking of the loop like this:
- loop until we reach end of the input
- each loop we will set a current character and then compare it to the last character
- if the current and last character are the same we should return them both keeping to the same type as they were inputted
- or if they don't match, set last character's value to current character
- loop again
- if the looping ends with no matches return
false
Now let's look at this approach:
/*
...
Approach,
- create function firstDouble(stringArg)
- declare variable to hold value of character from previous loop (lastCharacter)
- iterate over the input for the length of the input
-- declare variable for current character (currentCharacter)
-- check if the currentCharacter has the same value as the lastCharacter
---- if they match, return them both together as a string
---- else if they don't match,
set value of last character to equal current character
-- loop again
- if no matches found after looping ends, return boolean false
*/
That definitely seems like everything we need to solve the prompt. By now this is how the REA in REACTO looks:
/*
Restate,
Create a function
- takes input type of string
- return the first instance of double characters
Input may be a string
If there are no double characters found in the input the function should return `false`.
Examples,
firstDouble("aardvark") > "aa"
firstDouble("1-800-257-8999") > "00"
firstDouble("pamphlet") > false
Approach,
- create function firstDouble(stringArg)
- declare variable to hold value of character from previous loop (lastCharacter)
- iterate over the input for the length of the input
-- declare variable for current character (currentCharacter)
-- check if the currentCharacter has the same value as the lastCharacter
---- if they match, return them both together as a string
---- else if they don't match,
set value of last character to equal current character
-- loop again
- if no matches found after looping ends, return boolean false
*/
C: Code
Let's finally move on to the C for coding step! in this step, the code is not in a comment, but I leave a small comment above it to show this is the code section. Here is the Code step with just the function created:
/*
...
*/
/*
** Code,
*/
function firstDouble(stringArg) {}
Wow, we are almost there! 😎 Only need to implement the approach laid out in the previous step and then the function can be tested. I sometimes will paste my Approach comment into the function body to serve as a guide.
function firstDouble(stringArg) {
//- create function firstDouble(stringArg)
//- declare variable to hold value of character from previous loop (lastCharacter)
//- iterate over the input for the length of the input
//-- declare variable for current character (currentCharacter)
//-- check if the currentCharacter has the same value as the lastCharacter
//---- if they match, return them both together as a string
//---- else if they don't match,
// set value of last character to equal current character
//-- loop again
//- if no matches found after looping ends, return boolean false
}
Let's move the first comment outside of the function since it correlates to the creation of the function. Then I will go ahead and start coding:
//- create function firstDouble(stringArg)
function firstDouble(stringArg) {
//- declare variable to hold value of character from previous loop (lastCharacter)
let lastCharacter;
//- iterate over the input for the length of the input
for (let i = 0; i < stringArg.length; i++) {
//-- declare variable for current character (currentCharacter)
const currentCharacter = stringArg[i];
//-- check if the currentCharacter has the same value as the lastCharacter
if (currentCharacter === lastCharacter) {
//---- if they match, return them both together as a string
return `${lastCharacter}${currentCharacter}`;
} else {
//---- else if they don't match, set value of last character to equal current character
lastCharacter = currentCharacter;
}
//-- loop again
}
//- if no matches found after looping ends, return boolean false
return false;
}
Okay, C: Code is now done. I am going to remove the comments so it is easier to read:
function firstDouble(stringArg) {
let lastCharacter;
for (let i = 0; i < stringArg.length; i++) {
const currentCharacter = stringArg[i];
if (currentCharacter === lastCharacter) {
return `${lastCharacter}${currentCharacter}`;
} else {
lastCharacter = currentCharacter;
}
}
return false;
}
Now, I know you might be thinking that you could have solved this problem without the extra time spent following the REACTO methodology, and that's natural. Just know that as the problems increase in complexity this approach will make solving them more manageable.
The next step is to test the code!
T: Test
Now comes the time to test the code. You can use whatever testing library you'd prefer. I am going to link a codepen here using console.log() to show the results.
In the above Codepen, click the JS tab to see the tests. They are simple log statements. Here they are, from E: Examples:
> firstDouble("aardvark");
aa
> firstDouble("1-800-257-8999");
00
> firstDouble("pamphlet");
false
O: Optimize
We passed our own tests! 🎉 Yay! Now let's optimize, if possible.
function firstDouble(stringArg) {
let lastCharacter;
for (let char in stringArg) {
const currentCharacter = stringArg[char];
if (currentCharacter === lastCharacter) {
return `${lastCharacter}${currentCharacter}`;
} else {
lastCharacter = currentCharacter;
}
}
return false;
}
Um, that wasn't much of a change and didn't optimize the function but it does look more tidy. This is as far as we need to take this one. 🎉 Congrats, you've read a very long post, and my first one at that! Thank you very much for sticking around and please comment if you would like to share any tips! Did I mess up somewhere? Please don't hesitate to let me know.
Also, if you'd like to mess around with this code further check it out the Codepen.
Top comments (2)
Thanks for sharing your approach Angel! I really enjoyed reading through your post and following along. Really looking forward to more informative posts from you friend.
Thank you so much for taking the time to follow along!