JavaScript ES6 filter() Method

JavaScript
Transcript

English (Auto-generated)

hi everyone. And in this code cast, I'm going to go over the es six filter methods. So atmos script, version six introduced map reduce and filter methods and these are pretty powerful features in javascript which will allow you to use and maneuver raised to a greater extent and basically more efficiently. Uh These methods allow you to take a functional programming approach and in a gist, functional programming is a programming paradigm with that avoids a changing state and mutating data. So programs are treated as mathematical functions whose execution will always produce the same identical and reliable results. So let's have a look at the E S X filter method and what is this doing? So ES six filter method acts on arrays. So it's an array method and basically it's going to filter an array based on some criteria and then return a new array with the filtered elements. So it's not going to mutate the original array. It is going to filter out the array and be based on whatever their filter criteria is and then return to you a new array with the filtered elements and a callback function is passed as an argument to the filter method and it's going to be executed on each array item and the callback function will will either return true or based on whether the ray elements pass some filter criteria or test. And if an element satisfies this filter criteria, then it's going to be included in the resultant array. And if no elements past this filter criteria or test, then basically an empty array is returned. And let's have a look at the syntax. So when we're learning these new methods and trying to make sense of them, we just want to step back and basically take a look at the syntax because the syntax gives you a lot of clues on how to use something in this case, how to use this method. So let me go ahead and type this out and then I will explain this. So let's take a look at the parameters of the filter method and starting with the callback function. So the first parameter is a function that is going to be executed for each item in the array and this is the call the callback function and the callback function intern can take three arguments and the first argument is the current item in the array. So the current item that is being processed in the array, this is what this argument or parameter refers to and this is a required parameter and then we have the index and this refers to the index of the current item that is being processed in the array and it is basically an optional cram So you need not pass this to the callback function and then we have the actual array on which the filter method will be used and this as well is an optional parameter. And then after that the second parameter of um are filtering method is this argument up here, which I'm referring to, this part here and this is the value to use as this while executing the callback and this is optional as well. Okay, so it's just the context of this and this refers to the uh this keyword. So anyways, let's take a look at a practical example of the filter method in action. Now when you're dealing with a p i S and you get returned with a large amount of Jason and basically an array of objects which might have maybe nested arrays inside them or other objects nested inside them. Instead of using multiple levels of for loops, filter method can greatly simplify your code and make it easier for you. So let's take a look at an example and out here I'm going to take a simple example which is going to be an array of um some nested objects. So I'm going to have the name property and let's say the name is, so let's not use a name, let's say game. Right? So the game is let's say animal crossing and then okay, let me see um Company is uh Nintendo. So I have an object. So let me actually just enclose this in an uh in these curly braces because I this is going to be an object. Right? So it's an array of objects and out here. What I can do is now again make another object. So you know, objects are enclosed within curly braces and basically we have name, uh, key value pairing or property value pairing, if you will, then let's say we have an object and this game is going to be super Mario, and then I have once again company and I'm pretty sure this is made by uh Nintendo. Okay, right. And then let's say we have another object and this game is going to be um this game is going to be let's say cesar, that's the name of the game and I hope I'm not getting the spelling wrong here. But anyways, and let's just say company, I don't know who made this, but let's just say pc. Right? So let's just say it's a pc game. So I'm just gonna write pc and then I will have another um game. And let's say it's um the seams four comma. And basically uh instead of company, I could have written console because now I don't remember who made the same size, but let's just say I'm going to write a play station here, right? So this can be company or console doesn't matter. And uh spelling mistake here. So then then you can go right and Kendall and Kendall, and then let's say we have one more, let's put in one more game out here, it's one harm. And let's say this is going to be um friend theft auto, and then comma and then I'm just gonna say company, all sort of uh and this can be, I'm just gonna say playstation as well. So basically we have each object has a key value pairing. So to two key value pairings. Right? And basically, now we're going to use the filter method on this game's array. Okay. And the game's array has a couple of objects nest within it, not nested, but within it. Now, let's get only pc games. Right? So for example, um I just seeing the array. Okay, I know there's only one pc game, but when we're dealing with large amounts of Jason, we might not be able to, you know, kind of filtered through everything. It's just not um efficient and basically takes a lot of time. So out here, I'm going to use the filter method on the game's array. And you know, that filter method is not going to mutate the original array, it returns a new array. So keeping that in mind, I am going to declare an array called let let's say only pc games. So using camel casing here. So let pc games equals two. And now, basically I want to use the filter method on the game's array. So therefore games dot filter. Right? So this is how we would usually just use um a method on something for example, to uppercase to lowercase method. Right? But the filter method is going to take as an argument. Okay, a callback function and this can be an anonymous callback function. You don't actually have to declare it within me. So I am going to use a callback function and let's structure this. So number one thing you want to do is structure everything, Make sure the syntax is correct. Before you start dealing with other things. And my callback function and I'm just going to call this program item Rich, as we discussed, refers to the current item being processed in the array because keep in mind that the callback function is going to execute for each item in an array. Right? So out here, you could have called this anything, I'm going to call it item because it kind of makes the most sense. In this case, you could have called it a B c D but usually you don't want to do that, right. You don't want to obscure your code. So out here, I am going to return. Right? So I'm going to return the item. Okay. Dot game only If it is strictly equal to P C. Right? So let's take a look at what is happening out here. The game's array is filtered for any objects whose game property is strictly equal to the string pc. And if any such object is found, which means the result is true, then that value is returned and assigned to the only pc games variable. So let's take a look at this, right? Um what I can do is basically console groups, console dot blog only pc games. And then control estes to save it and basically open up my browser, console. So I have this open up here. And then you see that this is basically returning empty. Let's see what's going on here. So if item a dot game is strictly equal to our pc and basically, Oh, okay, I see what I did here. So it's not item dot game. I'm looking for items dot company. Right. So basically the company here is pc and now if I control s and then go here, all should be good. And basically it's telling me yes, we found a game called caesar and the company is pc and the length of the array is one. Now, like we saw if something doesn't exist basically, if I did just, you know, if I did if item dot company is equal to something else and I'm just going to type something trivial. Just something then an empty array is returned and we can indeed verify this and we see that the array is empty, the length is zero, therefore only if the filter criteria is satisfied as it was in this case, then the filtered method is going to return a new array with the filtered item. So pretty useful to know, quite handy instead of doing uh kind of you can avoid for loops and you don't even have to use for each instead just use a filter which kind of simplifies things
81 Views 0 Likes 0 Comments

Do you dislike nested 'for' loops? Use filter() to filter information from arrays and JSON.

Comment
Leave a comment (supports markdown format)