This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the ".filter() Solution" Lesson
[00:00:00]
>> So, we just spend some time to implementing our own version of filter. And let's go to the solution. All right, so, we are going to write a filter that's similar to one in low dash or underscore. So, I'm gonna set up my underscorely, also set up my syntax highlighting.
[00:00:23] All right, so, let me just set this up for us. Filter = function, right? And we have an array, and then we have the callback function here. All right, so, what's the first thing we need to do? We're gonna do some pseudo code, and then I'll write out the code like we did yesterday.
[00:00:50] What's something that needs to be done?
>> Loop through each item and the array.
>> Cool, we need to loop through the array, okay.
>> Declare the array to return maybe.
>> Yeah, so, we need to create a new array.
>> Check if the callback returns true.
>> Yeah, where do we do that?
[00:01:11]
>> Inside the loop.
>> Exactly.
>> Okay, anything else?
>> If it does return true, you push the item into the array.
>> All right, and if it's false?
>> Nothing.
>> Nothing, we move on with our lives, awesome. So, let's call this storage. And we'll initialize that as an empty array.
[00:01:45] So, we can loop through our array. So, we can do our for, let's get fancy.
>> Why are you const-ing the storage there?
>> I like to const. I constant if it's a non-primitive value, but I don't have really strong opinions about when you should use const versus let in var and stuff like that.
[00:02:30] I like to use const for sure on functions because you never wanna reassign a function but no one ever does that. So, it's how important is it? I'm not one of those people who are arguing for something or the other, I'm more of a practical, get it done kind of person.
[00:02:50] But we do need to do let here because it's gonna be reassigned and it's a primitive value cuz it's a number so that's the only thing that really matters in this. And probably if you're gonna write library code, you don't want it to be reassigned. So, you wanna take a lot of measures to prevent people from doing that.
[00:03:08] Like more than probably just assigning it to const. Okay, so, we're looping through, we need to check if the callback equals true like this.
>> To pass the current element?
>> And pass that current element. So, that's array at i, why are we using brackets again here?
>> It's a variable.
[00:03:32]
>> Cuz i is a variable. All right. Now what?
>> Storage.push. And then callback array li. Sorry, no, you don't want to call back, you want just-
>> Yeah, you wanna just pass the array at i. We wanna save the values that return true, not the call back.
[00:04:00] With the item because you then you're just gonna get an array of true every time, and that wouldn't be as helpful for what we wanna do. All right, Okay. And we're gonna return our array. Return array. How are we doing?
>> Return storage.
>> Thank you. All right.
[00:04:33]
>> Do we have to add a case in if the array is an object?
>> No, we don't need to. But, maybe think about how you might do that but for right now this all gets through, cool. Any questions?
>> Yeah, on line nine, I guess this depends on how you write your callback.
[00:04:58] But I didn't pass the second and third arguments, the i in the array again. So, is that necessary in some way or are we getting something else from that?
>> Well, I do that just to make it as generic as possible because we don't know what the callback needs.
[00:05:13] So, we don't know cuz a callback could be doing anything. And it might need the entire list, it might need the index and it may need the value, so-
>> Cool.
>> Yeah, cool. Any questions?
>> In the equation, the same line, line nine. The i would be relating to what part of the callback?
[00:05:44] Just the i by itself.
>> This part right here?
>> Yeah.
>> So, the question is, what does this i relate to?
>> Yeah.
>> Where are we defining i?
>> On line seven?
>> Yeah, so, i starts at zero and then every loop, it's gonna increment by one.
[00:06:04] So, that's what it's related to. And if we change this here, it would go backwards if we had the right conditions. So, that's how you define how the value changes every time. So, you can really do whatever you want there. You can add two if you want. You can double it every time.
[00:06:26] But typically, we're just gonna increment by one or we're gonna use arrays. Cool, good question, anyone write this with a each? Yeah, all right, let's redo it with each.
>> Online there's a question. Just in the if cb.
>> No you don't.
>> The e equal true.
>> You don't necessarily need to do that.
[00:06:56] I like to be very explicit. But if you know for sure that this callback is gonna return true, or something truthy, it will really force it into some Boolean if block, but I just put it there to be clear for everyone. Good question though. All right, so, let's do it with each and we're gonna replace our loop.
[00:07:19] Remember, whenever we have a loop, we can probably use each or map, but definitely each. So, Oops, I'm doing something crazy. So, what is the thing that we wanna pass the list? You guys remember?
>> The array.
>> The array, and then what is our callback function? So, we have our value, index and list.
[00:07:57] So, what do we wanna do? You wanna check if the callback is true, right? So, really we can just pop this in here and change it a little bit. So if the callback, Is true storage.push. You can call it val, sometimes I like to call this item. Cuz it's like an item in an array and we'll get rid of this guy.
[00:08:42] Cool. And then if you wanna keep, Making it smaller, we can remove that. We wanna keep making it smaller, we can just put this all on one line with no brackets. There's probably more ways we can shrink this, but we'll stop there.