All language subtitles for 12. The Array sort Method

And now the last array method that I want to quickly talk about, because we also use it quite frequently

in React applications is the sort method.

And as the name says, we can use this method to sort an array.

So let's start with a small demo array, basically.

Let's just give it a few numbers.

And let's here create a new array based on that array.

So x dot sort.

And here we need to pass in a function with two arguments.

And we usually just call them A and B, and I will actually not really go into how this algorithm and

how this method works here.

But let me just tell you that in order to sort this array in an ascending way, we do A minus B.

Okay.

And now let's.

Oh, and actually, we cannot do this because.

We already used that apparently before.

Okay.

And now let's take a look at sorted and indeed it is now sorted in an ascending way.

So starting from the lowest number all the way to the highest.

Now very, very briefly, what happens here is that basically JavaScript goes over the array, so it

loops through it and it calls this function here and A and B are always the current value and the next

value.

And then here in the callback function, when we return a negative value, then these two numbers will

basically be sorted in an ascending way.

So the small number will come first and then the biggest number will come afterwards.

And if we do the opposite, so if we return a positive number, then well, the opposite will happen.

Then these two values will be sorted in a descending way.

And so we return these positive or negative numbers simply by subtracting one minus the other.

So here a and B in this example will be three and seven.

And so then three minus seven is minus four.

And so they will then be sorted in an ascending way, as I said before.

But that's not really important.

You should just basically follow this as a recipe.

So when you do A minus B, it will be sorted in an ascending way.

When you do B minus A then descending.

So indeed, now we start with nine and with one.

Now, what's very surprising about the sword method is.

What happens when we now check out our.

So R itself has been sorted as well.

Right.

So it also now starts from nine ends in one.

And if we switch this around, then you see that both these arrays are exactly the same.

So what happened here?

Well, what happened is that unlike the map filter and reduce method, this is not a functional method.

So this is actually a method that mutates.

So it changes the original array.

And so we actually didn't even have to store this in a new array, right?

Because it already changed this original array anyway.

However, usually we do not want that to happen, especially in a front end framework like React, which

really does not like us mutating data.

So a nice trick that we can do here is to first take a copy of the array simply by doing array, dot

slice and open and close.

And so this will then basically return a brand new array, which is a copy of this one.

And so then on that array we can chain the sort method.

And so you see that with this, the sorted is still the, the sorted array.

But are, is, is now back to being the original one.

So now it's not been affected because you before sorting we took a copy and then we sort it only this

copy but not the R itself.

Okay.

But now we're going back to a more practical examples, because rarely we have an array like this that

we need to sort, but usually we always have an array of objects.

So that's very common that we have to sort that.

And so let's say sort it by.

Pages.

So as you can imagine, we will now sort the the entire books array by the number of pages.

So books dot slice.

Again, very important to take a copy here.

Then here we just follow that recipe.

So.

AB And let's say we want a descending one.

And so then we say B, but now it's not just B minus A right, because these are now the two book objects.

And of course we cannot subtract those.

So we need still a numeric value here.

And since we want to sort by pages, we do beat pages.

Minus eight pages and I'll sort it by pages and yeah, cannot really see that there.

Let's close all of these.

Oh, yeah.

So we start with Lord, Lord of the Rings, which has 1200 something, then 800.

600.

A 200.

And then the shortest one is Harry Potter with 223 pages.

So that worked perfectly.

Let's do the opposite, just to be sure.

And yeah, so now Harry Potter is the first one in line and, and yeah, it's now sorted in an ascending

way.

So we do this all the time.

And so now when I do this inside the React course, I will no longer need to explain what we're doing

and we'll simply follow this recipe.