Javascript Array Filter

welcome everyone today we'll be looking at the javascript array filter method here we have a an array of objects and already called avengers with six objects inside each of these objects are basically in one single avenger and they all have a name property a strength property and a can fly property so the first one here iron man basically that's his name he has a strength index of it's between 0 and 100 so his strength index is 71 and just basically a boolean property here can he fly so this one is set to true because he can't fly and the second captain america his strength index of 85. he can't fly so it's false and so basically that's just the array right here so we have a few challenges here where we will be using the array filter method to solve these challenges so the first challenge here is get all the avengers who are strong so basically that just means a strength index of greater than 80. so we just look at the strength index so this one is less than 80 so that would not be considered strong so if it's greater than 80 that would be considered strong so this one's strong strong strong and strong so basically what we want for this first challenge is a new array that looks something like this so it would have this one here like that um like this and then it would look at this one so we'll skip this one but it would include this one here because it does have a strength index of greater than 80. and then and then the same with the rest you get the idea so basically they have four properties because there's four of them that have a strength index of greater than 80. so that's what we want to use so we want to use the array filter method to you to solve this first challenge here so all the ones that are greater than 80. so the way we do that is we just do avengers dot filter filter just like that so what filter does is um it filters an array so this is a method in inside an array so you can only use this on arrays so what this does is it runs a function so it takes a function as an argument so it runs this function for every single element in the array and every time a value in the array returns true so this one's going to return true or false just like that and then for each rom each time it runs this function basically we get access to the current value in the array so it'll be the first one the second on the third one so that's what the avenger is right here so we either return true or false so we have access to the strength index because we have avenger right here so we can just do avenger dot strength is greater than 80 and then of course this is a boolean value that returns either true or false it gets evaluated right so we can just put we can just simply paste that right down here get rid of the comment and just like that avenger strength is greater than 80 and then again this is going to be the true or false and the way filter works is it runs this function for every time every single object in the array and when it returns true it actually includes this arm includes the value in the array that it returns so this doesn't modify anything here it's actually going to return a brand new array so we can store that in a variable called filtered array and set that equal to whatever this returns and we know this is going to return a new array and then again a return if this returns true this element is going to be included in this new array and if it returns false it's going to be basically filtered out hence the name filter so let's just see what this does so we're just going to do console.table filtered array instead of console.log because console.table makes it look really nice so we just do that and then we can see the new array so this filtered array right here includes four properties so one two three four and has captain america so notice it skipped iron man because iron man has a strength index of less than 80. so all the way down to 71 but we need um a strength index of greater than 80. so this passed the test here because avenger.strength is greater than 80. so captain america ate 85 so that would evaluate to true right so 85 is greater than 80. so that's why captain america is included in the new array right here with a strength index of 85 and then it will skip black widow and this one right is because it was 65 65 is actually less than 80. so this would be false so that's that would be filtered out and then when he goes to hulk he's included because it'll be true black panther 82 is greater than 80 of course true and then thor is true so that's why there's four here that are true so that's basically challenge number one okay so let's move on to challenge number two so i'm just gonna go ahead and delete this so we have a fresh start so challenge number two one says to get the avengers who can fly so basically we'll do the same exact thing again we're gonna have a new array so i'm just gonna call it filtered array and that's gonna be equal to avengers dot filter right and then again it's going to take in that special function that's it's going to run for each element each value right here so each object in this array so it's going to run six times and of course we get access to the singular um object so the singular name for avengers is just avenger so remember it has to return either true or false so i guess the challenge says get the avengers who can fly so they look at all have the property can fly so this is just a boolean values all we got to do is just return that so just return avengers dot can fly so this will basically return true or false and that's exactly what we need so we don't have to do if avenger can fly return true and then else return false so we can just simply make it shorter just say avenger can't fly just like that and this should work so let's test that out console.table filtered array and look at that it only returned iron man and thor because they're the only ones that have a property of can fly is equal to true so remember this function is going to run for every single element it's going to look at the first one true so that now it's going to include this in the filtered array and then this is false it's going to filter it out so it's not going to include it not going to include it not going to include it not going to include it and then they're going to include it so that's but there's only two of them so that's basically how we do this and then we'll just get rid of this comment so and then yeah of course we need to write this function here and we can actually shorten this to the es6 arrow function so let me just comment this part out and just rewrite this again so const filtered array equals avengers dot filter and this time instead of just printing this entire function here i'm just simply going to do an arrow function to make it even shorter so just like that arrow function like that and then um the first argument of course is avenger and then this is going to return because it's only one line of code here all i have to do is just say return avenger dot can fly just like that and that'll proceed that'll have the same exact result just like that so this function this um this right here is basically the same thing as writing the entire function like that with the function keyword and then the return keyword like that but we can just use the es6 shorthand error syntax just to make it a lot shorter so just like that filter the right equals avengers.filter and you don't even have to write this parentheses here to make it even shorter because there's only one parameter so just like that of course we get the same result and that's challenge number two okay let's move on to challenge number three so i'm just gonna go ahead and erase all this okay now we'll move on to challenge number three and challenge number three basically wants us to get all the avengers with names with at least five characters in length so all the pro all the avengers here have a name property and then iron man looks like has more than five characters so one two three four and the space of fours counts of five six seven eight so that's more than five characters in length so that would get included in the new array so all that looks like would get included in the new array except hulk and thor because there are less than five characters in length uh they're only four so they will get filtered out so let's just go ahead and get to it challenge number three so i'll just say const filtered array equals avengers filter and i'll just go ahead and just get right into the es6 form of the function instead of writing the entire function keyword and then the return keyword on multiple lines so i'll just say avenger because we get that first so that's the parameter and it's just simply going to return avenger dot name so we want to access the name property and since it's a string we can um we can tack on here dot length so what that length does is it returns the number of basically the length so door will return four so and then i remember return one two three four five six seven eight so eight and basically what we want to do is check if it's um at least five characters are length so it has to be greater than or equal to five right so that this is basically our boolean condition right so this is going to return either true or false so if it returns true it's going to get included in the filtered array it returns on false it's going to get filtered out it's not going to get included at all so so we can yeah we can see what this does so notice it's only just one line of code it's really simple and then i'll just make this like this so it's a little bit easier we can just see it on one line it's basically the same thing and then i'll just say console.table filtered array and let's see what that does so yeah so this is basically successful so challenge number three uh was this success so it looks like iron man returned iron man captain america black widow and black panther and this is correct because their names have characters greater than five in length so remember this is way greater than five so all of them are included except again hulk and thor because hulk is a length four and thor is also length four so this would actually so when this function here runs it would fail the test it would return false so we get filtered out and the only ones that will get included are the ones that um return true and all of these return true so that's basically array filtered in a nutshell so you did three challenges when then use the es6 shorthand to filter out the arrays and remember this only works for um arrays so it's a method inside native to array and remember the key thing to remember it returns a brand new array so always store that a new variable and try to use the es6 shorthand and always remember that this function takes in the first um the first one so object it runs for every single object inside the array so one at a time and then it has to return true or false so that's really important so that's basically array filter in a nutshell thanks again for watching like and subscribe [Music] [Music] you

Channel: Alpha Javascript

Views: 313

Keywords: javascript array filter, javascript filter, javascript array methods, array filter javascript, javascript object filter, filter method javascript, javascript filter method, array filter, js array filter, javascript array, filter array javascript, array method

Id: EZPggZYCBI8

Length: 11min 44sec (704 seconds)

Published: Tue Aug 17 2021