So there's one last thing I want to talk about in this chapter, and that is how we can chain array
methods together.
So I think instead of me trying to baffle you with how this works, it's best just to go through an
example so that I have this product array right here.
And inside this array we have several objects and each object has a name and a price.
Now imagine I want to do two things with this array.
First of all, I want to filter the array.
So that's the filter method.
And what I'd like to do is filter out any product that isn't over 20 in price.
So first of all, we want to do that one thing and we'll get a new array from that filter method.
Then I want to do a second thing.
I want to take that filtered product array and I want to map it to a new array.
And that new array is going to be an array of product names, but they're formatted with a sale price.
So there's two things I want to do.
So typically, how would we do this based on the methods we've learned so far?
Well, first, we'd create a constant for the filtered array because that's what we need to do.
First of all, filter them.
So we'll set this equal to products and then use the filter method.
Now inside here, we'll take the product inside the callback function and we'll return product dot price
is over 20, so this is a one line version of it.
So remember, this is being returned right here.
It's either true or false.
If it's true that product is kept inside the filtered array.
If it's false, then it's filtered out.
So we're only keeping items in the array if the price is over 20.
So this, this and this, these two would be filtered out.
So that new filtered array is then being stored inside this variable right here.
So that's the first step done.
Now, the second step would be to map this filtered array into a new array.
And that new array is going to be a formatted version of these products.
It might be an array of sentences like promo sentences, for example.
Each string for each item could say something like the product name is this amount of money and the
amount of money would be halved.
So let's do this.
Let's come down here and we'll say const and we'll call this promos, this new mapped array, and we'll
set this equal to filtered, which is this thing, the new filtered array we just created and we want
to use the map method on that.
So inside this map method we need a callback function and inside the callback function we pass the individual
product.
So the product we're currently iterating.
And then inside this callback function, we're just going to return a template string.
And that template string will say the then we'll output a variable, which is the product dot name.
And remember, we can access the product we're currently iterating because we pass it in to the callback
function.
So the product name is and then we'll output the price.
So product dot price.
But we want to divide this by two because oops, inside the curly braces.
That is because we want these to be sale products so we can do this kind of thing.
When we're outputting variables right here, we can perform some kind of math and it will work that
out and output that value and at the end we'll just say pounds.
So the product name is X amount of pounds.
So that's what we're returning in each case.
So we'll have an array of strings at the end inside promos.
So let me now come down here and console dot log promos.
So first of all, we're filtering, then we're mapping to an array of strings.
So save and view and we should have three elements because we filtered two of them out and each one
is just a string which says how much the item is, which is divided by two and the name of the item.
Awesome.
So that works, right?
This is all fine, but now a quicker way to achieve this would be to use what's known as method chaining.
So then notice that this thing right here, this returns an array and this works on an array, right?
Much like this works on an array.
So because they both return arrays and they both work on arrays, we can take advantage of method chaining.
So let me show you this in action.
I'm going to comment out this version right here.
Then I'm going to come down here and I'm going to say const promos, which is the end product we want.
The end array is equal to first of all, the products, and then I'm going to say dot filter.
And in fact, we'll just copy this stuff from up here because we're doing exactly the same thing and
we'll pass it in there.
Now remember, this returns an array right here.
So what we can do, because this returns an array is just chain on the map method.
We don't need to store this in a constant first and then use the map method on that constant.
That's sometimes an unnecessary step.
And we don't need to do that.
We can just chain the map function directly onto this because.
Is this is returning an array and the map method works on an array and we could do this vice versa.
We could map an array, first of all, and then use the filter method.
So we're going to do this and inside the map method, we're going to do this right here.
But before we put the callback function in here, I want to just format this a bit better.
So when we do method chaining like this, normally for every method we chain on, we go down to the
next line and indent just so it's easier to read like this.
So now we have the products, then we use the filter method, then the map method, and we could have
more chains down here if we needed to.
So inside here, inside the map method, I want to basically copy this, what we're returning and I'm
just going to do a callback function.
I'm going to take the individual product again and pass it over here and place this right here and we
can do this because we're just returning a single value.
So this is the shorthand, remember on one line.
So this is going to do exactly the same thing.
But this time we've changed the methods together and it's a little neater and more concise than this.
So if we log out the promos up here, it should be exactly the same.
And we can see an array of three things and each one is a string.
So this technique right here of chaining methods is not just unique to arrays.
We could do it on other data types as well.
For example, on strings.
As long as the methods return a string and the method we're chaining to that method is going to be working
on a string.
The same principle applies.
Okay, so there we go my friends.
That is how to method chain just to make things a little more concise.
