Problem Solving Process: Partner Challenge

During my first quarter at Turing's front-end engineering program, we worked on a problem-solving challenge with a partner. Each pair selected a problem from five different options, varying in difficulty, and spent 45 minutes working to solve the problem. The goal of this challenge was to refine our process for solving problems we had never seen before and to work on communicating the steps we took to solve a problem.

While working together, we took the following steps:

• Pseudo-code and plan a plan for how to solve the selected challenge.
• Research any JavaScript tools we may need to use to solve our problem.
• Implement the solution in JavaScript using Repl.it

The Problem

My partner and I selected the following problem to solve:

Write a function that takes an Array of Strings, but potentially other data types. This function should return an Array of the same length and they should remain in order. Any strings in the returned array should be all lower case.

Example 1:

var colors = ['Red', 'Green'];
lowerCaseStrings(colors);
// => ['red', 'green']

Example 2:

var randomItems = [1, 'Green', 'pink', true];
lowerCaseStrings(randomItems);
// => [1, 'green', 'pink', true]

How Did It Go?

While this challenge was a small-level experience, it was helpful to work on practicing my problem level skills in a lower-stakes environment and with a new partner.

Initially, we thought the problem would be fairly simple to solve, just having to convert a string in an array to lower case. However, as we talked through the problem, we uncovered more steps and tools that would need to be utilized to reach a solution.

Our process was to talk out what the "user story" of this function would be. Written out version:

//The function will take in an array of items.
//It will change any items that have the data type of string to be in all lower case.
//Once completing this change (if needed) it will return an array of all the items in their original order, and any strings will be converted to a lower case format. 

Then we pseudo-coded this out:

//Loop through an entire array, and for each array item:
//If the data type is a string, then convert that array item to lower case and add the converted value to a new array.
//If the data type is not a string, then add the value to the new array.

After writing this out, we identified any tools that we may need to research to implement into our code. We utilized both MDN and W3Schools to understand the syntax and the associated return value. Some things we searched:

• "JavaScript determine data type"
• "JavaScript change string to lower case"
• "JavaScript add return value to array"

Using the information we found, we started adding in code snippets into our pseudo-code. This process led us to discover a few more items to consider. For example, we realized we needed to define a variable for the new empty array to be able to push the new values into, and we would also need to assign the return value of the lower case function to a variable as well.

//Define new array variable and assign it the value of an empty array.
var newArray = []
//
//Loop through an entire array, and for each array item:
for loop array.length
//
//If the data type is a string, 
typeof array[i] === 'string'
//
//then convert that array item to lower case
var lowerCase = array[i].toLowerCase()
//
//and add the converted value to a new array.
newArray.push(lowerCase])
//
//If the data type is not a string, then add the value to the new array.
else newArray.push(array[i])

Finally, we opened up a new Repl.it file and put the code all together:

function lowerCaseWords(array){
  var newArray = [];
  for (var i = 0; i < array.length; i++){
    if (typeof array[i] === 'string'){
      var lowerCase = array[i].toLowerCase();
      newArray.push(lowerCase);
    } else {
      newArray.push(array[i]);
    }
    console.log(newArray);
  }
}

To test that this was working as intended, we created an array to pass through the function. We made sure to include different data types to ensure that the function still worked as intended.

var colors = [1, 'Red', 'Green', 'Pink', 'Cornflower Blue', true];

lowerCaseWords(colors);
=> [ 1, 'red', 'green', 'pink', 'cornflower blue', true ]

Learnings

Although it was a bit redundant, it was helpful taking the time to talk and write out the problem and process multiple times. As we would discuss, we would think of something new to consider. When we initially read the problem we selected, we just thought we'd have to run toLowerCase() through the array and that would be it. However, through discussing we realized it would require conditionals.

We also thought we "had it" near the end of the 45 minutes, only to have the console log print:

[ 1 ]
[ 1, 'red' ]
[ 1, 'red', 'green' ]
[ 1, 'red', 'green', 'pink', 'cornflower blue' ]
[ 1, 'red', 'green', 'pink', 'cornflower blue' ]
[ 1, 'red', 'green', 'pink', 'cornflower blue', true ]

Our initial reaction was 🧐 until we took a moment to understand what it was printing. Every time the loop was running, it was console logging the array with the newly added item. This indicated that our console.log was incorrectly nested inside of the for loop, not outside of it. The received output didn't match what we had expected, which wasn't a concerning issue when we took the time to calmly interpret what we were seeing.

To correct this, we moved the console.log outside of the for loop and changed it from a console.log to a return statement. Final working code:

var colors = [1, 'Red', 'Green', 'Pink', 'Cornflower Blue', true];

function lowerCaseWords(array){
  var newArray = [];
  for (var i = 0; i < array.length; i++){
    if (typeof array[i] === 'string'){
      var lowerCase = array[i].toLowerCase();
      newArray.push(lowerCase);
    } else {
      newArray.push(array[i]);
    }
  }
  return newArray;
}

lowerCaseWords(colors);

=> [ 1, 'red', 'green', 'pink', 'cornflower blue', true ]

Overall, it was a very helpful exercise to work with a partner on solving as we were both still learning JavaScript. Breaking down problems to small pieces and talking through them without diving straight into coding is an important skill that I know we will both continue to use in our software development journey.