Loading
Current section: 5. Array Methods 5 exercises
solution

Filter

Transcript

00:00 Alright. Let's talk all about filtering. So we've got these products, laptop, toaster, headphones, blender, and monitor, and we're going to filter them all by their category. We want only the electronics. So let's get our electronics.

00:13 That's gonna be products filter. Filter the product. So this is an array function or it's any function. That's what the filter accepts is a function just like map and what you return from it can be either truthy or falsy. And if it's truthy, then that will be included in the resulting array.

00:30 If it's falsy, that means that item will be excluded. So for every item, we're gonna, decide whether we should include it or not. So product category equals electronics, then it should be in our leftover electronics array. Okay. Great.

00:44 So let's go ahead and, console log our electronics. Save that. There they are. We've got laptop, which is electronics, headphones, monitor. Great.

00:54 That's exactly what we wanted. And then let's grab the items that are less than a $100. Alright. So product price is less than 100. We're gonna filter, those.

01:05 That's the ones that we are gonna say are affordable, relative to the others I suppose. So we got our toaster, and our blender. Alright. Sweet. Electronics are kind of expensive.

01:16 And then we're gonna filter to those that are in stock. And so in stock is a boolean itself. So all you have to do is, have this return and this is an implicit return, it's an arrow function. So we just have it return the in stock, boolean and that determines whether or not, it's available. So let's, show that Whether that's in stock.

01:38 There we go. We've got our in stock right here and the cool thing about this is you can invert it just by adding an exclamation point. Now these are the things that are not available, not in stock. So, whatever you return it just has to be truthy or falsy and that's gonna determine what ends up in that resulting array. The source array has one, two, three, four, five items.

02:01 The resulting array here on the affordable is just two items. So we're just taking that and shrinking it down. We're not doing any transformations. We're not saying, okay, well only get me the category or whatever. We're getting the full array or or the full object of each one of these.

02:15 There's a full value at each one of these. We're just filtering out which values end up in the final array. Okay. Great. And then we can actually chain things together.

02:26 So, we can say, filter to here let's save that and format it. There we go. So filter to things that are in stock where the category is electronics and the price is less than $500 and then map it to product dot name. This is where the power comes in, where you can, if you squint, you might be able to, like, see where these expressions are going. So here first we say products and then we say, hey, products filter.

02:54 Take take that expression and call this expression on it, call this function. Okay? And then when what that returns is gonna be an array. We're going to then call this on that resulting array. And if it's helpful here, let's first log this, to see that.

03:08 Okay. So here's the in stock electronics under $50 Okay. That's the monitor. So, let's do it this. We're gonna just to make sure that this is straightforward and and that you're following what's going on.

03:22 So here's the, in stock, or actually, you know what? Let's yeah. In stock electronics under $500. We're gonna paste that, And then we're gonna say the name of in stock electronics under $500. And we'll get rid of this.

03:41 And we'll say Whoops. This has gotta be in stock. There we go. Okay. So that's gonna result in the same thing once we export.

03:50 There we go. K. So results in the same thing. It's still a monitor. We're still just taking the, the name of the in stock electronics under $500.

03:59 But we split this up so that we have a filter and that filter is going to handle, filtering out all the things that don't match what we want and then we're gonna get a new array here. And then we take that array and map over it. Well, you can do this more efficiently or and not necessarily more efficiently, but without having extra variable names by just chaining these on, continuing that expression. And so that's how we can end up with this situation where we simply just map on top of what has been filtered. And you can go on and on.

04:30 Filter, filter and then map, and then filter and map, and like as many times as you want to because it's always returning an array and you just keep on calling things on it, which is pretty cool. And in fact, you can you could do even further than that. You could say, okay, then give me the length of that. And then I want this too fixed and then I want this too string, and then I want this, to match and then, like, you just keep on going with whatever. So at this point, that turns this array into a number and then we make that number a string and then we make that string a string again, I guess, and and it just continues on.

05:04 Occasionally, it's pretty confusing to have all this chaining going on and so having intermediate variable names that you can give a proper name to can be helpful. But I use filter and map in combination like this a lot And I expect that you probably will as well. In fact, sometimes I use this, as a mechanism for, getting rid well, do I really wanna go that far into it? I I guess, So here's here's another way that you could do this, that might not wanna, do it this way. But, we can, actually say map this, and if it doesn't match that, then it's we're gonna say map product name, or null, and then we can say filter, where the name is not equal to null, and we get the same result.

05:57 So you do you can actually do the map first and then you can filter out. And, a fun trick about this is actually you can pass boolean in here and anything that's falsy in the resulting array right here will actually just get filtered out. So I actually I do this a lot. I'll just map map map to whatever I want and oh, this doesn't match what I want so I'll just return null and then I'll tack on a dot filter boolean at the end and that will get rid of all falsy values from, that resulting mapped array. So in this particular case, it's probably easy to filter first and then map.

06:34 It certainly looks a lot nicer. But, yeah. Occasionally, you'll find situations where it's easier to filter after the fact. Yeah. Filter and map together.

06:45 Big fan. Big fan. Love that. Hope you enjoyed that one. We'll see you in the next.