1
00:00:01,000 --> 00:00:05,410
This lesson, we're going to be looking at how we can sort the order of an array and we're going to

2
00:00:05,410 --> 00:00:11,290
need to do that in several occasions within the upcoming lessons where we're sorting the order of this

3
00:00:11,290 --> 00:00:15,280
array so that we can have one item after another, after another item.

4
00:00:15,280 --> 00:00:18,220
And we don't always necessarily start with the first word.

5
00:00:18,460 --> 00:00:23,020
And then once we've got the words output, we're going to need to scramble the order of the letters

6
00:00:23,020 --> 00:00:23,640
of the word.

7
00:00:23,860 --> 00:00:30,460
So turning the string into an array and then utilizing that content from the array and scrambling those

8
00:00:30,460 --> 00:00:33,050
letters and then turning it back into a string value.

9
00:00:33,340 --> 00:00:39,730
So there's quite a bit of work ahead of us opening up our Ed and we want to introduce you to prototype

10
00:00:39,730 --> 00:00:40,240
sort.

11
00:00:40,420 --> 00:00:43,540
And what sort does is it sorts elements.

12
00:00:43,780 --> 00:00:49,750
So you can see here within Mozilla Developer Network, the way that sort works is if we have an array

13
00:00:49,930 --> 00:00:54,660
and we apply saw to it, it sorts it within an alphabetical order.

14
00:00:54,910 --> 00:00:59,290
So turning March, January, February, December to December, February, January, March.

15
00:00:59,500 --> 00:01:01,660
So it sorts it within an output order.

16
00:01:02,020 --> 00:01:08,770
We can also see that numerically when we do a sort, we sort it within a numerical order and notice

17
00:01:08,770 --> 00:01:10,980
as well that it's putting it within the string value.

18
00:01:11,170 --> 00:01:16,660
So it's taking one, two, three, four, and it's not taking one for twenty one thirty.

19
00:01:16,930 --> 00:01:22,300
So keep that in mind when you are using sort that these are the outputs that you can expect and sorting

20
00:01:22,310 --> 00:01:27,230
out via the string value, the one that we want to make use of is the COMPAR function.

21
00:01:27,490 --> 00:01:33,520
So using the array with the compare function and the compare function allows us to compare a first element

22
00:01:33,520 --> 00:01:34,660
with the second element.

23
00:01:34,930 --> 00:01:41,560
And when we're using a comparison of the two elements, if we don't have any specific values that are

24
00:01:41,560 --> 00:01:48,340
being returned back, it's going to automatically sort, according to the each character's UNICOR Unicode

25
00:01:48,550 --> 00:01:52,070
code point value according to string conversion for each element.

26
00:01:52,270 --> 00:01:56,220
So what it does is basically what we see up here within that sort.

27
00:01:56,470 --> 00:02:01,810
So if we're not specifying this, this content and if we're not returning a value, then we don't have

28
00:02:01,810 --> 00:02:05,430
the ability to select out and reorder the array.

29
00:02:05,590 --> 00:02:08,290
And what we want to do is make use of the compare function.

30
00:02:08,440 --> 00:02:12,430
And also keep in mind as well that the array is sorted in place.

31
00:02:12,640 --> 00:02:17,710
So no copy is made, there's no duplicate of the array and the rate is just simply resorted.

32
00:02:17,920 --> 00:02:23,090
So the items index numbers are sorted the way that the compare function works.

33
00:02:23,350 --> 00:02:24,760
So we've got to compare function.

34
00:02:24,760 --> 00:02:31,300
If it's less than zero, then it's going to sort a and index value of B and so on comes first.

35
00:02:31,540 --> 00:02:36,800
If it returns zero, that's going to leave A and B, a change in perspective for each order.

36
00:02:36,970 --> 00:02:42,940
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

37
00:02:42,940 --> 00:02:43,460
order them.

38
00:02:43,690 --> 00:02:48,970
So what's going to happen now is that as we loop through the contents of the array and we do that with

39
00:02:48,970 --> 00:02:53,320
the sort anyway, we can randomly order those items.

40
00:02:53,470 --> 00:02:56,800
And there's a good example here about how the compares going to work.

41
00:02:56,950 --> 00:03:03,940
So combining compare with sort is going to give you the ability to randomize the order of the contents

42
00:03:03,940 --> 00:03:04,810
of your array.

43
00:03:04,990 --> 00:03:13,000
And you can see that we're specifying that sought value, whether we're sorting at A minus B or A is

44
00:03:13,000 --> 00:03:14,590
greater than B and so on.

45
00:03:14,710 --> 00:03:20,350
So depending on what this value number is falling at, you're going to be expecting a different sort

46
00:03:20,360 --> 00:03:23,140
order and that's going by what's output here.

47
00:03:23,620 --> 00:03:26,620
So having said all of that, let's put it into play.

48
00:03:26,770 --> 00:03:30,840
And this is essentially going to give us a way to sort our array.

49
00:03:31,120 --> 00:03:33,010
We're using the words array.

50
00:03:33,520 --> 00:03:35,680
We're applying the method of sort.

51
00:03:36,430 --> 00:03:43,660
And if we were to just do this and I'll cancel my words and as we work through how this is going to

52
00:03:43,660 --> 00:03:46,110
work, you're going to see that the array is going to be changing.

53
00:03:46,120 --> 00:03:51,370
So refresh start, we see that sort sorted in alphabetical order.

54
00:03:51,640 --> 00:03:56,850
And that's not exactly what we want to do, is we want to apply that compare function.

55
00:03:57,130 --> 00:03:59,860
So we'll have that function sitting inside of the array.

56
00:04:00,070 --> 00:04:03,610
We're going to take item number eight and be.

57
00:04:05,430 --> 00:04:12,450
So selecting A and B and we're going to update the order of these items that are being output, and

58
00:04:12,450 --> 00:04:18,240
if we don't provide any type of return, so you can see here, if I'm returning negative one.

59
00:04:20,230 --> 00:04:21,550
And we start game.

60
00:04:22,830 --> 00:04:24,510
If I'm returning one.

61
00:04:26,140 --> 00:04:31,790
We start game, so that's a different order to it, so originally we had it starting with brackets.

62
00:04:31,810 --> 00:04:39,400
Now we're starting with JavaScript and if we return back a value of zero, then we have the same order

63
00:04:39,400 --> 00:04:41,950
that we have the original rate in.

64
00:04:41,950 --> 00:04:44,430
So nothing changes in that in that format.

65
00:04:45,340 --> 00:04:52,510
So now if we apply a value of math, so we do point five minus using the math.

66
00:04:53,820 --> 00:05:00,830
Random method, this is going to give us a random value and as we know with math, random, it's a random

67
00:05:00,840 --> 00:05:03,280
zero point and a bunch of decimal places.

68
00:05:03,780 --> 00:05:11,010
So if we're doing it this way, it could potentially it's got a 50 50 chance of being positive or negative,

69
00:05:11,010 --> 00:05:17,340
essentially, and it's got a 50 50 chance of sorting the order of those items in that array.

70
00:05:17,520 --> 00:05:18,410
So let's try that out.

71
00:05:18,840 --> 00:05:25,170
So now we see that we've got JavaScript, HTML brackets coding, Lowrance course, refresher course,

72
00:05:25,170 --> 00:05:27,720
Lorence HTML, JavaScript, brackets coding.

73
00:05:27,900 --> 00:05:32,010
And this is a quick and easy way to sort contents of your array.

74
00:05:32,040 --> 00:05:35,560
So I do suggest that you do try this out as well for yourself.

75
00:05:35,760 --> 00:05:38,060
So taking not my words array.

76
00:05:38,070 --> 00:05:43,860
So the one that we've just changed and resorted the order of it go through for each item that's available

77
00:05:43,860 --> 00:05:45,060
within that array.

78
00:05:45,210 --> 00:05:47,940
We've got all of the items as we loop through.

79
00:05:48,150 --> 00:05:54,240
So going for each we've got a function where we're going to pass on an argument of item and item is

80
00:05:54,240 --> 00:05:56,520
going to be the value of the item.

81
00:05:56,550 --> 00:06:01,560
So if I was to logout item, you're going to see that it's going to log out all of those items within

82
00:06:01,560 --> 00:06:02,190
that order.

83
00:06:02,190 --> 00:06:06,180
So it's taking Lowrance course brackets, JavaScript coding, HTML.

84
00:06:06,300 --> 00:06:10,740
And because we've got that sort, we've got a different sort order always.

85
00:06:10,950 --> 00:06:16,530
So we can always take that first item that's available within the array and show that and display that

86
00:06:16,530 --> 00:06:17,340
to the player.

87
00:06:17,350 --> 00:06:22,440
And the way that we're going to use that is we're going to use that same array prototype and I'll just

88
00:06:22,440 --> 00:06:24,690
call it temp value of item.

89
00:06:24,960 --> 00:06:30,470
And using JavaScript split, we're going to split this and turn it into an array.

90
00:06:30,990 --> 00:06:34,200
And if we output the value of temp, you're going to see that.

91
00:06:34,200 --> 00:06:36,380
Now, that word is within array format.

92
00:06:36,600 --> 00:06:41,040
So all the letters are going to be broken up into an array to see that each one of these gets broken

93
00:06:41,040 --> 00:06:41,930
up into an array.

94
00:06:42,090 --> 00:06:48,510
And now it's just a matter of doing the exact same thing we did before and resorting that order of temp.

95
00:06:48,750 --> 00:06:52,740
So taking that newly created array, playing the function saw.

96
00:06:52,920 --> 00:07:00,530
And we're going to reorganize the order of that function of that array using the math random method.

97
00:07:00,570 --> 00:07:03,130
We're going to sort this array.

98
00:07:03,180 --> 00:07:04,380
Let's try that one more time.

99
00:07:04,800 --> 00:07:07,020
So now you can see that the words are scrambled.

100
00:07:07,020 --> 00:07:13,560
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

101
00:07:13,560 --> 00:07:15,550
temp one instead of that joint array.

102
00:07:15,960 --> 00:07:16,710
So refresh.

103
00:07:16,920 --> 00:07:23,790
And now you can see that we've got random random order for these items and we're all ready to start

104
00:07:23,790 --> 00:07:29,970
outputting it to the player because now we've randomized and we scrambled the words and making it a

105
00:07:29,970 --> 00:07:31,920
little bit more difficult to select those.

106
00:07:32,160 --> 00:07:35,820
So coming up next, I'm going to show you we're going to build out some elements and we're going to

107
00:07:35,950 --> 00:07:40,390
put them on the page for the player to be able to select those as the words come up.

108
00:07:40,410 --> 00:07:42,030
So that's still to come in the next lesson.