JavaScript Array Filter Method Practice in 5 Minutes

so you want to get better at javascript well arrays are an essential part of javascript so in this video let's look at the array filter method in just five minutes so first off if you're new to the channel welcome i do weekly videos on web development topics so if you're interested in more of that content make sure to subscribe so you can see it when it comes out all of that said let's dive into arrays all right so this is a series on javascript arrays and i've got a github repository here that inside this github repository has a readme on what we'll work on and then a worksheet that you will check out to be able to use below so inside of that worksheet you'll have some sample star wars character data that we're going to work with and we're going to walk through in these different videos mapreduce filter sort every sum and then maybe we'll add some no pun intended extra videos to this on the end if you're interested so let's go ahead and dive in all right so we have our sample data here in the repository that's checked out with our star wars characters each one having a property of name height mass eye color and gender so we're going to skip on down to the filter section and filter is probably pretty self-explanatory where you're going to take an array of items and then select out which ones you want based on some sort of filter so in this one we're starting with a mass greater than 100 so we'll do i don't know what we call these maybe greater 100 characters i don't feel like i have a great name for that but that's fine and we'll take our characters array and then we'll call filter and what filter will do is it will give you an uh a reference to each character and then you need to return whether or not that thing should be included in the resulting array so the condition here we want to check if the mass is greater than 100 so we'll return character dot mass greater than 100 so let's just test a log out here and log out the greater than 100 characters and we'll see that this is logging out just uh darth vader and if we look above darth vader is the only one with a mass above 100 so it looks to be working so let's let's just uh cover here exactly what is going on our filter takes a callback function so this arrow function in here and in that function you get a reference to each individual item which i've named character here and then what we want to do is return from that function a true or false whether or not this thing should be included now a cool thing is with these es6 arrow functions if we're doing just a one line return we can actually get rid of the sp specific return get rid of the semicolon and get rid of the last bracket and then i just kind of have almost a one liner even though it's a little bit long if i name this uh like car or something i think my formatting might put that on the same line but we'll leave it at character because i think that's a better variable name so this works the exact same but now we're actually able to do this filter on one line which is uh pretty nice so let's now do maybe shorter characters and same general idea we're going to take our characters we're going to call filter and for each character here we want to return actually implicit return so we don't have to say return but we will return whether or not the height is less than 200 so we'll say character dot height less than 200 so we've got that let's do a log here of shorter characters and let's save it and by the way i'm using nodemon so every time i save it reruns this so you can install the nodemon package with npm install g nodemon and be able to do what i'm doing so this should so show all the characters whose height is less than 200 so 188 150 172 all of those are shorter than 200 so that seems like it's working and then now we want to check out the male character so we'll say male characters equals and then again same idea we'll use our characters we'll call filter we'll pass it a callback function that gets a reference to each character and then we want to return whether or not the gender equals the string male so character dot gender triple equals in this case and we'll do uh the string male so let's do a log of the male characters and let's see if this works so we get anakin skywalker we get darth vader and we get luke skywalker so that seems to be working and the last one here to get all of the female characters we will do almost the exact same thing so characters dot filter and we'll get a reference to each character and we will return whether or not the character gender equals in this case female instead of male so that should give us kind of the opposite of what we just had so let's do uh female characters and we should see this will just have leia if we come all the way to the bottom here only leia is in this resulting array so that filter is working so we can do that based on numbers and mass and height and then in this case based on strings or any other condition that you can think of all right i hope you enjoyed that video and you feel like you're getting better at javascript arrays if you're interested in learning more about arrays make sure to check out one of the other videos in the playlist and if you have any additional questions or topics in javascript you'd like to see covered feel free to leave a comment below or check out the link to join the learn build teach discord server and you can ask and share there as well thanks again for watching the video and i'll catch you in the next one

Channel: James Q Quick

Views: 18,264

Rating: 4.9861112 out of 5

Keywords: array filter, javascript array filter, javascript array filter explained, javascript arrays, javascript array functions, javascript array methods, web development, vanilla js, js, learn javascript, learn javascript arrays, become a web developer, js arrays in 5 minutes, arrays explained, javascript tutorial for beginners, web development tutorial for beginners, javascript tutorial, web development 2021

Id: 3LOEGS4qcRM

Length: 5min 44sec (344 seconds)

Published: Mon Jan 04 2021