The end of week four had arrived and with it the task of solving a code challenge in a partner pair. With only 45 minutes to pick our challenge, research and plan our attack, and get through the challenge we decided to divide and conquer. First thing first, we picked the challenge below…
.
.
.
.
.
.
.
First String Appearance
Write a function that takes an Array of Booleans and Strings. This function should return a String - the first string that appears in the array that was passed in.
var variousThings = [
true, true, true, false,
true, true, 1, true,
true, false, true, false,
true, 'hello', false, true,
true, true, true, true,
false, false, 'world', true
];
findFirstString(variousThings);
=> 'hello'
If no Strings exist in the array, return the Boolean false.
Now I know what you're thinking, "why would you have both strings and booleans in your array weirdo!?" and to that I say... semantics? Anyways, after reading through the problem and pulling out the key points of what the code was aiming to do we headed off to our best friend Google. My partner started with creating a repl for us to tinker in and I began searching for ways to search through an array. As he typed out the array we would be eventually rummaging through, I came across a MDN page that focused on something called Array.prototype.find(). Remember, our task was to search through an array and find the first instance of a string, so this .find seemed like a great place to start.
Upon reading through the article we started formulating a way for us to translate the example given over to the array we created in our repl. This would end up being a bit more tricky than first thought… We started with creating a function called findFirstString and passing it an argument of our variousThings array.
.
.
.
Function getFirstString(variousThings) {
}
Inside this function we returned the value of the statement variousThings === ‘hello’; This ‘hello’ was the first instance of a string that we had in the array we created. Yes, I know this isn’t exactly what it was asking but it allowed us to better understand how this .find prototype would work as whole before moving forward. With this one function created we then created our .find prototype with a console.log which came out to be…
.
.
.
console.log(variousThings. find(findFirstString));
As you can see, we targeted our variousThings array and added the .find prototype to it while passing it the argument of our findFirstString function. When we ran our repl low and behold it returned the string of “hello” to us when we ran the getFirstString(variousThings) function. With that working it was time to refactor! Hurray...
We had created something that would find us the specific string we wanted in or array, but now we wanted to find the first string no matter what overly simple word it was. This is when things got a bit harry. We threw some ideas at our repl and nothing seemed to stick other than the many red gremlin errors popping up each time our code was ran. I was time to bring in the big guns, or rather my rock. With a quick slack message I asked my rock (the person in the mod ahead of me that I had been paired with, yes her name is also Megan, what a weird question to ask though) what we were missing. She quickly directed our attention to another MDN article called typeof. With time running down we read through this new operator and began discussing how we could integrate it into the code we had. With our faces lighting up we realized this was exactly what we needed to get this ball rolling again. You rock Rock Meg!
With this new information we were able to complete our getFirstString function with some much needed edits. First we created a new variable inside of getFirstString, calling it found and assigning it the value of variousThings array with the .find prototype with the argument of a new function, which we kept simple and called function(i). Stay with me, it does end up making sense. Is this new function we created an if statement that instantiated that if the typeof (Again, thanks rock meg!) index(i) was strictly equal to the property of "string" then the value of the index(i) would be returned. Now we were cooking with fire!!
Last thing needed was for us to return the the our found variable that had all the hard work nested in it and OH. MY. GOD. It worked!! Below is a link to our repl because if you're like me your a more visual learner and my ability to describe my process can also use some major refactoring. Hey, I'm new at all of this!
Repl: https://repl.it/repls/TautElasticExperiment
Hopefully my Taut Elastic Experiment helps fill in any gaps and our code helps you find all those pesky strings!
Top comments (1)
Thank you for sharing your experience with us, Megan. It's good that you got it working and I really like how you got there. 👏
But I also have to tell you that you didn't fulfill the whole mission. It does not return the Boolean false as mentioned above when there is no string inside the array. It returns undefined.
And this related to how you use the find function. Find works in this way that it returns the value (if found and depending on your comparison) or undefined (if not found). For finding a certain value you can pass in a function (aka callback). Inside this functon you can work with true (found the item. Stop and return it) and false (not the value I am looking for. Go on.) as return values. Means in your case: return typeof i === "string" would be enough. Next on your list: evaluating the return value for getFirstString => value or false. But I think you can handle it on your own. 👍