Transcript from the "map & filter" Lesson
>> So yes, before we go on and move on to our next project, I just want to wrap up and talk about a couple more aspects of iteration that we didn't need to complete our quiz project, but we might find very useful for our next project. So while we're on the topic of loops and of iterating over things, especially arrays, have a couple of handy dandy methods that are also very useful for, Looping over or processing, in a sense, every item in an array.
[00:00:36] And those are map and filter. And there's also another method, reduce, we're not gonna talk about here. But basically, what these methods do, and map and filter or kind of like go hand in hand, they allow us to process every item in the array by calling a certain function on it.
[00:00:54] So what filter's job is if I give filter an array of let's say ingredients, filter can help me filter out the ingredients I don't want from that array. And then what map does is it applies some kind of operation to everything in that array. So if I filter out the ingredients I don't, like let's say I wanna make a sandwich but I don't want any cucumbers in it and I don't want any onions in it.
[00:01:24] I can use filter to filter out the things I don't like, and then I can use map to do something to each of the things that are left. In this case, maybe I have a chop function. And so I can chop up all of my remaining ingredients. And then we're not gonna talk about reduce, but reduce is something that kind of combines everything in an array.
[00:01:46] So, that's how I could make all of my ingredients that I've chopped up into a sandwich, let's say. We get more into this in functional programming first steps, if you continue on to that. But for now, let's take a look at map and filter. So map takes in some array and some function that we give it, and it calls that function on each item in the array.
[00:02:10] And then what it does is instead of mutating the original array, it gives me a new array with the result of the function call on each item in the original array. So if we go back to our, remember our spices object with all of our Spice Girls? We have an array of objects and each object has some properties in it.
[00:02:36] I could use map to get a new array of just the nicknames of these spices by calling map on the spices array and passing in a function, and I've got my little arrow friend here. That takes in a spice, which I'm assigning a mini-variable to here, s, and returns a string that is the nickname property of that s object plus space Spice.
[00:03:12] So my new array, if I go back and I run this code, my nicknames array is going to be just strings that were computed from all of the object values in my spices array. And spices, we can double-check, has not changed, not mutated. So map is really useful when let's say you have a bunch of objects, a bunch of data, and you'll only really care about some subset of that data.
[00:03:48] Map can be a really useful way to pull out the data that you care about, for example. It could also carry out some other operation. It could do some calculation on each element in the array, or it could log something about each element in the array. So it's another way of kind of looping over arrays when we wanna call a particular function on each thing and maybe we wanna capture those values as a new array.
[00:04:17] So arrow functions are really useful. You can pass in a function, keyword, expression, or maybe some other function you've saved as a variable elsewhere in your program. You can pass in any kind of function to the map method, but arrow functions show up a lot. So you'll see this pattern very often, map and then an arrow function over an array.
[00:05:04] Can anybody help me remember? We have, let me clear here. We've been doing a lot of strings that look like surrounded by-
>> Double quotes.
[00:06:29] So I get the sum of 1 and 2 is 3. Pretty cool, pretty nifty little trick here. And so, what you see that pop up a lot in things like if I'm processing elements, let's say here, I was trying to d a string, trying to create a new string from all of these values.
[00:06:44] Earlier we did this with a plus, totally valid, totally valid, a plus and a space. I could also do this by creating a string template here with these backticks and then using my dollar sign curly braces to insert the Spice Girl nickname into that string template, as it were.
[00:07:06] So, for example, we could do, let spices 2 is spices.map, and then I pass in my templatey version. Oops, what did I do?
>> Space between the spices and 2.
[00:07:57] So okay, then the other one or the other friend of map that we said we have is filter, which is essentially going to, we're gonna give it a special type of function. The function that we give filter is a function that should return true or false, or you sometimes hear that called a predicate function.
[00:08:15] Like, for example, our is correct function was an example of this. And what filter is gonna do is it's gonna call that function on every item. And if the function returns true, it's going to include that item in the new array that it gives you. And if the function returns false, that item gets filtered out, it gets left out of the resulting array.
[00:08:39] So, for example, In my spices, I have a bunch of Spice Girls and two of them are named Mel. So if I want to get just the Mels, I can call spices.filter and then pass in a function that takes some spice girl s. Looks at the s.name value, which is gonna be a string.
[00:09:08] And then, if you remember, we have a special string method called includes, which can tell me if a string includes some other substring. So if the value of s.name includes the substring Mel, then we're going to include it in that new array. And so now if I ask for Mels, we can see it has two things in it, it has only the objects for the Spice Girls named Mel.
[00:09:58] You can filter out the elements in that array that you don't care about.