All language subtitles for 10. The Array filter Method

So next up is the filter method.

And as the name says, we can use the filter method in order to filter out some elements of the array

based on a condition.

So let's say that we want to create an array which only has books that have more than 500 pages.

So let's say.

Long books.

And then books dot filter.

Give it some more space right here and now.

Here.

The idea is the same thing as before.

So again, we pass in a callback function which should return something.

So again, each element of the array is a book.

And now here, instead of returning the value that we want in a new array, we need to return a condition

which will either be true or false.

And if the result of that condition is true, then the current element will go into the filtered array.

But if it's false, then it will get filtered out, basically.

So let's see that in action.

And let's say book dot pages greater than 500 and that's already it.

So.

Let's put the long books here.

Close down here.

So long books should be this one.

And we see immediately that the array only has the length of three.

Now.

So this one has 1216 pages, this one 658, and then here also more than 500.

So it worked.

And so let's now go again over this to see what actually happened.

So just like in a map method, this function here, this callback will be called for each elements of

the array.

So let's then go through the array one by one.

So this is the first element.

And so here then this condition will be executed.

So book dot pages greater than 500 and indeed it is.

And so here, this function, this entire callback here will return.

True.

And so if it is true, then that element goes into the new array.

So into the new long books array.

Okay, let's do the next one.

Here we have pages only 295.

And so then here in the second element of the array, this will become false.

And if it's false, then the element is basically filtered out.

It will not make it into the new array.

Then filter moves on to the next one.

Here we have 658, which we already saw here in the results.

And of course, that's because it has more than 500 here.

This one is again left out as it has only 200 and something.

And finally, the last one.

Yeah.

Game of Thrones is a long book, so that, of course, makes it into the long books array.

Nice.

Now we can actually keep adding new methods here.

So after this filter, we can chain on another filter.

And that's possible simply because this one here returns a new array and on arrays we can call filter.

Right?

Therefore, we can call filter here again.

And let's now say that we only want the books who have a movie adaptation.

So out of these three.

So book dot.

Pass movie adaptation.

And that's already it because this alone so this has movie adaptation is already a Boolean value.

So here we don't even need to write a condition because all we need is to return either true or false.

Right?

And so now long books, well, it's actually still three.

So it seems like all of these actually have movie adaptations.

Yeah, that's right.

So let's just put down here.

So book number three, let's put it to false just to see what happens.

Now.

Right.

And now, indeed, that movie also has been filtered out.

So we just set Dune to false.

And so now we only have here The Lord of the Rings and a Game of Thrones.

So these are the only two long books which have a movie adaptation.

So let's say long books.

With.

Movie right now.

This one here was just to show you that we can chain multiple filters in practice.

It would probably be better to just do an end here, right?

So that would be more efficient.

But this one also works.

So since this is so important.

So again, we use this filter really all the time in React.

This is really super important, this method.

Let's do another one here.

So let's only filter out adventure books.

So not actually filtering out, but let's basically filter for adventure books.

So that's a bit a better way of saying it.

So books dot filter and again it will loop over the entire books array.

And so let's do books.

And then we're back to our genres array.

So remember that this is an array.

And now what we want is to include books in the array where the genres array includes adventure.

So we're looking for adventure books.

And so books dot genres should include.

Adventure.

So includes always returns either true or false.

And so right there, we have our condition.

Mm.

Okay.

So adventure books.

But actually, let's do something first.

So let's again chain another method here, and this time let's actually chain a map.

So that is also perfectly fine because we already know that this year returns an array.

And so then on an array we can always call map.

So again, let's call it book.

But of course, it could be called Anything that We Wanted.

So in all of these methods here, we called it book because that is what makes more sense semantically.

But if we just called it X like it would work the exact same way, right?

So this is just a function that we can call the parameter.

So the argument that it receives anything that we want.

So here again, let's just return the title so that the output is a little bit easier to read.

So the books that or where the genres include adventure are The Lord of the Rings Dune and this Harry

Potter book.

And so if we check that out, then Indeed.

Well, here we cannot see that.

That's because of the limitation.

Where we cannot see so deep into the object with a free version.

But I can assure you.

That, for example, The Lord of the Rings.

Yeah.

So you see, here we have adventure.

So this book made it into the final array.

This one does not.

That's why it was not there.

This one?

Yeah.

This one is also adventure.

And so is this one.

Somehow, Game of Thrones is not an adventure.

Not sure why that is.

Uh, but yeah.

So this is how we combine a filter and a map in an effective way to model our data exactly in the way

that we want it.

And so since front end development with React and really any other front end framework is really a lot

about working with data, these methods here are absolutely essential.