DEV Community: A.M. Hernandez

How I REACTO to Algos: Sum Intervals

A.M. Hernandez — Sun, 17 Apr 2022 03:52:48 +0000

How I react to algos

More time planning could mean less time correcting. That's why REACTO is so useful. It helps us focus on the plan before we act. Sort of like measuring twice and cutting once. Today, we will work with nested arrays and plan our approach to the solution using REACTO.

Before we move any further, I'd like to poit out the previous 4 posts in the series:

This is REACTO

REACTO is an acronym that represents the method we will use in solving this problem. As a reminder, these are the steps:

R: Restate
E: Example
A: Approach
C: Code
T: Test
O: Optimize

Let's stick to this order and get started!

The Prompt

Write a function called sum_intervals() that accepts an array of intervals, and returns the sum of all the interval lengths. Overlapping intervals should only be counted once.

Intervals are represented by a pair of integers in the form of an array. The first value of the interval will always be less than the second value. Interval example: [1, 5] is an interval from 1 to 5. The length of this interval is 4.

Overlapping Intervals
List containing overlapping intervals:
[
[1,4],
[7, 10],
[3, 5]
]

The sum of the lengths of these intervals is 7. Since [1, 4] and [3, 5] overlap, we can treat the interval as [1, 5], which has a length of 4.

R: Restate the prompt

We need to restate the prompt so it could help us plan our approach later. When we restate the prompt we should try to keep our description brief. Brief are easier to scan read while working out the solution.

/* 
R: Restate
*/

// create function sumIntervals
// args: array of arrays containing two integers => [[int, int], [int, int],  [int, int], ...]
// overlapping intervals are counted once
// return value is integer, sum of all intervals of input array

Clarifying questions:

If there are any lingering questions we should ask them here but we can ask about them later as well. I have none so let's move on.

E: Examples

Let's get some examples listed so we can use it to guide our approach.

sample input


> sumIntervals( [
   [1,2],
   [6, 10],
   [11, 15]
] );

9

> sumIntervals( [
   [1,4],
   [7, 10],
   [3, 5]
] );

7

> sumIntervals( [
   [1,5],
   [10, 20],
   [1, 6],
   [16, 19],
   [5, 11]
] );

19

A: Approach

This is the heartiest part of our journey to the solution. We need a plan. I like to build the approach as a comment so I could easily reorder them when necessary.

/*
A: Approach

- create function function()
*/

First step is to create the function. Now we need to handle the input. Let's think about why our example says that an interval [1, 5] is 4. When I think about it, 1 to 5 contain 5 numbers. So why is the length 4? Well, if we are dealing with time we don't count every integer but the space between them. So to get from 1 to 2 we will need 1 unit. Same for 1 to 5. Look at it like this:

1 to 2 = 1 unit
2 to 3 = 1 unit
3 to 4 = 1 unit
4 to 5 = 1 unit

That's 4 units total.

/*
A: Approach

- create function function()
- init accumulator for sum of intervals, type int
- init accumulator for visited indices, arr type int
- iter over input intervals array, index i
-- declare const for current interval
-- iter over current interval, index j
--- if the arr accumulator for visited indices does not include this index j
---- increment accumulator for sum intervals by 1
---- push current index j to visited indices array accumulator
- return the sum of intervals accumulator
*/

The comments above lay out the approach. We know that we need to visit every element of the input array. Then we want to take account of the interval numbers we have visited in case we come across them again in another element. Another initial step is to create a variable to hold onto the return value that we can increment as we loop over the input array. We set up an empty array to keep tabs on the visited indices.

Next, we need to iterate over the input array. At each iteration we need to set a constant to hold onto the current interval of the input array. Then we loop over the interval, setting the first value of the interval as the starting index for this loop, and the second value of the interval as the end index. This way we are counting from starting integer to end integer of the interval pair (see below).

interval --> [1, 5]
for(let j=interval[0]; j<interval[1]; j++){ ... }

While in the inner loop, we check if the visited indices array does not include the current index. If the array contains the index we don't want to count it. If the array does not contain the index we need to count it. We do that by incrementing the accumulator for interval sum by 1. Then, while still in the conditional block, we will push the index number of this inner loop to the accumulator of visited indices.

When the outer loop is done we can then return the interval sum accumulator value.

C: Code

Time to code! 🧑‍💻
Let's set up the function and then copy the approach as comments into the function to use as a guide.

// create function function()
function intervalSum() {
  // init accumulator for sum of intervals, type int
  let intervalSum = 0;

  // init accumulator for visited indices, arr type int
  let intArr = [];

  // iter over input intervals array, index i
  for (let i = 0; i < intervals.length; i++) {
    // declare const for current interval
    const interval = intervals[i];

    // iter over current interval, index j
    for (let j = interval[0]; j < interval[1]; j++) {
      // if the arr accumulator for visited indices does not include this index j
      if (intArr.includes(j) === false) {
        // increment accumulator for sum intervals by 1
        intervalSum++;

        // push current index j to visited indices array accumulator
        intArr.push(j);
      }
    }
  }
  // return the sum of intervals accumulator
  return intervalSum;
}

That should be everything! Now I am going to remove the comments for readability, but I would usually keep comments in if I am saving this to my local machine so that I may review the thought process in the future. Here's the code without the comments:

function sumIntervals(intervals) {
  let intervalSum = 0;
  let intArr = [];

  for (let i = 0; i < intervals.length; i++) {
    const interval = intervals[i];

    for (let j = interval[0]; j < interval[1]; j++) {
      if (intArr.includes(j) === false) {
        intervalSum++;
        intArr.push(j);
      }
    }
  }
  return intervalSum;
}

Doesn't that look great? We could have actually tested the code before removing the comments. Let's continue.

T: Test

Let's test! Here is a Codepen with the function in the JS tab on the left and the results on the right. Feel free to play around with the code and explore.

All of our tests passed! Feel free to play around with the function and the tests to experiment.

O: Optimize

Can you find a more optimal solution than using two for loops? I bet you can find a more efficient solution. That is the task of our next step. At this point we have found the solution so it's worth celebrating. It is good practice to then look for a more optimal solution if one exists.

Thank You

Thank you for taking time out of your day to read this post. Follow me here on DEV if you'd like to see more content like this and follow my explorations into the world of web development. I'll see you around!

How I REACTO to Algos: Caesar Decipher

A.M. Hernandez — Sun, 27 Mar 2022 05:06:44 +0000

How I react to algos

It is finally time to decipher the Caesar Cipher.
First, here's a quick reminder of what the Caesar Cipher is, from Wikipedia do some explaining on that matter:

In cryptography, a Caesar cipher ... is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.

In the last article we explored the Caesar Cipher and created a function to encrypt messages suing a secret key. In this article we will decipher an encoded message. After this we will be able to encrypt and decrypt using the Caesar Cipher, opening up some more avenues of exploration. Before we go any further, I'd like to point out my previous articles in this REACTO series:

Now, a quick recap on how we will get to our solution using REACTO.

This is REACTO

REACTO is an acronym that represents the method we will use in solving this problem. As a reminder, these are the steps:

R: Restate
E: Example
A: Approach
C: Code
T: Test
O: Optimize

Okay, you know what to do now.

The Prompt

Create a function that will receive a string secret and a key number as input and return a decoded version of the secret. A secret is decoded by replacing each letter in the secret with the letter that is a specified number (the key argument) of letters ahead of it in the alphabet. When shifting, if the selection goes beyond the last letter of the alphabet you should continue counting from the first letter of the alphabet. Decoded messages should be returned in all upper case.

R: Restate the prompt

I worded the prompt similarly to the previous prompt for Caesar Cipher because the goal is nearly identical. The solution should be very similar so let's just jump right into it. First, I am restating this prompt, again reflecting the restatement of the last prompt. Except this time we know that the function may receive a string containing non-letter characters which must remain unaltered, and the input string may be in either lower or upper case.

/* 
R: Restate

Create a function that takes two args: a string and a number.
Return an decoded version of the string in all upper case.
In order to decode the string, each letter needs to be unshifted by the number argument.
While unshifting, if we need to go right of the last letter in the alphabet we should wrap to the first letter of the alphabet.
Non-letter characters should not be altered.
*/

E: Examples

To test this function we are going to use the secrets generated in the previous article, Caesar Cipher. Those secrets will now be our test inputs and the decoded messages will be the expected outputs.

sample input

// example 1

> message = "QEB NRFZH YOLTK CLU GRJMBA LSBO QEB IXWV ALD";
> key = 3;

> caesarCipher(message, key);

THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG


// example 2

> message2 = "OHCL FVB LCLY OLHYK VM AOL IFGHUAPUL NLULYHSZ WYVISLT?";
> key2 = 19;

> caesarCipher(message2, key2);

Have you ever heard of The Byzantine Generals problem?


// example 3

> message3 = "YMJD XFB FGTZY 5 BTQAJX HNWHQNSL YMJ KNJQI!";
> key3 = 99;

> caesarCipher(message3, key3);

They saw about 5 wolves circling the field!

A: Approach

Time to plan an approach to solving the prompt. This is going to very similar to our approach to the caesarCipher problem, except we traverse the alphabet in the opposite direction using the key.

When we previously encoded the message THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG with a key 3 we got the secret string QEB NRFZH YOLTK CLU GRJMBA LSBO QEB IXWV ALD. Thus, we should now be able to decode the secret QEB NRFZH YOLTK CLU GRJMBA LSBO QEB IXWV ALD with the same key of 9 and get back the string message THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG. This is our goal.

First, we can lay out the first steps:

/*
A: Approach

- create function caesarDecipher(secret, key)
*/

We know that we should return a string in all upper case, and that the input string may be in any case. I would want to convert the input string to upper case before iterating over it. We are also going to use a string constant to hold all of the letter of the alphabet in order. This string should already be in all upper case to make comparisons simpler. Before iterating over the secret string we should set up an accumulator to build up the decoded message.

When iterating over the string the algorithm needs to visit each character of the secret in order, starting from the 0 index. We can use a for loop limited to the length of the string, just as we did for the cipher function. In each loop, we should declare a constant for that current character of the string secret and check if it is a letter. If it is not a letter it will be added to the decoded message string, and if it is a letter it will need to be decoded first and then added to the message string.

If the current character is a letter get the index of it in the constant string alphabet. This letter will then be replaced with another letter of the alphabet that is key letters ahead of it. We will also wrap from letter Z to letter A when the key requires we go beyond the index of 25, the last index of the alphabet. Wrapping can be acheived by getting the remainder of the sum of the current index divided by 26. 26 because that is the number of letters in the alphabet, and will eb the length of the alphabet string.

To clarify the point on wrapping; the position of the letter X is 23 and, for example, the key is 5 then the position of the decoded would be 28. There is no index past 25, though. That's why we need to wrap, and we can do that by adding the index of the current character to the key number. That sum may be divided by 26, the total length of the alphabet, to give us a remainder. Whatever that remainder number is will be the location of the decoded letter:

letter X is at index 23
index 23 + key 5 = 28
and the remainder of 28 / 26 = 2
the letter at index 2 is C

Once the replacement letter, or the decoded letter, is found it will be added to the decoded message string. After every character of the input string has been visited the decoded message string can be returned. The end!

Now it can be added to a comment and then we can add that comment into our fucntion!

/*
A: Approach

- create function caesarDecipher(message, key)

- create constant for alphabet characters, all caps
- create variable for the return string value (encoded message)
- convert input string to upper case
- iterate over input string
-- create constant for the current character
-- check if current character is a letter and get the index of that letter in the alphabet
-- IF character is a letter:
--- add the key value to the current character's index to get the index of the substitute character (decoded character)
--- IF the index for the substitute character is greater than 26:
---- the value for the substitute's index should be updated to be the remainder of this index and 26
--- get the substitute character at this new index from the alphabet constant and add it to the decoded message
-- ELSE if character is not a letter, add it to the decoded message without change
- return the decoded message
*/

C: Code

I'm going to drop the approach comments into the function and use that as my guide.

// - create function caesarDecipher(message, key)
function caesarDecipher(secret, shift) {
  // - create constant for alphabet characters, all caps
  let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  // - create variable for the return string value (encoded message)
  let message = "";

  // - convert input string to upper case
  secret = secret.toUpperCase();

  // - iterate over input string
  for (let i = 0; i < secret.length; i++) {
    // -- create constant for the current character
    let char = secret[i];

    // -- check if current character is a letter and get the index of that letter in the alphabet
    let pos = alphabet.indexOf(char);

    // -- IF character is a letter:
    if (pos > -1) {
      // --- add the key value to the current character's index to get the index of the substitute character (decoded character)
      let newPos = pos + shift;

      // --- IF the index for the substitute character is greater than 26:
      if (newPos >= 26) {
        // ---- the value for the substitute's index should be updated to be the remainder of this index and 26
        newPos = newPos % 26;
      }

      // --- get the substitute character at this new index from the alphabet constant and add it to the decoded message
      let newChar = alphabet[newPos];
      message += newChar;

      // -- ELSE if character is not a letter, add it to the decoded message without change
    } else {
      message += char;
    }
  }
  // - return the decoded message
  return message;
}

Let's note the use of indexOf() which returns -1 if the character is not found in the target string. Also, we are checking if the index is over 26, but we don't need to do that. Even if the number is below 25 and we use the modulo operator to get the remainder with 26 it will simply return the same index. For example, if the new index position is 5, the result fo 5 % 26 will be 5. Therefore, the conditional checking if the new index is over 26 is unnecessary. I will include that change below. Here's the code without the comments:

function caesarDecipher(secret, shift) {
  let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let message = "";
  secret = secret.toUpperCase();
  for (let i = 0; i < secret.length; i++) {
    let char = secret[i];
    let pos = alphabet.indexOf(char);
    if (pos > -1) {
      let newPos = (pos + shift) % 26;
      let newChar = alphabet[newPos];
      message += newChar;
    } else {
      message += char;
    }
  }
  return message;
}

T: Test

Now for the tests!

Here is a Codepen with the function in the JS tab on the left and the results on the right. Feel free to play around with the code and explore.

O: Optimize

Nothing more to add here that wasn't covered in caesarCipher algo. Since we need to visit each character in the input string the time complexity will remain O(n) and so will the space.

And that is the last step! If you have any questions or suggestions, please leave a comment below!

What's Next?

Well, now that we can encode and a decode a message we should build an app that can do this for others!! Well, luckily I have already put together this app last summer when I first came across the Caesar Cipher. Back then I went about it the opposite of how we did in this series, so I will be updating the functions there to reflect these updates. By the time you visit this link, it should already be updated. And yes, I did spell cipher with a y a bunch of times. I think I'll stick with cipher though!


am-hernandez.github.io/caesarCipher

Visit the CaesarCipher app here to share secret messages with friends!

Look out for a follow-up where I will walk you through creating this app from these last two algos

Thank You

Once again. I would like to thank you for taking time out of your day to read this post. Follow me here on DEV if you'd like to see more content like this as I post about my explorations into the world of web development. I'll see you around!

How I REACTO to Algos: Caesar Cipher

A.M. Hernandez — Sun, 20 Mar 2022 03:45:12 +0000

How I react to algos

Today we are going to go over the Caesar Cipher. Or cypher... Or cipher? 🤔
What is the Caesar Cipher anyway? Well, I'll let Wikipedia do some explaining on that matter:

In cryptography, a Caesar cipher ... is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.

Our goal will be to encode a message using this cipher! Before we go any further on this algo, I'd like to point out my previous articles in this series:

Now, a quick recap on how we will get to our solution using REACTO.

This is REACTO

REACTO is an acronym that represents the method we will use in solving this problem. As a reminder, these are the steps:

R: Restate
E: Example
A: Approach
C: Code
T: Test
O: Optimize

🏁 Let's get started!

The Prompt

Create a function that will receive a string message and a key number as input and return an encoded version of the message. A message is encoded by replacing each letter in the message with the letter that is a specified number (the key argument) of letters before it in the alphabet. When shifting, if the selection goes beyond the first letter of the alphabet you should continue counting from the last letter of the alphabet. Encoded messages should be returned in all upper case.

R: Restate the prompt

Here's where we can make note of the prompt and restate it in our own own words. I actually worded the prompt above so I will just word it differently below in the way I normally would.

/* 
R: Restate

Create a function that takes two args: a string and a number.
Return an encoded version of the string in all upper case.
In order to encode the string, each letter needs to be shifted by the number argument.
While shifting, if we need to go left of the first letter in the alphabet we should wrap to the last letter of the alphabet.
*/

Clarifying questions:

Q: Might the function receive non-letter characters?
A: Yes, the function may receive non-letter characters. Only letters will be shifted, keep other character in places.

Q: Will the input string always be all caps?
A: The input string may be in lower or upper case or a mix of both.

Okay, so that's cleared up and will be added to the restatement of the prompt in our notes:

/* 
R: Restate

Create a function that takes two args: a string and a number.
Return an encoded version of the string in all upper case.
In order to encode the string, each letter needs to be shifted by the number argument.
While shifting, if we need to go left of the first letter in the alphabet we should wrap to the last letter of the alphabet.
Non-letter characters should not be altered.
*/

E: Examples

In this section we will need to create some examples of the expected return values. Examples should be provided and we can always add more for clarification. We'll pull the first example from that same Wikipedia article on Caesar Cipher.

// example 1

> message = "THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG";
> key = 3;

> caesarCipher(message, key);

QEB NRFZH YOLTK CLU GRJMBA LSBO QEB IXWV ALD

// example 2

> message2 = "Have you ever heard of The Byzantine Generals problem?";
> key2 = 19;

> caesarCipher(message2, key2);

OHCL FVB LCLY OLHYK VM AOL IFGHUAPUL NLULYHSZ WYVISLT?

// example 3

> message3 = "They saw about 5 wolves circling the field!";
> key3 = 99;

> caesarCipher(message3, key3);

YMJD XFB FGTZY 5 BTQAJX HNWHQNSL YMJ KNJQI!

We could come up with many examples, but this should be good for now. We can see that the spacing and punctuation are preserved.

A: Approach

Before coding it will be best to think through an approach to finding a resolution. First step is definitely going to be creating the function that takes two arguments. What else?
I will write out the approach in a comment below the restatement of the prompt. You might find that you write your approach and then edit it a few times before moving on to the next step of coding your solution.

In the function we will want to create a string that holds every letter of the alphabet in order and in all caps.

/*
A: Approach

- create function caesarCipher(message, key)

- create constant for alphabet characters, all caps
*/

Making the alphabet upper case will make it easier to match the letters in the message. Even if the letters in the message were lower case, we will end up converting these letters to upper case before iterating over the message string. We should also set up an accumulator to form the encoded message as we iterate over the input string.

/*
A: Approach

- create function caesarCipher(message, key)

- create constant for alphabet characters, all caps
- create variable for the return string value (encoded message)
- convert input string to upper case
*/

This brings us the what I was alluding to earlier, we need to iterate over the input string. With each iteration we should get the current character of the input string and check if it is a letter by comparing it to the alphabet constant. If the character is in the character constant then it is a letter. If the character is not a letter we should just add it to the encoded message and move on to the next character in the input string. If the character is a letter we will need to do more work.

/*
A: Approach

- create function caesarCipher(message, key)

- create constant for alphabet characters, all caps
- create variable for the return string value (encoded message)
- convert input string to upper case
- iterate over input string
-- create constant for the current character
-- check if current character is a letter
--- if character is not a letter, add it to the encoded message without change
--- else if char is a letter ....?
*/

What should you do if a character is a letter? You should get the index of that letter in the alphabet and then combine it with the input key number. Ok, so we get the index of the current letter, but how do we use the key value that was the second argument to the function?

The key is the shift number, and the prompt states we move down the alphabet key number of times. If we have the key 3 and the current character is D, then the encoded letter should be A. The character D is the fourth letter of the alphabet and so is at its index 3. With a key of 3, we can see that 3 - 3 = 0, and that the letter at index 0 is A. So D would be A if the key is 3.

Below, you can see that if you rotate the cipher string left by 3 you will end up with the plain alphabet. That's like calling .shift() three times on cipher if it was an array, and adding the shifted letters to the end of the same array as they come off the front.

┌────────┬─────────────────────────────────────────────────────┐
│ plain  │ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z │
├────────┼─────────────────────────────────────────────────────┤
│ cipher │ X Y Z A B C D E F G H I J K L M N O P Q R S T U V W │
└────────┴─────────────────────────────────────────────────────┘

The cipher is created by unshifting the plain alphabet and the alphabet is recreated by shifting the cipher text.

Let's get back to the code! We know we need to subtract the key from the current index of the current character but what if we generate a negative number for the new index? In order to handle these cases we need to consider the amount of letters in the alphabet. There are 26 letters in the alphabet, so the indices range from 0-25. If we go below 0 we will need to make sure we can wrap back around the other end of the alphabet. If our starting position is the 0 index and the key is 3, our new position will be at -3. Since the new position is below 0 we know that we must count back from the last index, 25, three times. If we do that it will make the new position 22, or letter W, which is one less index than we intend. That's because there are 26 letters but 25 indices, since we start counting indices at 0. So we should add a 1 to the new position if it is below zero, then get the remainder from dividing this new position by 26. The remainder number will be negative so we can add that to the number of the last index, 25, to get to the updated new position of 23, or the letter X.

/*
A: Approach

- create function caesarCipher(message, key)

- create constant for alphabet characters, all caps
- create variable for the return string value (encoded message)
- convert input string to upper case
- iterate over input string
-- create constant for the current character
-- check if current character is a letter and get the index of that letter in the alphabet
--- if character is not a letter, add it to the encoded message without change
--- else if character is a letter, subtract the key value from its alphabet index to get the index of the substitute character (encoded character)
---- if the new index is less than 0, the value should instead be the value of the remainder from new index +1 divided by 26 plus 25
*/

The last step in our approach would leave us with a negative number if the new index was below 0 and performed a modulo operation for the remainder. So if we add that negative remainder to 25 (number of indices in alphabet), we will get the appropriate letter by counting backward from the last index. This way, no matter how large the key is we will still get to our letter. In programming we won't actually have a letter wheel to rotate so we need to consider the 0th index and wrapping!

Once we have this new index position we can grab the corresponding letter from the alphabet and add it to the encoded message we will be returning at the end of the function. Then we may return the encoded message and be done!

This is the updated approach:

/*
A: Approach

- create function caesarCipher(message, key)

- create constant for alphabet characters, all caps
- create variable for the return string value (encoded message)
- convert input string to upper case
- iterate over input string
-- create constant for the current character
-- check if current character is a letter and get the index of that letter in the alphabet
-- IF character is a letter:
--- subtract the key value from current character's index to get the index of the substitute character (encoded character)
--- IF the index for the substitute character is less than 0:
---- the value for the substitute's index should instead be 25 plus the remainder of this index+1 and 26
--- get the substitute character at this new index from the alphabet constant and add it to the encoded message
-- ELSE if character is not a letter, add it to the encoded message without change
- return the encoded message
*/

C: Code

Time to code! 🧑‍💻
This has been a very long article yet our approach seems so simple! Let's put the plan to action by pasting the approach comments into the function to serve as a guide.

if you would like to take some time to figure this out do not scroll any further! Otherwise, keep scrolling when you are ready and prepare for spoilers!

// - create function caesarCipher(message, key)
function caesarCipher(message, key) {
  // - create constant for alphabet characters, all caps
  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  // - create variable for the return string value (encoded message)
  let secret = "";
  // - convert input string to upper case
  message = message.toUpperCase();

  // - iterate over input string
  for (let i = 0; i < message.length; i++) {
    // -- create constant for the current character
    let char = message[i];

    // -- check if current character is a letter and get the index of that letter in the alphabet
    let pos = alphabet.indexOf(char);

    // -- IF character is a letter:
    if (pos > -1) {
      // --- subtract the key value from current character's index to get the index of the substitute character (encoded character)
      let newPos = pos - key;

      // --- IF the index for the substitute character is less than 0:
      if (newPos < 0) {
        // ---- the value for the substitute's index should instead be 25 plus the remainder of this index+1 and 26
        newPos = 25 + (newPos + 1) % 26;
      }

      // --- get the substitute character at this new index from the alphabet constant and add it to the encoded message
      let newChar = alphabet[newPos];
      secret += newChar;

      // -- ELSE if character is not a letter, add it to the encoded message without change
    } else {
      secret += char;
    }
  }
  // - return the encoded message
  return secret;
}

And here is the function with no comments:

function caesarCipher(message, key) {
  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let secret = "";
  message = message.toUpperCase();
  for (let i = 0; i < message.length; i++) {
    let char = message[i];
    let pos = alphabet.indexOf(char);
    if (pos > -1) {
      let newPos = pos - key;
      if (newPos < 0) {
        newPos = 25 + (newPos + 1) % 26;
      }
      let newChar = alphabet[newPos];
      secret += newChar;
    } else {
      secret += char;
    }
  }
  return secret;
}

Let me take a moment to point out the use of the method indexOf(). It returns the value of the index where the character provided in the argument is found in the target string or array. If the character is not in the string the method will return -1. So if the the method returns a number greater than -1 we can assume it is a letter.

T: Test

The exciting part is translating the approach into code. The fun part is testing the code! Let's take a look at the codepen provided below where I laid out some tests.

🎉! We passed our own tests again! Nice! We should now give some thought to optimizing this function.

O: Optimize

Going over the alphabet is always going to be constant no matter the size of the input string, so not worth optimizing that. We do, though, create a new string the same size as the input string but in upper case when we use message = message.toUpperCase(). I can imagine for a very large input string this would be a problem. Maybe we should only check if the upper case version matches without turning the entire string to upper case? I did time the differences for this kind of change and it seemed to go even slower. I will have to look into that some more and talk about it in the follow up to this article or else update this section. We do loop over the entire input string and that will always happen because we need to visit every character in the message. With that, we know the time complexity is going to remain O(n). The space complexity will be the same. So, at the moment there is no optimization obvious to me right now, except making the alphabet constant an object. If you have any input on this please comment below!

What's Next?

Next, we are going to decipher a coded message!

Thank You

Once again, I would like to thank you for taking time out of your day to read this post. Follow me here on dev.to if you'd like to see more content like this. I'll see you around!

How I REACTO to Algos: Tournament Winner

A.M. Hernandez — Sat, 05 Mar 2022 00:01:17 +0000

How I react to algos

This is the third article in a series aiming to familiarize you with REACTO as a method of solving any algorithm problem. Today we are working on an algo found on AlgoExpert called tournamentWinner.

Check out the previous article in the series, Pig Latin

This is REACTO

REACTO is an acronym that represents the method we will use in solving this problem. As a reminder, these are the steps:

R: Restate
E: Example
A: Approach
C: Code
T: Test
O: Optimize

Let's stick to this order and get started!

The Prompt

A tournament just ended and you need to find the winner. Each round has a pair of teams facing off and only one team wins. The winning team is awarded 3 points. Create a function called tournamentWinner that takes two arrays as input and return the winner of the tournament. The first array, called competitions, consists of arrays of two team names that faced each other in the round and will be in the form ["homeTeam", "awayTeam"]. The second argument is an array called results whose elements will be either a 1 or a 0. The same index at both arrays shows the teams that faced off and which of the teams won for that round. For example, at index i, the teams at competitions[i] competed against each other and the team represented by results[i] is the winner from that pair. Note that results[i] will be either a 1 or a 0, with 1 representing a win for the homeTeam, and a 0 representing a win for the awayTeam.

R: Restate the prompt

Now we will restate the prompt, which is important especially if you were given the prompt verbally.

/* 
R: Restate

Given two arrays as input, one an array of team pairs
(each element is an array of two strings), and the other
an array of integers stating the winner of the pair, return
the team with the most points. The winning team in a pairing
is awarded 3 points while the other team in the pair is
awarded 0 points. The team with the most points after all
pairs are considered is the winner of the tournament. Each
team pairing from the first array has a home and an away
team. The second input array is the results array, contains
numbers of either 0 or 1, where 0 means the away team wins in
the pair and 1 means the home team wins for the pair.
*/

Now's a good time for questions and I happen to have one:

Q: Will a team face the same team twice?\
A: No, each pairing is unique.

That was probably a given, but better to not assume!

E: Examples

E is for examples and will usually be provided. If they are discussed verbally don't forget to write them down for reference because it could help guide in testing later.

Below we will see the two input arrays labeled competitions and results.

sample input

competitions = [
  ["Mice", "Pandas"],
  ["Pandas", "Pythons"],
  ["Pythons", "Mice"],
];
results = [1, 0, 0];

sample output

"Mice";

We can see why Mice is the winning team. Mice beats Pandas, Pythons beat Pandas, Mice beat Pythons. The score would look like this:

Mice - 6 points\
Pandas - 0 points\
Pythons - 3 points

So team Mice wins in this example!

A: Approach

Here is where we plan our approach. We should keep the code to a minimum and really think through the steps we will take to reach a solution.

On my first attempt this was my thought process:

create an object to act as a score keeper.
declare a variable to hold the index so it can be used on both input arrays simultaneously
declare another variable to hold the current high score until iteration over the arrays ends, can be initiated with value of 0
use a while loop to iterate over both the arrays
declare a variable to hold the string name of the tournament winner, and update it while looping

That's a general view of how I will approach this problem. It will be more of a brute force tactic. Usually I want to get to a solution first before I think of optimization. Remember optimization is the last step of REACTO anyway. As skills develop we may start thinking about more efficient methods first, but I expect any beginner to feel more comofortable with this approach as I am.

So, if we are using a while loop what should we include inside of it?

loop only while the index value is less than the length of either of the input arrays (the arrays have the same amount of elements)
declare a home and away variable and assign to them the values from the competitions array (const [home, away] = competitions[indexValue])
declare variable for winner of the pair and assign it the integer value from the results array at the given index value
create conditional statements:
- if winner is 0 (0 is the away team), then add entry to score keeper object with team name and value of 3... but if the already exists we just set value to += 3
- repeat for winner being 1
increase the index value at the end of the loop
after the while loop we can iterate over the score keeping object
- start with a conditional: if the value of current key is greater than the value of the high score variable, set the value of high score to the current key's value AND set the value of the tournament winner variable to the current key
lastly, return the string value from the tournament winner variable

Okay!! That was quite verbose, but it helps to be detailed in this step. My preferred method of writing an approach is to write them in as a comment inside of the function and use them as a guide for the code. Let's add the above as a comment first and then we will copy it off and paste it into our function when we are ready to code.

/*
A: Approach

- create function tournamentWinner() that takes two arrays as args; competitions and results. <<-- forgot to add this
Inside of the function:
- create an object to act as a score keeper.
- declare a variable to hold the index so it can be used on both input arrays simultaneously, set initial val to 0
- declare another variable to hold the current high score until iteration over the arrays ends, can be initiated with value of 0
- declare a variable to hold the string name of the tournament winner, and update it while looping
- use a while loop to iterate over both the arrays
- loop only while the index value is less than the length of either of the input arrays (the arrays have the same amount of elements)
- declare a home and away variable and assign to them the values from the competitions array (`const [home, away] = competitions[indexValue]`)
- declare variable for winner of the pair and assign it the integer value from the results array at the given index value
- create conditional statements:
  - if winner is 0 (0 is the away team), then add entry to score keeper object with team name and value of 3... but if the already exists we just set value to += 3
  - repeat for winner being 1
- increase the index value at the end of the loop
- after the while loop we can iterate over the score keeping object
  - start with a conditional: if the value of current key is greater than the value of the high score variable, set the value of high score to the current key's value AND set the value of the tournament winner variable to the current key
- lastly, return the string value from the tournament winner variable
*/

I added some more to those comments for clarity. And yeah, it looks rather clunky but we will get tp tidying later. Now it is time to code.

C: Code

Time to code! 🧑‍💻
If you've read my other articles in this series you'll know that I like to copy my Approach comments and paste them into my code as a guide.

// create function tournamentWinner() that takes two arrays as args; competitions and results. <<-- forgot to add this
/* Inside of the function: */
// create an object to act as a score keeper.
// declare a variable to hold the index so it can be used on both input arrays simultaneously, set initial val to 0
// declare another variable to hold the current high score until iteration over the arrays ends, can be initiated with value of 0
// declare a variable to hold the string name of the tournament winner, and update it while looping
// use a while loop to iterate over both the arrays
// loop only while the index value is less than the length of either of the input arrays (the arrays have the same amount of elements)
// declare a home and away variable and assign to them the values from the competitions array (`const [home, away] = competitions[indexValue]`)
// declare variable for winner of the pair and assign it the integer value from the results array at the given index value
// create conditional statements:
//// if winner is 0 (0 is the away team), then add entry to score keeper object with team name and value of 3... but if the already exists we just set value to += 3
//// repeat for winner being 1
// increase the index value at the end of the loop
// after the while loop we can iterate over the score keeping object
//// start with a conditional: if the value of current key is greater than the value of the high score variable, set the value of high score to the current key's value AND set the value of the tournament winner variable to the current key
// lastly, return the string value from the tournament winner variable

The comments have been reformatted into single line comments so that they may be moved around easily. Now that the approach is laid out in the coding environment of choice we can start writing JavaScript (or your language of choice). What you will see next are the comments and their translation into JavaScript.

// create function tournamentWinner() that takes two arrays as args; competitions and results.
function tournamentWinner(competitions, results) {
  /* Inside of the function: */
  // create an object to act as a score keeper.
  let leaderboard = {};

  // declare a variable to hold the index so it can be used on both input arrays simultaneously, set initial val to 0
  let tournamentIdx = 0;

  // declare another variable to hold the current high score until iteration over the arrays ends, can be initiated with value of 0
  let highScore = 0;

  // declare a variable to hold the string name of the tournament winner, and update it while looping
  let champ;

  // use a while loop to iterate over both the arrays
  // loop only while the index value is less than the length of either of the input arrays (the arrays have the same amount of elements)
  while (tournamentIdx > results.length) {
    // declare a home and away variable and assign to them the values from the competitions array (`const [home, away] = competitions[indexValue]`)
    const [home, away] = competitions[tournamentIdx];

    // declare variable for winner of the pair and assign it the integer value from the results array at the given index value
    const winner = results[tournamentIdx];

    // create conditional statements:
    // if winner is 0 (0 is the away team), then add entry to score keeper object with team name and value of 3... but if the already exists we just set value to += 3
    if (winner === 0 && leaderboard[away]) {
      leaderboard[away] += 3;
    } else if (winner === 0) {
      leaderboard[away] = 3;
    }

    // repeat for winner being 1
    if (winner === 1 && leaderboard[home]) {
      leaderboard[home] += 3;
    } else if (winner === 1) {
      leaderboard[home] = 3;
    }

    // increase the index value at the end of the loop
    tournamentIdx++;
  }

  // after the while loop we can iterate over the score keeping object
  for (let key in leaderboard) {
    // start with a conditional: if the value of current key is greater than the value of the high score variable, set the value of high score to the current key's value AND set the value of the tournament winner variable to the current key
    if (leaderboard[key] > highScore) {
      highScore = leaderboard[key];
      champ = key;
    }
  }

  // lastly, return the string value from the tournament winner variable
  return champ;
}

function tournamentWinner(competitions, results) {
  let leaderboard = {};
  let tournamentIdx = 0;
  let highScore = 0;
  let champ;

  while (tournamentIdx < results.length) {
    const [home, away] = competitions[tournamentIdx];
    const winner = results[tournamentIdx];

    if (winner === 0 && leaderboard[away]) {
      leaderboard[away] += 3;
    } else if (winner === 0) {
      leaderboard[away] = 3;
    }

    if (winner === 1 && leaderboard[home]) {
      leaderboard[home] += 3;
    } else if (winner === 1) {
      leaderboard[home] = 3;
    }

    tournamentIdx++;
  }

  for (let key in leaderboard) {
    if (leaderboard[key] > highScore) {
      highScore = leaderboard[key];
      champ = key;
    }
  }

  return champ;
}

Looking better! Let's test it out.

T: Test

Testing time is here again! Here is a Codepen with the function in the JS tab on the left and the results on the right. Feel free to play around with the code and explore.

O: Optimize

We passed our own tests! 🎉 Oh yeah! Now let's optimize it because you probably noticed we have two loops in the function. That means we loop over the arrays once, in one loop, and then we loop over the score keeping object. We don't need to do the latter, so let's look at a more optimized version below:

function tournamentWinner(competitions, results) {
  let champ = "";
  const leaderboard = { "": 0 };

  for (let i = 0; i < results.length; i++) {
    const result = results[i];
    const [home, away] = competitions[i];
    const winner = result === 1 ? home : away;
    updateLeaderboard(winner, 3, leaderboard);

    if (leaderboard[winner] > leaderboard[champ]) {
      champ = winner;
    }
  }

  return champ;
}

function updateLeaderboard(team, points, leaderboard) {
  if (!leaderboard[team]) {
    leaderboard[team] = 3;
  } else {
    leaderboard[team] += 3;
  }
}

You can see how we made use of a helper function (thanks to AlgoExpert for the helpful guidance) and only make one loop. Let that optimized code sink in! You can see how some things done in the first attempt were unnecessary but did not hinder our progress to a valid solution. If you have any questions or suggestions, please leave a comment below!

Thank You

Once again. I would like to thank you for taking time out of your day to read this post. Follow me here on dev.to if you'd like to see more content like this as I post about my explorations into the world of web development. I'll see you around!

How I REACTO To Algos: Pig Latin

A.M. Hernandez — Mon, 21 Feb 2022 16:00:11 +0000

How I react to algos

This is the second article in a series aiming to familiarize you with REACTO. Today we will tackle a fun one I found on Codewars to translate text to Pig Latin. 🐽

Check out the first article in the series, First Double

Remember REACTO?

REACTO is an acronym that represents the method we will use in solving this problem. As a reminder, these are the steps:

R: Restate
E: Example
A: Approach
C: Code
T: Test
O: Optimize

That's the order and we're sticking to it. Let's get started!

The Prompt

You'll be given a string of words. Create a function called toPigLatin that moves the first letter of each word in a string to the end of the word, then adds "ay" to the end of the word before returning the newly formed string. Leave punctuation marks untouched.

That, right there, is how Pig Latin is made. 🐷💖

R: Restate the prompt

Here we are in the first step, so let's do what it recommends!

/* 
R: Restate

given a string, create function that takes each word of the
string, moves its first letter to the end and adds "ay"
before returning the string.
*/

This time I am going to ask the imaginary instructor some clarifying questions:

Q: Should the return value preserve letter case?
A: No, the string returned should be in all lower case.

Q: Will the function receive a string with numbers in it?
A: No.

In light of this new information, the R: Restate should be modified:

/* 
R: Restate

- given a string, create function that takes each word of the string, moves its first letter to the end and adds "ay" before returning the string. 
- The return value should be in lower case.
*/

E: Examples

You'll always get examples, but if none are supplied you can always ask! Here are some examples of inputs and their expected outputs.

/*
E: Examples

toPigLatin('Pig latin is cool.'); // igpay atinlay siay oolcay.
toPigLatin('Hello world!');     // ellohay orldway!
toPigLatin('I know this is a great place'); // iay nowkay histay siay aay reatgay lacepay
toPigLatin("We can't do this."); // eway an'tcay oday histay.
toPigLatin('Is this the way?'); // siay histay hetay ayway?
*/

A: Approach

Now it is time to write out the approach to take before writing any actual code. Pseudocode is great here.

/*
A: Approach

- create function toPigLatin that takes a string argument
- assign letters of the alphabet to variable with all letters in lower case, call it alphabet
- declare a variable to hold the final string, initialized to empty string, call it pigStr
- split the argument string where there are spaces, " ", which will create an array of words
- iterate over this array of words
- - declare variable to hold current word in loop and make it lower case
- - check if the last character of this word is a letter (is it in the alphabet string?)
- - - if the character is not a letter:
- - - - take characters from word, skipping the first and last, and add to pigStr followed by first character, then "ay", then the last character of the word.(pig! >> ig + p + ay + ! >> igpay!)
- - - else take the word but skip the first letter and add it to pigStr followed by the first letter of the word and then "ay". (cat >> at + c + ay >> atcay)
- - at the end of every loop we should add a space, " ", to pigStr unless it is the last loop.
- return pigStr
*/

There are many ways to get to the solution and the path I have laid out is going to be more verbose than what you might come up with if you aren't a beginner. Let's complete this challenge first and then we can tidy up. 🧹

C: Code

Time to code! 🧑‍💻
If you've read the previous article in this series you'll know that I like to copy my Approach comments and paste them into my code as a guide.

// create function toPigLatin that takes a string argument
function toPigLatin() {
  // assign letters of the alphabet to variable with all letters in lower case, call it alphabet
  let alphabet = "abcdefghijklmnopqrstuvwxyz";

  // declare a variable to hold the final string, initialized to empty string, call it pigStr
  let pigStr = "";

  // split the argument string where there are spaces, " ", which will create an array of words
  let wordsArr = str.split(" ");

  // iterate over this array of words
  for (let i = 0; i < wordsArr.length; i++) {
    // declare variable to hold current word in loop and make it lower case
    let word = wordsArr[i].toLowerCase();

    // check if the last character of this word is a letter (is it in the alphabet string?)
    if (alphabet.includes(word[word.length - 1]) === false) {
      // if the character is not a letter:
      // take characters from word, skipping the first and last, and add to pigStr followed by first character, then "ay", then the last character of the word.(pig! >> ig + p + ay + ! >> igpay!)
      pigStr += word.slice(1, -1) + word[0] + "ay" + word[word.length - 1];
    } else {
      // else take the word but skip the first letter and add it to pigStr followed by the first letter of the word and then "ay". (cat >> at + c + ay >> atcay)
      pigStr += word.slice(1) + word[0] + "ay";
    }

    // at the end of every loop we should add a space, " ", to pigStr unless it is the last loop.
    if (i !== wordsArr.length - 1) {
      pigStr += " ";
    }
  }

  // return pigStr
  return pigStr;
}

That's everything for the code! We are just going to clean up the comments now and add it to a Codepen along with some console.log statements serving as tests.
Here's the function without comments:

function toPigLatin(str) {
  let alphabet = "abcdefghijklmnopqrstuvwxyz";
  let pigStr = "";
  let wordsArr = str.split(" ");
  for (let i = 0; i < wordsArr.length; i++) {
    let word = wordsArr[i].toLowerCase();
    if (alphabet.includes(word[word.length - 1]) === false) {
      pigStr += word.slice(1, -1) + word[0] + "ay" + word[word.length - 1];
    } else {
      pigStr += word.slice(1) + word[0] + "ay";
    }
    if (i !== wordsArr.length - 1) {
      pigStr += " ";
    }
  }
  return pigStr;
}

Now let's test this!

T: Test

Testing time! Here is a Codepen with the function in the JS tab and the results. Feel free to play around with the code and explore.

O: Optimize

We passed our own tests! 🎉 Big celebration! Now let's optimize, if possible.

function toPigLatin(str) {
  let alphabet = "abcdefghijklmnopqrstuvwxyz";
  let pigArr = str.split(" ");
  return pigArr
    .map((word) => {
      word = word.toLowerCase();
      if (alphabet.includes(word[word.length - 1]) === false) {
        return word.slice(1, -1) + word[0] + "ay" + word[word.length - 1];
      }
      return word.slice(1) + word[0] + "ay";
    })
    .join(" ");
}

Can you tell what changes were made? Take a look and don't forget to copy and paste this into the Codepen above to see if you get the same result. Or visit the Codepen here and get to exploring! It's almost as cute as a pig! 🐖🐖!

Thank You

I want to thank you for taking time out of your day to read this post. Follow me here on dev.to if you'd like to see more content like this. I post about my explorations into the world of web development. I'll see you around!

How I REACTO to Algos: First Double

A.M. Hernandez — Fri, 11 Feb 2022 22:03:28 +0000

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.