map & filter

[00:00:00]
>> 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:04:41]
Another useful trick, cuz we're learning some new skills here, another useful trick, especially if we're doing stringy stuff like this, are what are called string template literals. So if you remember way back a million years ago when we talked about different strings in JavaScript, we said that strings can be surrounded by three different types of punctuation.

[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.
>> Double quotes, we could also do single quotes, and we can also do backticks. So all of these, and you'll see JavaScript's default is double quotes.

[00:05:33]
So when it's printing out or kind of evaluating, these are all showing me double quotes around them, but they're all the same thing to JavaScript. But what's fun about the backticks is that the backticks actually allow us to insert, or fancy word, interpolate, different variables or other values inside of a string.

[00:05:57]
So for example, let's say I wanna say the sum of 1 and 2 is, I can use a $ sign and then some curly braces. And now within these curly braces, I can write JavaScript. So I can do, for example, 1+2 inside of those curly braces and JavaScript is going to evaluate that and then stick that value inside of the string.

[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.
>> Yes I did, okay, great, sorry. [LAUGH] Thanks. Yep, and JavaScript's like I don't know what that is.

[00:07:33]
Okay, now let's try spices2. It's the same, it looks the same as before when we use our concatenate operator. So this is a fun little trick, that you can sprinkle in, like a little spice on your JavaScript programs if you get sick of writing plus signs, plusing with spaces everywhere.

[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:36]
Which is probably a very common JavaScript program you might need to write, but you get the idea. And filtering is very useful when you're trying, when you're only interested in a subset of your data, let's say. Maybe you're getting some data from somewhere and whoever made that data cares about a lot of stuff, but you only care about a little bit of stuff.

[00:09:58]
You can filter out the elements in that array that you don't care about.