1
00:00:01,080 --> 00:00:03,000
‫And now, the last array method

2
00:00:03,000 --> 00:00:04,830
‫that I want to quickly talk about,

3
00:00:04,830 --> 00:00:07,170
‫because we also use it quite frequently

4
00:00:07,170 --> 00:00:10,833
‫in React applications, is the sort method.

5
00:00:12,030 --> 00:00:13,380
‫And as the name says,

6
00:00:13,380 --> 00:00:16,383
‫we can use this method to sort an array.

7
00:00:18,000 --> 00:00:21,633
‫So let's start with a small demo array, basically.

8
00:00:25,320 --> 00:00:27,363
‫Let's just give it a few numbers,

9
00:00:30,150 --> 00:00:33,753
‫and let's here create a new array based on that array.

10
00:00:34,590 --> 00:00:37,650
‫So x.sort,

11
00:00:37,650 --> 00:00:41,290
‫and here we need to pass an a function with two arguments

12
00:00:42,420 --> 00:00:45,720
‫and we usually just call them a and b.

13
00:00:45,720 --> 00:00:48,240
‫And I will actually not really go into

14
00:00:48,240 --> 00:00:51,990
‫how this algorithm and how this method works here,

15
00:00:51,990 --> 00:00:55,260
‫but let me just tell you that in order to sort this array

16
00:00:55,260 --> 00:00:59,613
‫in an ascending way, we do a minus b.

17
00:01:01,230 --> 00:01:02,063
‫Okay?

18
00:01:02,063 --> 00:01:05,520
‫And now let's, oh, and actually we cannot do this

19
00:01:05,520 --> 00:01:09,423
‫because we already used that apparently before.

20
00:01:12,990 --> 00:01:15,150
‫Okay, and now let's take a look at sorted.

21
00:01:15,150 --> 00:01:19,260
‫And indeed, it is now sorted in an ascending way.

22
00:01:19,260 --> 00:01:21,300
‫So starting from the lowest number,

23
00:01:21,300 --> 00:01:23,550
‫all the way to the highest.

24
00:01:23,550 --> 00:01:26,970
‫Now very, very briefly, what happens here is that

25
00:01:26,970 --> 00:01:29,910
‫basically JavaScript goes over the array,

26
00:01:29,910 --> 00:01:33,810
‫so it loops through it, and it caught this function here.

27
00:01:33,810 --> 00:01:38,460
‫And a and b are always the current value and the next value.

28
00:01:38,460 --> 00:01:40,410
‫And then here in the callback function,

29
00:01:40,410 --> 00:01:42,780
‫when we return a negative value,

30
00:01:42,780 --> 00:01:45,750
‫then these two numbers will basically be sorted

31
00:01:45,750 --> 00:01:47,310
‫in an ascending way.

32
00:01:47,310 --> 00:01:50,790
‫So the small number will come first,

33
00:01:50,790 --> 00:01:54,030
‫and then the biggest number will come afterwards.

34
00:01:54,030 --> 00:01:55,710
‫And if we do the opposite,

35
00:01:55,710 --> 00:01:58,230
‫so if we return a positive number,

36
00:01:58,230 --> 00:02:00,750
‫then while the opposite will happen,

37
00:02:00,750 --> 00:02:04,980
‫then these two values will be sorted in a descending way.

38
00:02:04,980 --> 00:02:08,850
‫And so, we return these positive or negative numbers

39
00:02:08,850 --> 00:02:11,700
‫simply by subtracting one minus the other.

40
00:02:11,700 --> 00:02:14,970
‫So here a and b in this example will be three and seven,

41
00:02:14,970 --> 00:02:19,140
‫and so then three minus seven is minus four.

42
00:02:19,140 --> 00:02:23,010
‫And so, yeah, they will then be sorted in an ascending way,

43
00:02:23,010 --> 00:02:24,570
‫as I said before.

44
00:02:24,570 --> 00:02:25,950
‫But that's not really important.

45
00:02:25,950 --> 00:02:29,220
‫You should just basically follow this as a recipe.

46
00:02:29,220 --> 00:02:31,470
‫So when you do a minus b,

47
00:02:31,470 --> 00:02:33,720
‫it will be sorted in an ascending way.

48
00:02:33,720 --> 00:02:37,053
‫When you do b minus a, then descending.

49
00:02:39,330 --> 00:02:43,083
‫So indeed, now, we start with nine and with one.

50
00:02:43,980 --> 00:02:47,400
‫Now, what's very surprising about the sort method

51
00:02:47,400 --> 00:02:51,783
‫is what happens when we now check out arr.

52
00:02:52,830 --> 00:02:57,150
‫So arr itself has been sorted, as well, right?

53
00:02:57,150 --> 00:03:01,530
‫So it also now starts from nine, ends in one,

54
00:03:01,530 --> 00:03:03,930
‫and we switch this around,

55
00:03:03,930 --> 00:03:08,250
‫then you see that both these arrays are exactly the same.

56
00:03:08,250 --> 00:03:09,933
‫So what happened here?

57
00:03:10,830 --> 00:03:12,360
‫Well, what happened is that

58
00:03:12,360 --> 00:03:15,600
‫unlike the map filter and reduce method,

59
00:03:15,600 --> 00:03:18,000
‫this is not a functional method.

60
00:03:18,000 --> 00:03:21,720
‫So this is actually a method that mutates,

61
00:03:21,720 --> 00:03:24,450
‫so it changes the original array.

62
00:03:24,450 --> 00:03:27,660
‫And so we actually didn't even have to store this

63
00:03:27,660 --> 00:03:29,700
‫in a new array, right?

64
00:03:29,700 --> 00:03:34,680
‫'Cause it already changed this original array anyway.

65
00:03:34,680 --> 00:03:37,830
‫However, usually we do not want that to happen,

66
00:03:37,830 --> 00:03:40,770
‫especially in a front end framework like React,

67
00:03:40,770 --> 00:03:45,060
‫which really does not like us mutating data.

68
00:03:45,060 --> 00:03:47,100
‫So, a nice trick that we can do here

69
00:03:47,100 --> 00:03:50,970
‫is to first take a copy of the array,

70
00:03:50,970 --> 00:03:55,920
‫simply by doing array.slice and open and close.

71
00:03:55,920 --> 00:03:59,160
‫And so this will then basically return a brand new array,

72
00:03:59,160 --> 00:04:00,597
‫which is a copy of this one.

73
00:04:00,597 --> 00:04:05,597
‫And so then, on that array, we can chain the sort method.

74
00:04:06,330 --> 00:04:07,800
‫And so you see that with this,

75
00:04:07,800 --> 00:04:11,820
‫the sorted is still the, yeah, the sorted array,

76
00:04:11,820 --> 00:04:15,480
‫but arr is is now back to being the original one.

77
00:04:15,480 --> 00:04:19,020
‫So now it's not been affected because, yeah,

78
00:04:19,020 --> 00:04:21,630
‫before sorting we took a copy

79
00:04:21,630 --> 00:04:26,630
‫and then we sorted only this copy, but not the arr itself.

80
00:04:30,660 --> 00:04:31,493
‫Okay?

81
00:04:31,493 --> 00:04:34,380
‫But now going back to a more practical examples,

82
00:04:34,380 --> 00:04:37,320
‫because rarely we have an array like this

83
00:04:37,320 --> 00:04:38,610
‫that we need to sort,

84
00:04:38,610 --> 00:04:42,540
‫but usually we always have an array of objects.

85
00:04:42,540 --> 00:04:45,885
‫So that's very common that we have to sort that.

86
00:04:45,885 --> 00:04:48,360
‫And so let's say sortedByPages.

87
00:04:52,980 --> 00:04:55,465
‫So as you can imagine, we will now sort

88
00:04:55,465 --> 00:04:59,553
‫the entire books array by the number of pages.

89
00:05:00,690 --> 00:05:04,470
‫So books.slice, again,

90
00:05:04,470 --> 00:05:06,333
‫very important to take a copy here.

91
00:05:08,340 --> 00:05:10,413
‫Then here we just follow that recipe.

92
00:05:11,580 --> 00:05:15,030
‫So a, b, and let's say we want a descending one,

93
00:05:15,030 --> 00:05:18,090
‫and so then we say b,

94
00:05:18,090 --> 00:05:20,700
‫but now it's not just b minus a, right?

95
00:05:20,700 --> 00:05:24,240
‫Because these are now the two book objects.

96
00:05:24,240 --> 00:05:26,880
‫And of course we cannot subtract those.

97
00:05:26,880 --> 00:05:29,523
‫So we need, still, a numeric value here.

98
00:05:30,390 --> 00:05:32,280
‫And since we want to sort by pages,

99
00:05:32,280 --> 00:05:33,580
‫we do b.pages

100
00:05:34,710 --> 00:05:37,350
‫minus a.pages,

101
00:05:37,350 --> 00:05:40,410
‫and now sorted by pages,

102
00:05:40,410 --> 00:05:42,480
‫and, yeah,

103
00:05:42,480 --> 00:05:44,103
‫cannot really see that there.

104
00:05:46,440 --> 00:05:49,350
‫Let's close all of these.

105
00:05:49,350 --> 00:05:50,183
‫Yeah.

106
00:05:51,600 --> 00:05:54,660
‫So we start with "Lord of the Rings,"

107
00:05:54,660 --> 00:05:56,670
‫which has 1200 something,

108
00:05:56,670 --> 00:05:57,783
‫then 800,

109
00:05:58,950 --> 00:06:00,093
‫600,

110
00:06:01,517 --> 00:06:02,350
‫200,

111
00:06:03,450 --> 00:06:08,450
‫and then the shortest one is "Harry Potter," with 223 pages.

112
00:06:08,820 --> 00:06:10,860
‫So that worked perfectly.

113
00:06:10,860 --> 00:06:13,743
‫Let's do the opposite, just to be sure.

114
00:06:16,800 --> 00:06:19,893
‫And, yeah, so now "Harry Potter" is the first one in line,

115
00:06:20,742 --> 00:06:24,900
‫and yeah, it's now sorted in an ascending way.

116
00:06:24,900 --> 00:06:26,550
‫So we do this all the time,

117
00:06:26,550 --> 00:06:29,880
‫and so now when I do this inside the React course,

118
00:06:29,880 --> 00:06:32,970
‫I will no longer need to explain what we're doing,

119
00:06:32,970 --> 00:06:35,613
‫and will simply follow this recipe.