1
00:00:00,500 --> 00:00:05,600
This lesson, we are going to be sorting that deck of cards we built in the last lesson.

2
00:00:05,630 --> 00:00:08,270
So creating a function in order to do the sort.

3
00:00:08,600 --> 00:00:10,520
And just like with many things in JavaScript.

4
00:00:10,730 --> 00:00:14,960
There are a number of ways to randomize array content.

5
00:00:15,270 --> 00:00:17,840
And that's going to call this one shuffle.

6
00:00:18,240 --> 00:00:19,790
It's going to pass in cards.

7
00:00:20,060 --> 00:00:25,460
And I know this is a global value, so we don't necessarily need to randomize that.

8
00:00:25,970 --> 00:00:27,380
But we can if we want end.

9
00:00:27,590 --> 00:00:33,110
If you want to update that, we can do that as well, where we can shuffle that that array in place.

10
00:00:33,650 --> 00:00:37,880
So this will make it more flexible, like if you want to use the shuffle somewhere else.

11
00:00:38,090 --> 00:00:39,770
You can just simply copy the function.

12
00:00:40,490 --> 00:00:45,270
And what we're going to be using is the array sort and arrays sort.

13
00:00:45,350 --> 00:00:50,120
So those of you that are familiar, the sorts, the element of an array in place.

14
00:00:50,390 --> 00:00:53,030
So that means that it takes that every object.

15
00:00:53,420 --> 00:00:58,550
And if you do months sort, it's going to output that in a different order.

16
00:00:59,210 --> 00:01:03,410
And every time you sort it, it's going to output it within that sorted order.

17
00:01:03,620 --> 00:01:05,390
So you see here, it's alphabetical.

18
00:01:05,720 --> 00:01:07,340
And here it's putting the numbers.

19
00:01:07,430 --> 00:01:08,300
So smallest.

20
00:01:08,630 --> 00:01:17,210
And also note that it goes one hundred thousand twenty, one thirty and four because it sorts it according

21
00:01:17,210 --> 00:01:19,490
to first character.

22
00:01:19,820 --> 00:01:23,000
So even the digits, it takes them as string values.

23
00:01:23,270 --> 00:01:24,770
And it does the sort that way.

24
00:01:25,370 --> 00:01:29,810
So there is another option to kind of extend upon what sort has to offer.

25
00:01:30,140 --> 00:01:31,880
And that's the compare function.

26
00:01:32,240 --> 00:01:33,350
So the compare function.

27
00:01:33,740 --> 00:01:40,220
So you can pass in some values into the sort and you can run a compare function function.

28
00:01:40,610 --> 00:01:41,900
And this is optional.

29
00:01:42,260 --> 00:01:45,530
And it specifies a function that defines the sort order.

30
00:01:45,830 --> 00:01:51,230
If it's submitted that rate elements are converted to strings, then sorted according to each character's

31
00:01:51,470 --> 00:01:53,660
Unicode code point value.

32
00:01:53,960 --> 00:01:59,690
So that's what's happening over here, where by default, it's sorting it by that Unicode code point

33
00:01:59,690 --> 00:02:00,200
value.

34
00:02:00,440 --> 00:02:01,970
And they are being converted to string.

35
00:02:02,010 --> 00:02:03,530
So that's why you can't sort the numbers.

36
00:02:04,100 --> 00:02:08,630
So if you do want to do that kind of sort or if you want to randomize the content of the sort.

37
00:02:08,990 --> 00:02:17,540
You can do pacien those first element values for comparison and then the second element values for comparison.

38
00:02:17,810 --> 00:02:19,430
They've got some examples here.

39
00:02:19,730 --> 00:02:23,090
And this one is fairly complex to understand.

40
00:02:23,420 --> 00:02:31,490
But if you do look at what the examples they have here, A is less than B by some ordering criterion

41
00:02:31,850 --> 00:02:35,900
and then A is greater than B by the ordering criterion.

42
00:02:36,080 --> 00:02:38,420
So to see they're returning a negative one or a one.

43
00:02:38,750 --> 00:02:41,870
And if it's not if they're equal, it's returning a zero.

44
00:02:42,230 --> 00:02:47,330
So when you do a compare numbers A and B, it's going to do a comparison of those numbers.

45
00:02:47,720 --> 00:02:56,720
So if instead of returning back negative one, one or zero, we randomize this using math random and

46
00:02:56,720 --> 00:02:58,910
just do a dot, a point five.

47
00:02:59,150 --> 00:03:02,660
And then we multiply it by where we subtract the math random.

48
00:03:02,930 --> 00:03:06,140
It will leave it either be a plus or a minus.

49
00:03:06,470 --> 00:03:08,780
And that will randomize our sort order.

50
00:03:09,380 --> 00:03:10,970
So let me show you how this is going to work.

51
00:03:11,390 --> 00:03:13,310
And there's more information, of course, available.

52
00:03:13,400 --> 00:03:16,790
The Mozilla Developer Network sets the document that we're just looking at.

53
00:03:17,450 --> 00:03:21,440
So we're taking in the value of whatever the cards object is.

54
00:03:21,470 --> 00:03:24,200
So that's being passed into this function.

55
00:03:24,830 --> 00:03:28,970
And then we've got the sort of an anonymous function within the sort.

56
00:03:29,270 --> 00:03:32,930
And within this function, we're going to return back.

57
00:03:33,740 --> 00:03:38,100
Point five minus math, random.

58
00:03:38,810 --> 00:03:41,190
And then we can also console log that out.

59
00:03:41,210 --> 00:03:44,810
So you can see the different values that are being returned back.

60
00:03:45,280 --> 00:03:47,240
And it's actually not going to be exactly that.

61
00:03:47,420 --> 00:03:51,800
But this is just so you have an idea of what we see within the console.

62
00:03:52,610 --> 00:03:56,540
And then this function is just going to return back that card's object.

63
00:03:57,230 --> 00:04:01,190
So it actually doesn't have to return it because the sort is in place.

64
00:04:01,460 --> 00:04:03,560
But we're passing in that card object.

65
00:04:03,860 --> 00:04:08,600
And then we're sending that whenever we've constructed the cards actually allowed in one more function

66
00:04:08,600 --> 00:04:11,370
there so that we can see that randomize deck.

67
00:04:11,720 --> 00:04:16,520
So now when we open up the deck of cards, they've been randomized.

68
00:04:16,790 --> 00:04:19,310
So it's no longer that same order.

69
00:04:19,460 --> 00:04:24,320
And every time I refresh it, I'm going to have a different randomized order of the deck of cards.

70
00:04:25,170 --> 00:04:27,890
You can see all of the values that were being returned back.

71
00:04:28,250 --> 00:04:30,050
So in most of the cases.

72
00:04:30,560 --> 00:04:32,990
So we're getting a point.

73
00:04:33,560 --> 00:04:34,580
We've got negatives.

74
00:04:34,640 --> 00:04:35,750
We've got positives.

75
00:04:36,140 --> 00:04:41,900
And that's what we're really looking back at, how the content is being sorted and see all of the numbers

76
00:04:41,900 --> 00:04:43,580
being returned back in the console.

77
00:04:43,880 --> 00:04:45,580
So, of course, it's not the exact number.

78
00:04:45,580 --> 00:04:52,340
And within the return, it's just important to note that either it's doing a negative or a positive,

79
00:04:52,640 --> 00:04:54,800
and that's going to be affecting the sort order.

80
00:04:55,100 --> 00:04:59,480
And it's randomise just using the math random method that's available.

81
00:04:59,570 --> 00:05:04,850
JavaScript got rid of this one, and that's actually it for randomizing the deck of cards.

82
00:05:04,880 --> 00:05:10,700
So this was a really quick function and a quick way to do randomization of the contents of an array.