So in JavaScript, a lot of the time when we have some kind of array of data, we might want to sort
that data or rearrange it in a particular way.
For example, if we have an array of names like this, we might want to sort that array in alphabetical
order.
Or if we have an array of objects like this, we might want to sort those objects based on a property,
for example, the score, so that the highest score objects come first.
So in cases like this, we can use the sort method in JavaScript.
So how does this work?
Well, I'm going to go through a few different examples.
We'll start with strings.
So we have an array of names which are all strings, and I want to sort these in alphabetical order.
So to do that, I could take the names array and then say dot sort to run the sort method.
Now the sort method has an inbuilt algorithm which automatically sorts strings alphabetically.
So I don't need to do anything else here that automatically does it.
Now this doesn't return a new value, so I can't say const new names is equal to this and it returns
that updated array.
It doesn't create a new array.
This, it just alters directly or changes this array.
The array we use the method on.
So unlike the other array methods we've seen so far, this is destructive because it changes the original
array.
So all I need to do now is say console, dot log and then the names.
And now these should be in alphabetical order, which we can see right there.
Starts with Chun-li, ends with Yoshi.
Okay then.
So what about numbers?
Well, take a look at this.
We have these different scores and I'm going to do the same thing.
I'm going to say names dot sort and then console dot log the scores.
And I've said names again here.
That needs to be scores.
And if we preview this, then we should see these in order from lowest to highest.
But there is one caveat, and I'll show you that in a second.
So come over here and we can see it starts with the lowest and it ends with the highest.
But actually it's not the lowest because five is the lowest, but it's starting with ten and we see
five over here.
So what's going on?
Well, actually, it's only looking at the first numbers here.
So we can see one, two, three, four, then five, then five zero, then 70.
So it's not taking these as whole numbers, if you like.
It's actually looking at the first number and ordering them that way so we can overcome this and we'll
take a look at how later.
But before we do that, I want to show you kind of like an opposite of sort, which is the reverse method.
So if I comment this out and say, now names dot reverse, what this does is take this array and it
completely reverses it so that now Mario will be last.
Luigi first, Yoshi second, Sean second to last and Chun-li will stay in the same position because
that's the middle element.
So if I save it and refresh, let's take a look.
Luigi, Yoshi, Chun-li, Sean and Mario.
So that's reversed.
This thing, it's just kind of tilted it 180 degrees.
Now a good technique we can use is to use names dot sort first and then names dot reverse.
And that gets them in alphabetical order, then reverses them.
So they're still in alphabetical order.
But this time the later letter in the alphabet comes first.
So if I save it and take a look over here, we can see that in action.
So that's a nice little thing we can use there.
We can also use the reverse method on numbers.
So let me just comment this out and say numbers or scores rather dot reverse.
And that does exactly the same thing.
It tilts this hundred and 80 degrees.
So 45 is first and ten would be last save.
And we can see that right there.
Okay.
So let's have a look at how we can solve this kind of problem when we use the sort method.
But we're going to do it with some different data.
So let me comment out all of this stuff that we've done so far, and then we're going to come down here
and use this data now.
Now this data is a bit more complex.
We have players now and what we want to do is sort these objects based on the score right here.
So how are we going to do that exactly?
Well, if we say something like this, players dot sort, this is not going to work.
The inbuilt sorting algorithm that the sort method uses won't work because it doesn't automatically
know what to sort by.
Is it going to be the name or the score it doesn't know.
So for more complex sorting like this, we have to provide a function as an argument to the Sort method.
Now this function is known as the compare function because it's used to compare values in our array
in order to sort them.
So let's create that function.
It's an arrow function like so.
And then this function right here takes two parameters, which we'll call A and B, now A and B these
represent two consecutive elements inside the array and in the function we're going to compare A and
B and.
Decide which of those should come first.
For example, A and B could be this and this, so A at the top and B underneath it.
But it also could be this.
And this.
Or this and this.
But let's just imagine it's these two right here.
So A is Luigi and B is Chun-li this one.
Now what we need to do is compare A and B and decide which one comes first.
Now, I want B to come first because I'm basing it on the score and B has a higher score.
So we want B to come first and A to come second.
Now, the way we do that inside this function is by returning a value, and that value should either
be zero or a positive or a negative number.
Now, if a should come first, then we return a negative number, for example, minus one.
If B should come first, we return a positive number, for example, plus one, or if the two elements
are the same and no reordering is needed, then we can just return zero.
Okay, so in our case, we want B to come first, but we need to do a check first of all, to make sure
that we want B to come first, because it's not just these two that we're going to do this check on.
It's every two consecutive elements in the array.
All right.
So we need to do a check here.
We need to say, is the score of a greater than the score of B?
So we'll do that.
We'll say if a score is greater than B dot score, then we'll do something.
Now, what do we want to do in here?
Well, remember, A is the first one and B is the second.
So if a score is greater and B score is less so that this is true right here, then we want A to come
first.
We don't need to reorder these.
So if we want a to come first, then we return a negative number.
So minus one.
Now let's do an else if because we need to do another check and this check is to see if B dot score
is greater than a dot score.
So if this is the case, then it means this is greater than this.
And then we need to rearrange them because we want the higher score to come first.
So if we want B to come first, like in this case, then we return a plus integer.
So we return just one.
Okay, so that means that B will come first.
Now, the only other case is if they're equal.
So we can just do an else for that and say return zero.
That's if no reordering is needed.
And the two things are equal.
For example, if this was 50 and this was 50.
So again, we're firing a callback function for each pair of elements inside the array, each consecutive
pair, and we're checking to see if the score of the first one is greater than the score of the second
one.
Now, if that's true, then we return minus one and it means that a will come first in the sorted array,
which is what we want.
We want the bigger score to come first.
Now else if B dot score is greater than a dot score, we want to swap them or switch them.
So we return one and that means that B will be switched first and a second.
And finally we just return zero if no change is needed.
So let's test this and then log out players.
We'll say console dot log players and save it.
And over here we should see that.
Now the highest score comes first all the way down to the lowest score.
Okay, So that's nice.
So this looks quite complex and a lot of code and we can do a shorter version.
So what I'm going to do is come down here and say players dot sort and we're basically going to rewrite
this bit now.
Now we're going to say we want to take in a callback function with A and B like we did before Arrow.
And then what we're going to do is just inside the code block return and then we're going to say B dot
score minus a dot score like that.
And that is it.
Now because it's one line, we can take off the return keyword, bring it up here and remove the curly
braces.
And that is exactly the same thing.
This does the same thing because if B dot score is greater than a score, then we'll get a positive
number, which we should and then B will come first.
If a Dot score is greater than B dot score, then we'll get a negative number and A will come first,
which is what it should.
And if they're both the same, we'll get zero and there will be no change.
So this does exactly the same thing.
It's just a much more simple way to write this.
So if I comment this out now and run this instead, it should do exactly the same thing.
And we can see the score is now at the top.
So we can use this logic of a compare function inside this thing up here if we want it to.
So I could say now scores dot sort and then pass in a compare function.
So we'll take A and B oops, let's take B and inside this function all we're going to do is say B minus.
A and that returns that value.
So if B is a bigger number, then B will come first.
If A is a bigger number, then A will come first.
If they're both the same, then we don't need to switch.
So let's now log out the scores.
So console dot, log the scores and save it.
And over here we can now see these are in the correct order.
So the biggest first and the smallest last.
If we wanted to reverse this, we could either now use the reverse method or we could just say A minus
B instead, and that will sort it the other way.
Let me save this.
And we can see now we get the smallest number first and the largest at the end.
So there we go, my friends.
That is the sort method, a really nice way to sort our data inside arrays.
