Find(),Filter(),Map()

Mark Quayle
4 min readJun 20, 2021

I had a slight bit of trouble with these labs as a whole although much less with find and filter than I ended up having with map. I’m going to try and force these to memory by over viewing exactly what each one of them is, and by what I had to do to achieve success on the labs.

The Find Method is the easiest of the three to use, but the ease also means it is the least dynamic. Find will only return the very first result that achieves the callback functions goal. It is looking for a simple true/false answer and once it finds a single true, it returns that true, and then exits out. The lab wanted to search through an array filled with objects looking for a single “W” value.

The basic find syntax is array.find(the function you are using) Here is the way I solved this:

function superbowlWin(array){

->const win = array.find(({result}) => result === ‘W’);

->if (win){

->->return win.year;

}

->else{

->->return undefined

}

}

So it is taking an array as the argument for the superBowlWin function. Then it is applying find to that array and searching for a variable to strongly equal “W”, I used the name result for this variable but I believe any variable name would suffice. Then I used a if statement to check if it was true or false so it would only return the year of the win if it found a win and return undefined otherwise.

The Filter Method words similarly to the find method, except this will return all results of the search. If you are going into an array and want to find everything that starts with the letter M this would be a good starting point to try.

This lab wanted to create three functions that depended on the filter method.

The first wanted to be able to find specific names inside an array and return the matching names. This function was to be case insensitive so imputing bob, bOb, and BOB would have the same search results:

function findMatching(array, string){

->const result = array.filter(word => word.toUpperCase() === -string.toUpperCase())

->->return result;

}

So this function takes two arguments the initial array that will be searched and the string for what exactly is being searched for. The filter method then is searching for a word (our used parameter) inside the array to match the string that was input. .toUpperCase() is a function for strings that will make the entire string uppercase. I used this to create case insensitivity so that both the input string and the original string inside the array would match up case.

The second function was supposed to accept the same arguments but the string won’t be a full name but instead just the first few letters:

function fuzzyMatch(array, string){

->const result = array.filter(word => word.slice(0,2)===string.slice(0,2))

->return result;

}

So the overall look is very similar as it doesn’t need to do too much different. The filter method is searching the array for the beginning of a word to match the beginning of the input string. The slice function in this case starts at the beginning of both the word and the string (the 0th index) and ends at the 2nd index non inclusive. I probably didn’t need to slice the string but this way it works no matter how many extra letters are input as the string.

The third function inserted an array that had objects of both a name and a hometown. It wanted to accept a name and return the name and hometown of the searched name:

function matchName(array,string){

->const result = array.filter(({name}) => name === string);

->->return result;

}

It is excepting the same arguments but the filter this time is searching for an object including name and then checking that name against the input string.

The Map Method takes in an array and then manipulates in it some way and returns a new array.

This lab was simple in its instructions but difficult in its complexity. The lab just took in an array of strings and wanted each word inside each string to have it’s first letter capitalized. IE ‘what does the this keyword mean?’ becomes ‘What Does The This Keyword Mean?’:

function capitalize(str) {

->return str.charAt(0).toUpperCase() + str.slice(1);

}

This first function will do the task at hand but only to individual strings. It cannot be applied to an entire function. Learning how to do this was quite easy, the difficult part of this lab was figuring out how to do this to every single string inside the array.

function titleCased() {

->let result = []

.>for(let i=0; i<10; i++){

->->let taco = tutorials[i].split(‘ ‘).map(capitalize).join(‘ ‘)

->->result.push(taco)

}

return result

}

This function didn’t need to take in an argument as the array tutorials was provided on the same page and wasn’t going to be entered as an argument for this test. So this function starts with an empty array. The second part is a for loop that loops through every index of tutorials isolating the strings so that my capitalize function will work on them. The map method takes my capitalize function and applies it. It takes the taco variable and adds it to the result array for each loop, resulting in the goal array of strings with each first letter capitalized.

--

--

Mark Quayle

This blog will just be about programming. Technical, research, thoughts, whatever may come to mind.