16.8: Array Functions: filter() - Topics of JavaScript/ES6

all right I'm back for another higher-order function with JavaScript arrays video and in this video I will talk about filter filters actually to be honest it might be my favorite one of these it's just it's lovely so let's look at what let's so filter what does the word filter means it's it's called filter for a reason just like you might filter your water and filter out all the stuff you don't want if you have an array that has some grime and stuff in it you could filter it out so how do you do that it's a higher order function so what that means is it expects as an argument some function and what that function is it's a function that receives as an argument itself an element of the array and based on that element it should return true or false and I always forget this I think it returns true if you want to keep it and false if you don't want to keep it so even though it's a filter you're thinking true I would have filter it out I think it's true I want to keep it we'll have to try and look up and documentation ok and we're gonna do the same thing so this is where are we last left off with this reduce stuff she's still here after that thank you and so what I'm going to do is I'm going to keep this same little silly array and I'm gonna say I'm gonna write a function and I'm gonna say is you know interesting let's hmm let's call this function is even so what this function is going to do is it's going to take a number and it will return true if it's an even number or false if it's an odd number so it's going to if num and how do I do this I can use the modulus operator the modulus operator see the coding train video from go on Levin about modulus is an operator that gives you the remainder of division so if you divide something by two and get a remainder of zero it's an even number so if num modulus two equals zero then I want to return true otherwise I want to return false now I always do this because this is the kind of person I I will write it in seven lines of code to make it say exactly what doing even if it can be done in one line of code but this is this is a moment where I think it's worth today these videos are a little bit about reducing the amount of typing it's worth saying that I don't need to say if this is true return true if it's true just return the fact that it's true so this evaluates a true or false I'm gonna just return that so I can do this now I should be able to say what's I should be able to say Vale's dot reduce is even so the question is is my array going to have only left in it the even numbers or the odd numbers we could look it up in the documentation I could speculate but we could also just try it now I'm pretty oh this didn't say reduce this should say filter of course I should be filtering based on this function hello and I'm pretty sure let's just double check I'm pretty sure that this is the case where it creates a new array and returns back like I like we saw with the map function so if I save this here and I hit refresh we're say okay so that's the original array so this is not working yet I want to say Val's equals the new erase I'm going to overwrite that variable with the new array that's been filtered and I'm gonna hit refresh and there we only have the even ones left so we have the even ones left because this returned true so if it returns true keep the value if it returns false don't keep the value and by the way what I'm gonna do with this later in like a particle system example is I have an array of all these particle objects I could just say filter out all the ones that are off the screen or filter all the ones out that alpha has faded out to zero so that's why this filter can become really really useful so let's now shorten this using es6 syntax one thing I might want to do is just use this as X right change this to X now I'm gonna get rid of function I'm gonna get rid of the name I'm gonna put the arrow syntax in I'm gonna forget about this and I'm gonna get rid of the return because it's assumed so basically this is what I can do right this is basically I can now write that I do that really quickly because I'm kind of assuming you've watched my previous videos where I stay through that more slowly but basically I can say hey filter every value X based on the weather X modulus two equals zero so this should give me exactly the same result again this is the thing this is why I hesitate this is so unlike me I don't I I would write this in like ten but there's there's a wonder and beauty to this because even though I feel like this is cryptic and a little harder to follow there is a moment I think after you get used to this arrow syntax and write a lot of these functions and I'm the comments are going on that I'm going to look at in a second that you start to get used to this and this this becomes a bit more intuitive and it actually can make the code more readable look there we go it worked now I can say let's just filter it out for the odd ones equals one now I have the odd ones I could say not this and that would be that's like not the odd ones there's also the even ones and we could see there we go so wonderful I'm gonna take a look at the chat and see that I got some extra notes in there yep okay so um alka in the chat points out that you can filter by truthy and falsy values not just explicitly true or false what does that mean in other words I could filter out let's say I had an array of objects and a few of them were undefined you know we're empty I could filter out any spots where something's undefined so many things in JavaScript can be sort of like thought of as false or true based on its its value like if an object exists it's true if it's undefined its false so I could say so this would say like hey I have an array with stuff and over on this actually oh okay so I could actually just do this right that's what that's what alka is telling me so I could check like Oh filter out just keep everything that's not undefined right so this if I did this it would give me five four two one because I would filter out the undefined but undefined is like a falsie value so I could just filter out the items that like kind of turn into false things and actually this is going to give me yeah right so worked as well and I could say not X then I have autorai with just undefined okay so I think we've seen I think this has been good I think we've seen filtered filter filter filter the function filter do you have any questions we're not actually in the same room at the same time because I'm recording a video there is a live chat going on let me check if there's any questions two wonderful tips that just came in from the chat that I would love to show this is great having a live chat wide for these videos so let's say I wanted to do that eat that even thing again where I'm keeping only the even values I had it like this X modulus 2 equals 0 that's the even ones well that's silly X modulus 2 evaluates always to 0 or 1 1 being true 0 being false in a sort of truth a falsie way so I could have actually done this and that's gonna keep the odd ones and if I were to say not I think I'm gonna need parentheses yeah I'm gonna need parentheses around this and now I'm gonna get the even ones so that's lovely then there's a lot of times when you're working with strings that's that I've had this problem actually a ton so let's say I have a this is gonna be useful let's say I have a string it was a dark and stormy night and what I'm doing is I'm saying let words equal s dot split and I'm gonna use a regular well I'm just gonna say split by space and then I'm gonna say console dot log words so you can see ah it was a dark and stormy night now things could happen like what if I had two spaces here by accident and I hit refresh look at that because I had two spaces I got an empty string by accident now the truth of the matter is if you watch my videos about regular expressions I can be more thoughtful about the split what I pass into split and use a regular expression for a particular pattern to match but even so like live item you might not know I can a break expression is a way of creating a pattern and so what I could do is say anything that's not a word character and what I wanted to see here is whenever I do this I always get things extra empty strings this happened even here so this is something that I do in one of my previous videos this is basically a secret code for saying split by anything that's not a through Z or 0 through 9 and that has to do with meta characters and regular expressions but actually I've always having this problem where I get these extra empty strings so I could always just have a filter now filter by s s dot length by s dot length so look at this this should say cuz it's true or false see if this string has a not s dot length right if the string is the length of 0 I should filter it out so now let's do this we can see oh no no that didn't work not maybe I shouldn't use s here let's use X filter X not X dot length oh no X dot length I want X dot length ah the opposite that was right so I can use s here I just was using s in too many places because it was the string so word word dot length right so I want to use the length to evaluate the word whether it qualifies or not I could of course say like greater than 3 right if I want to just have only the 3 letter words this will get rid of it and a now you can see I only have darkstorm it got rid of was 2 because it's not greater than or equals 2 so you can see how this filter you can chain these kind of again I've got these really long lines of code which is very unlike me but you can see I can chain this stuff so I take this string I split it up so I have all the words but you know what I actually only want the words that are three or more characters and instead of having to write a loop and an if statement and you splice how I always do it this is a nice really one line of code kind of way of using colter oh I'm happy about that okay so thanks for watching this video I hope this was helpful to you about filter and I will come back in one more video I might as well I believe I've covered sorts somewhere but maybe I'll make a standalone video that's just about the sort function and that'll be the last one that I'll do in terms of these higher-order array functions thank you [Music]

Channel: The Coding Train

Views: 94,876

Rating: 4.9401293 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, reduce es6, higher order functions javascript, es6 tutorial, es6 tutorial for beginners, es6 javascript, filter es6, filter, filter javascript, filter javascript array, javascript filter function, map reduce filter javascript

Id: qmnH5MT_luk

Length: 11min 11sec (671 seconds)

Published: Thu Feb 22 2018