This lesson, we're going to be looking at how we can sort the order of an array and we're going to
need to do that in several occasions within the upcoming lessons where we're sorting the order of this
array so that we can have one item after another, after another item.
And we don't always necessarily start with the first word.
And then once we've got the words output, we're going to need to scramble the order of the letters
of the word.
So turning the string into an array and then utilizing that content from the array and scrambling those
letters and then turning it back into a string value.
So there's quite a bit of work ahead of us opening up our Ed and we want to introduce you to prototype
sort.
And what sort does is it sorts elements.
So you can see here within Mozilla Developer Network, the way that sort works is if we have an array
and we apply saw to it, it sorts it within an alphabetical order.
So turning March, January, February, December to December, February, January, March.
So it sorts it within an output order.
We can also see that numerically when we do a sort, we sort it within a numerical order and notice
as well that it's putting it within the string value.
So it's taking one, two, three, four, and it's not taking one for twenty one thirty.
So keep that in mind when you are using sort that these are the outputs that you can expect and sorting
out via the string value, the one that we want to make use of is the COMPAR function.
So using the array with the compare function and the compare function allows us to compare a first element
with the second element.
And when we're using a comparison of the two elements, if we don't have any specific values that are
being returned back, it's going to automatically sort, according to the each character's UNICOR Unicode
code point value according to string conversion for each element.
So what it does is basically what we see up here within that sort.
So if we're not specifying this, this content and if we're not returning a value, then we don't have
the ability to select out and reorder the array.
And what we want to do is make use of the compare function.
And also keep in mind as well that the array is sorted in place.
So no copy is made, there's no duplicate of the array and the rate is just simply resorted.
So the items index numbers are sorted the way that the compare function works.
So we've got to compare function.
If it's less than zero, then it's going to sort a and index value of B and so on comes first.
If it returns zero, that's going to leave A and B, a change in perspective for each order.
And if it's greater than zero, then it's going to be in an index lower than a so it's going to reverse
order them.
So what's going to happen now is that as we loop through the contents of the array and we do that with
the sort anyway, we can randomly order those items.
And there's a good example here about how the compares going to work.
So combining compare with sort is going to give you the ability to randomize the order of the contents
of your array.
And you can see that we're specifying that sought value, whether we're sorting at A minus B or A is
greater than B and so on.
So depending on what this value number is falling at, you're going to be expecting a different sort
order and that's going by what's output here.
So having said all of that, let's put it into play.
And this is essentially going to give us a way to sort our array.
We're using the words array.
We're applying the method of sort.
And if we were to just do this and I'll cancel my words and as we work through how this is going to
work, you're going to see that the array is going to be changing.
So refresh start, we see that sort sorted in alphabetical order.
And that's not exactly what we want to do, is we want to apply that compare function.
So we'll have that function sitting inside of the array.
We're going to take item number eight and be.
So selecting A and B and we're going to update the order of these items that are being output, and
if we don't provide any type of return, so you can see here, if I'm returning negative one.
And we start game.
If I'm returning one.
We start game, so that's a different order to it, so originally we had it starting with brackets.
Now we're starting with JavaScript and if we return back a value of zero, then we have the same order
that we have the original rate in.
So nothing changes in that in that format.
So now if we apply a value of math, so we do point five minus using the math.
Random method, this is going to give us a random value and as we know with math, random, it's a random
zero point and a bunch of decimal places.
So if we're doing it this way, it could potentially it's got a 50 50 chance of being positive or negative,
essentially, and it's got a 50 50 chance of sorting the order of those items in that array.
So let's try that out.
So now we see that we've got JavaScript, HTML brackets coding, Lowrance course, refresher course,
Lorence HTML, JavaScript, brackets coding.
And this is a quick and easy way to sort contents of your array.
So I do suggest that you do try this out as well for yourself.
So taking not my words array.
So the one that we've just changed and resorted the order of it go through for each item that's available
within that array.
We've got all of the items as we loop through.
So going for each we've got a function where we're going to pass on an argument of item and item is
going to be the value of the item.
So if I was to logout item, you're going to see that it's going to log out all of those items within
that order.
So it's taking Lowrance course brackets, JavaScript coding, HTML.
And because we've got that sort, we've got a different sort order always.
So we can always take that first item that's available within the array and show that and display that
to the player.
And the way that we're going to use that is we're going to use that same array prototype and I'll just
call it temp value of item.
And using JavaScript split, we're going to split this and turn it into an array.
And if we output the value of temp, you're going to see that.
Now, that word is within array format.
So all the letters are going to be broken up into an array to see that each one of these gets broken
up into an array.
And now it's just a matter of doing the exact same thing we did before and resorting that order of temp.
So taking that newly created array, playing the function saw.
And we're going to reorganize the order of that function of that array using the math random method.
We're going to sort this array.
Let's try that one more time.
So now you can see that the words are scrambled.
So we just need to set a value and we can call it temp one and equal that to join and then let's output
temp one instead of that joint array.
So refresh.
And now you can see that we've got random random order for these items and we're all ready to start
outputting it to the player because now we've randomized and we scrambled the words and making it a
little bit more difficult to select those.
So coming up next, I'm going to show you we're going to build out some elements and we're going to
put them on the page for the player to be able to select those as the words come up.
So that's still to come in the next lesson.