‫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 then 500
‫and that's already it.
‫So, let's put long books here, close down here.
‫So long books should be this one.
‫And we see immediately
‫that the array only has a length of three now.
‫So this one has 1,216 pages.
‫This one's 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 the map method, this function here,
‫this callback, will be called for each element 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?
‫And, 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
‫has movie adaptation.
‫And that's already it because this alone,
‫so this has movie adaptation is already a built-in value.
‫And 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 "Dune" here.
‫So book number three, let's put it to false
‫just to see what happens.
‫Now, all 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?
‫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.
‫That's a bit better way of saying it.
‫So books dot filter,
‫and again it'll loop over the entire books array,
‫and so that's two 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.
‫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 here 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.
‫Now that's because of the Qualcomm 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,
‫and 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, 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.