JavaScript: From Fundamentals to Functional JS, v2 .filter() Application Solution

Transcript from the ".filter() Application Solution" Lesson

[00:00:00]
>> So, we are going to filter a data. Here's our data structure. It's an array of objects. Each of these objects have three properties, a name, a present property, and an array of rope. Is this the right one? Yes, it is. Okay, in an array of rooms. Okay, Everyone found the data okay?

[00:00:32] It was able to copy and paste it easily. Cool, I'll just leave it open like that. All right, so we are going to use our filter function. What's our list? Video data, and what is our callback gonna be? So this is a suspect object. This is also the nice thing about using callbacks instead of loops is that we can really name what these items are.

[00:01:12] And it makes it super clear. Okay so what do we need to do?
>> Return suspect present, SuspectObject present in this case.
>> Present, cool, anyone else do it differently. Awesome. Any questions? All right, we're gonna walk through how this all works together with our filter function. Sound good?

[00:02:04] It gets a little funky when we have, functions passing to function. So I like to go over it, how it's run. So we can also find bugs this way. So the first things first, where does this code start? So, we're defining this here, nothing is run yet, we're just defining it.

[00:02:24] We're gonna talk about this a lot more in depth in our next slide, but I'm getting primed here. We have our data, nothing really happens except for we're like initializing this big data structure, and we are calling the filter function here. So the first argument is video data.

[00:02:44] So our array is the video data array and CB is this function here. Okay so for each item, so the very first item in our array is what? Here, let me put this here so that we can, this is not how it should run in order but I just want to.

[00:03:04] Actually, let me do this, put our video data here, Just so we can look at at the same time. Little word wrap here, okay Looks kind of ugly okay, so what we're gonna do. So our arrays, so the first item in our array is this Miss Scarlet object.

[00:03:48] So we're gonna call our callback with this object. So the item is that object. Which has a property present, which is true so Miss Scarlet was present at the mansion at the time of the murder. And then we have our storage object which we will push that item.

[00:04:11] So the storage item, the storage array now has the item. If I said type of what is this? Gonna print out.
>> A Boolean value of true.
>> Not quite but good guess. So let's retrace this. So this function is getting called with each item in the array.

[00:04:47] This is an array of objects. So the first item in the array is of type-
>> Object.
>> Object, exactly. So we're gonna have an array of objects returned at the end. Makes sense? Why aren't we using map here? Why don't we just do this?
>> You don't actually distort the data we want just a true or false and whether it passes the test.

[00:05:18]
>> That's true. But also map will always return a function of the same size. So if we wanna like actually filter and get new data then we want to get an array that shorter with only the things that pass through we need to use
>> So if we did use map just based on what you just said, would that mean you would return like an array of the same length and all of the non true ones or just have like the word false or something most likely.

[00:06:00]
>> So you would need to make sure that in this function instead of pushing you would need to. So if we rewrote this with map, we would need to, so we would say, if that's true, we're gonna return the item but if it's false, this still is going to return undefined.

[00:06:27] So you'll have an array you'll have an array of a bunch of undefined values where it doesn't meet that criteria.
>> Okay,
>> That makes sense. So the array will be of the same length that will have some values and then the rest of them Will just be these undefined this values and that's not gonna work, that's not the best solution.

[00:06:50] First of all it's taking out more space, second then we have to deal with those undefined values. Okay, great.
>> I have a question, when you call the callback, there are three parameters but only one is used in the actual callback in this case.
>> In this case?

[00:07:23]
>> Yes. So the other ones are just like it's overloaded in that case, or I'm in what case would you use those are the parameters.
>> It depends on the callback that you're using.
>> So if you need to go deeper into a list?
>> Or if you just needed to be aware of at what index the item was in the list.

[00:07:44] So you're passing the index and also if you ever need to reference the original data structure for any reason. It just keeps it flexible and for the most part, I mean, it's not a huge cost to do that, especially if you're passing objects. Again, we're just passing references to it.

[00:08:03] We're not passing the whole object around. So, Great. So I think we should take a 5 minute break, and I have prompt for you guys to ask each other during your break. Since Minnesotans are shy I feel like I need to give you guys prompts. Your guys' words not mine.

[00:08:29] The prompt is, what's the most important thing to know about JavaScript in your opinion. You have to be an expert in your expert opinion just in your what seems really important kind of opinion, loosely held. Ready, set, go.
>> Before we get to that. Just a question online chat room about your code, the F bock, having it on one line without the curly braces, people were just wondering about that.

[00:09:09]
>> Sure, it's okay. We don't need to put curly brackets because it's on the same line. But of course, you can always put them if it makes you feel uncomfortable and that's what I tend to do. I tend to just like put curly brackets everywhere, cuz it just makes me feel like a nice secure blanket of curly brackets and it doesn't do anything confusing or weird, especially when we get into like, arrow functions and stuff like that.

[00:09:36] I just feel just so much.
>> Cuz if you it's not really about one line, if you have two statements on one line after the if statement, I would like only run the first one, right? It's not really about lines, it's about statements. So if there's one statement on one line, then it's fine but anyways, I can get you into trouble.

[00:10:00]
>> Yeah,
>> Like you said with arrow functions and stuff like that where it's unclear,
>> Yeah
>> Or the semicolon would be inserted.
>> Yeah, I recommend to not do this, but I was just showing you as an example. You'll notice that when I read it the first time I'll write it the longer more a longer form way and that's tends to be the way that I actually code is more long form.