‫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.sort,
‫and here we need to pass an 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 caught 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 while 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, yeah, 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 sort method
‫is what happens when we now check out arr.
‫So arr itself has been sorted, as well, right?
‫So it also now starts from nine, ends in one,
‫and 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?
‫'Cause 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.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, yeah, the sorted array,
‫but arr is is now back to being the original one.
‫So now it's not been affected because, yeah,
‫before sorting we took a copy
‫and then we sorted only this copy, but not the arr itself.
‫Okay?
‫But now 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 sortedByPages.
‫So as you can imagine, we will now sort
‫the entire books array by the number of pages.
‫So books.slice, again,
‫very important to take a copy here.
‫Then here we just follow that recipe.
‫So a, b, 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 b.pages
‫minus a.pages,
‫and now sorted by pages,
‫and, yeah,
‫cannot really see that there.
‫Let's close all of these.
‫Yeah.
‫So we start with "Lord of the Rings,"
‫which has 1200 something,
‫then 800,
‫600,
‫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 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 will simply follow this recipe.