Transcript

          Okay then.

So we've already seen a few different ways that we can iterate an array using loops.

And we've also seen the for each method which we can use in arrays to fire a callback function for each

item in that array.

So these are a few nice ways that we already have to cycle through arrays and do something with them.

But there's also several other methods that we can use on arrays as well.

And each of those methods does something different.

So in this chapter, I'm going to show you five array methods in total, and there are ways that we

can cycle through arrays and do something.

And the first one I'm going to show you is the filter method.

Now, before we start, notice I've got an index.html page right here and it's linked up to sandbox

dot JS.

Now over here I have an array called scores with different scores.

So then the array method filter.

When would I use this?

Well, I might use it if I retrieve some data from a database, for example, some scores.

And then this array right here, I want to filter out certain items from that array based on a certain

condition.

So for example, I might want to filter out all of the scores that are not at least 20 or that are 20

and over.

So I could do that using the filter method.

So what the filter method does is iterate an array and it performs a check on each item in that array

inside a callback function.

So this callback function fires for each item in the array, performs some kind of check, and if that

check passes, then it's going to keep that item inside the filtered array.

If it doesn't pass, then it's going to filter out.

It's going to remove it from the array.

So let's do a quick example.

What I'm going to do is take the scores array that we already have and use the dot filter method.

Now, I did say that this takes a callback function as an argument, so let's place that in here.

First of all, this is an arrow function and then inside here we have to return either true or false.

And if we return true, let me just correct the spelling there.

If we return true, then for that item that we're currently iterating, we're going to keep that in

the array.

If we return false, then we're not going to keep that in the array and we're going to filter it out.

So let me just return true here and explain what's going on.

So we're taking the scores array and using the filter method, which fires a callback function for each

item inside the array.

So currently when we start, it's going to be this item and what we're doing inside is returning true.

So that says, okay, well keep this item in the array then it fires the callback function for the next

item.

Again, we return true in here, so it keeps that item in the array.

Then the third we return.

True.

So it keeps the item and so forth.

And since we're returning true in every case here, we're not actually filtering anything out of the

array because everything is going to stay in the array because when we return.

True, it keeps that item in the array.

Now, if I was to change this to false, it would cycle through each item, perform the callback function

for each item, and in each case return false.

And because we return false, then it's going to filter out each item.

So we'll be left with an empty array.

So we don't really want to do this return true or false like this, we want to return some kind of condition

that is going to evaluate to either true or false.

So, for example, if I want to filter out any score which is not over 20, then what I do is return

score over 20.

And obviously we need to take that score as a parameter here.

Now this refers to the individual item each time we fire the callback function.

So we take that score and we say, Is it over 20?

Now if score is ten, is ten over 20, well, this is going to evaluate to false.

And since we return false, therefore we filter this item out, then we fire the callback function for

the next item and we have 30.

So now score is 30, 30 over 20.

Well, that's true.

So since it's true, we return true.

We keep that item in the array.

So what we're doing here is filtering out any number inside here or any score that is not over 20.

And then we should be left with just an array of scores which are over 20.

Now, this method right here, this filter method, it's non-destructive.

And by that I mean it doesn't actually alter the original array.

So if I come down here and say console dot log and then try to log out the scores array, save it,

I'm going to preview over here.

I'm going to need to update my URLs to chapter nine.

And if we see over here this array, it doesn't have any numbers filtered out of it because it's non-destructive.

This doesn't change the actual array, but we're trying to filter numbers out of it.

So how does this work?

Well, instead what we do is we.

Door this in a variable.

So I'll say const and then say filtered scores.

You can call this what you want and set that equal to this method.

So what this does is now return a new array based on this criteria, based on what's kept in and what's

left out.

So if we save this now or in fact, we need to log out filtered scores here, save it, and now we should

see that filtered array.

So anything that's not over 20 is now not inside this array.

So that's the basics of it.

But let's try something a bit more complex now.

So what I'm going to do is comment out this dude and this one and come down underneath.

Now what I'm going to do is create some data called users.

I'm copying this from my GitHub repo because I don't want to type it out from scratch.

And all this is, is an array and each item in the array is an object.

Each object has got a name property and a premium property.

So this premium property is going to be either true or false.

And it basically describes whether the user is a premium user or a premium member.

So for example, Sean is a premium user because premium is set to true.

Yoshi isn't, Mario isn't, but Chun-li is.

So what I'd like to do now is use the filter method to get an array of users who are premium users.

So I want to be left with ultimately Sean and Chun-li.

But just imagine this was a huge array of hundreds of different users and we don't know which ones are

true or false.

We could use the same filter method that we're about to use to do something like this.

So this is a simplified version of it, but I'm going to say const and then premium users because we're

storing this in a new constant or a new variable because it's non-destructive, it's not going to change

this directly.

Then we take the users and we use the filter method.

Inside the filter method, we have a callback function.

And inside here, this is where we return either true or false.

Now then we want to take the individual user each time around.

Now we're only going to take one parameter, so let's delete the parentheses.

And we could have done that up here, by the way, but we didn't.

So let's do that again.

And inside here we want to return either true or false.

Now we can return this property directly.

Each time around we can look on the individual user and the premium property because that is either

true or false.

So if this is true, it's going to keep that user in the array.

If it's false, it's going to filter them out.

So now if I come down here and say console dot log and then premium oops, premium users and save this,

then we should see an updated array with just two in it.

And it's just Sean and Chun-li because they have the premium flag set to true.

Awesome.

Now just one thing because we're just using a single return statement here and we did up here.

We're going to shorten this into a single line.

We can take away the curly braces and we can take away the return keyword and then we're just left with

this.

So that is a nice, concise way to filter something out of an array and then get a new array based on

that.