1
00:00:01,140 --> 00:00:02,910
‫Now, before you can start building

2
00:00:02,910 --> 00:00:05,160
‫any meaningful React application,

3
00:00:05,160 --> 00:00:07,530
‫you need to be a true master

4
00:00:07,530 --> 00:00:11,070
‫of the three functional array methods in JavaScript

5
00:00:11,070 --> 00:00:14,220
‫which are map, filter, and reduce.

6
00:00:14,220 --> 00:00:16,860
‫And I call them functional array methods

7
00:00:16,860 --> 00:00:20,910
‫because these methods do not mutate the original array

8
00:00:20,910 --> 00:00:25,830
‫but do instead return a new array based on the original one.

9
00:00:25,830 --> 00:00:27,510
‫So in this lecture, let's start

10
00:00:27,510 --> 00:00:30,123
‫by taking a look at the map method.

11
00:00:31,860 --> 00:00:35,880
‫And to start, let's actually take out all this code here

12
00:00:35,880 --> 00:00:40,230
‫because we do no longer need it now

13
00:00:40,230 --> 00:00:43,050
‫because from now on, we will actually start working

14
00:00:43,050 --> 00:00:45,153
‫with the entire books array.

15
00:00:46,620 --> 00:00:49,860
‫So let me take that out, give it a save

16
00:00:49,860 --> 00:00:52,668
‫and then here we have all this panel

17
00:00:52,668 --> 00:00:55,803
‫and this Quokka output here cleaned up a bit.

18
00:00:56,850 --> 00:00:59,760
‫So let's again pretend that we are getting our books

19
00:00:59,760 --> 00:01:04,713
‫from this fictional API using the getBooks function.

20
00:01:06,060 --> 00:01:07,160
‫So let's say getBooks.

21
00:01:08,880 --> 00:01:10,350
‫And so remember

22
00:01:10,350 --> 00:01:13,440
‫that this will then give us the entire books array.

23
00:01:13,440 --> 00:01:18,360
‫And so now we are ready to use the map method on that array.

24
00:01:18,360 --> 00:01:21,510
‫So what does the map method actually do?

25
00:01:21,510 --> 00:01:25,380
‫Well, basically, the map method will loop over an array

26
00:01:25,380 --> 00:01:26,850
‫and return a new array

27
00:01:26,850 --> 00:01:30,060
‫with the same length with some operation applied

28
00:01:30,060 --> 00:01:33,033
‫to each of the elements of the original array.

29
00:01:34,500 --> 00:01:35,790
‫So just to illustrate that,

30
00:01:35,790 --> 00:01:39,000
‫let's say we have this very simple array

31
00:01:39,000 --> 00:01:41,460
‫and on that, we can call map.

32
00:01:41,460 --> 00:01:44,520
‫And so now map expects a callback function,

33
00:01:44,520 --> 00:01:46,440
‫which is a function that will be called

34
00:01:46,440 --> 00:01:50,040
‫for each of these elements of the array.

35
00:01:50,040 --> 00:01:52,410
‫And so now here are these arrow functions that we talked

36
00:01:52,410 --> 00:01:54,960
‫about earlier become really handy,

37
00:01:54,960 --> 00:01:58,953
‫'cause now we can simply use an arrow function here,

38
00:02:00,120 --> 00:02:01,590
‫for example, like this.

39
00:02:01,590 --> 00:02:04,050
‫And I will explain in a second what this does.

40
00:02:04,050 --> 00:02:06,800
‫But for now, let's just take a look at the output here.

41
00:02:08,070 --> 00:02:11,253
‫Actually, let's save this in some variable.

42
00:02:13,140 --> 00:02:17,070
‫And so what you see here is that we get an array,

43
00:02:17,070 --> 00:02:21,000
‫which is basically double the previous array.

44
00:02:21,000 --> 00:02:22,833
‫So what happened here?

45
00:02:23,820 --> 00:02:26,550
‫So again, we passed in this callback function,

46
00:02:26,550 --> 00:02:29,820
‫which is a function that gets called for each

47
00:02:29,820 --> 00:02:32,160
‫of the elements of this array.

48
00:02:32,160 --> 00:02:35,400
‫And in this callback function, the element parameter

49
00:02:35,400 --> 00:02:38,790
‫will always be the current element of the array.

50
00:02:38,790 --> 00:02:43,290
‫So for this first element here, el will become one.

51
00:02:43,290 --> 00:02:47,520
‫And then here we simply return one times two, which is two.

52
00:02:47,520 --> 00:02:50,070
‫So that's then placed in the array and we move on

53
00:02:50,070 --> 00:02:51,243
‫to the next one.

54
00:02:52,140 --> 00:02:53,910
‫So then here we have two.

55
00:02:53,910 --> 00:02:57,060
‫So therefore, element becomes two, two times two is four.

56
00:02:57,060 --> 00:02:59,610
‫And so that then gets placed in the array

57
00:02:59,610 --> 00:03:01,410
‫and like this, it goes all the way

58
00:03:01,410 --> 00:03:03,240
‫until the end of the array.

59
00:03:03,240 --> 00:03:04,230
‫And so again,

60
00:03:04,230 --> 00:03:07,620
‫the map method is basically to create a new array

61
00:03:07,620 --> 00:03:11,250
‫based on the original array with some operation applied

62
00:03:11,250 --> 00:03:13,983
‫to each element of the original array.

63
00:03:15,000 --> 00:03:17,280
‫So this was just some demo here

64
00:03:17,280 --> 00:03:20,550
‫but now what I want to do is to create an array

65
00:03:20,550 --> 00:03:23,910
‫that contains simply all the titles of all the books.

66
00:03:23,910 --> 00:03:25,890
‫So instead of having this huge array,

67
00:03:25,890 --> 00:03:28,140
‫which contains all these objects,

68
00:03:28,140 --> 00:03:32,733
‫all I want is an array, which simply has all the titles.

69
00:03:36,360 --> 00:03:40,357
‫So let's say titles equals books.map.

70
00:03:42,210 --> 00:03:45,030
‫And now again, our callback function.

71
00:03:45,030 --> 00:03:49,020
‫And here, let's call each element a book

72
00:03:49,020 --> 00:03:52,770
‫because well, we have this book's array,

73
00:03:52,770 --> 00:03:57,770
‫which is well, actually it isn't anything.

74
00:03:59,280 --> 00:04:01,710
‫And that's because we have this arrow here.

75
00:04:01,710 --> 00:04:05,910
‫Let's just return something here so that the arrow ends.

76
00:04:05,910 --> 00:04:10,143
‫No. Ah, but yeah, this is not the books array anyway.

77
00:04:12,210 --> 00:04:15,480
‫Yeah, so here we have this array with all these objects.

78
00:04:15,480 --> 00:04:17,700
‫And so now as we loop over this array,

79
00:04:17,700 --> 00:04:22,233
‫each of the elements is one book object, right?

80
00:04:23,640 --> 00:04:25,620
‫So this is the argument to the function.

81
00:04:25,620 --> 00:04:28,380
‫And then remember is what we return.

82
00:04:28,380 --> 00:04:30,273
‫So what do we want to return?

83
00:04:31,350 --> 00:04:34,800
‫Well, simply, book.title.

84
00:04:34,800 --> 00:04:37,110
‫Now as we check out what titles is,

85
00:04:37,110 --> 00:04:40,863
‫we see it is this array, which only contains the titles.

86
00:04:41,730 --> 00:04:45,420
‫Beautiful. So that was pretty simple, right?

87
00:04:45,420 --> 00:04:48,060
‫So the operation doesn't, of course, have to be

88
00:04:48,060 --> 00:04:50,340
‫like a math operation like this.

89
00:04:50,340 --> 00:04:51,930
‫Here simply what we return

90
00:04:51,930 --> 00:04:54,570
‫for each book element is book.title.

91
00:04:54,570 --> 00:04:58,500
‫And so that then gets placed into the array.

92
00:04:58,500 --> 00:05:00,090
‫So the new output array,

93
00:05:00,090 --> 00:05:03,060
‫which then gets stored into these titles.

94
00:05:03,060 --> 00:05:04,950
‫Okay, let's see another example.

95
00:05:04,950 --> 00:05:08,940
‫And let's say that we wanted to basically only

96
00:05:08,940 --> 00:05:12,873
‫get the essential data for each of these book objects.

97
00:05:13,950 --> 00:05:18,420
‫So we want an array with objects still, but now we only want

98
00:05:18,420 --> 00:05:20,883
‫like the title and the author maybe.

99
00:05:21,990 --> 00:05:24,130
‫So let's say essentialData

100
00:05:26,790 --> 00:05:29,973
‫should be books.map.

101
00:05:31,050 --> 00:05:33,990
‫And again, I'm calling each one the book.

102
00:05:33,990 --> 00:05:37,230
‫And now here what we want to return is a new object,

103
00:05:37,230 --> 00:05:39,903
‫which contains, again, the title and the author.

104
00:05:40,830 --> 00:05:42,030
‫Now, in an arrow function,

105
00:05:42,030 --> 00:05:44,667
‫whenever we use these curly braces like this,

106
00:05:44,667 --> 00:05:46,350
‫the arrow function will think

107
00:05:46,350 --> 00:05:49,650
‫that this is a declaration block, right?

108
00:05:49,650 --> 00:05:51,870
‫So this is not returning an object.

109
00:05:51,870 --> 00:05:54,810
‫So if we wrote like x: 23,

110
00:05:54,810 --> 00:05:56,820
‫this would not be returning anything

111
00:05:56,820 --> 00:06:00,000
‫because again, the arrow function simply thinks

112
00:06:00,000 --> 00:06:03,540
‫that this here is the function block.

113
00:06:03,540 --> 00:06:05,310
‫So we can solve this in two ways.

114
00:06:05,310 --> 00:06:07,320
‫First, we can simply then return the object

115
00:06:07,320 --> 00:06:08,583
‫from here manually.

116
00:06:09,480 --> 00:06:14,340
‫So we can now say title is book.title

117
00:06:16,830 --> 00:06:21,003
‫and author is book.author.

118
00:06:22,080 --> 00:06:23,493
‫Let's take a look at that.

119
00:06:25,050 --> 00:06:28,410
‫And yeah, that works.

120
00:06:28,410 --> 00:06:29,610
‫So now for each of the books,

121
00:06:29,610 --> 00:06:32,673
‫we only have the author and the title and nothing else.

122
00:06:33,960 --> 00:06:36,420
‫So that worked, so that's great.

123
00:06:36,420 --> 00:06:39,390
‫But yeah, here we have a bit too much code.

124
00:06:39,390 --> 00:06:41,583
‫So let's get rid of this return again.

125
00:06:42,780 --> 00:06:45,420
‫And so the trick is to simply wrap this here

126
00:06:45,420 --> 00:06:46,923
‫in a parenthesis.

127
00:06:49,110 --> 00:06:50,643
‫So we don't need any of this.

128
00:06:52,110 --> 00:06:53,940
‫And so now that works the same.

129
00:06:53,940 --> 00:06:56,730
‫And so by using these parenthesis first instead

130
00:06:56,730 --> 00:07:00,450
‫of the curly braces, then again we are automatically

131
00:07:00,450 --> 00:07:02,883
‫returning this object from here.

132
00:07:03,870 --> 00:07:05,790
‫So just like here we are returning the result

133
00:07:05,790 --> 00:07:06,870
‫of this operation

134
00:07:06,870 --> 00:07:10,413
‫and here we are returning simply this value right here.

135
00:07:11,310 --> 00:07:14,370
‫And of course, we could also do some computations in here.

136
00:07:14,370 --> 00:07:18,360
‫For example, let's say we wanted the reviewsCount.

137
00:07:18,360 --> 00:07:23,360
‫Now here we could get back this function that we did before.

138
00:07:23,850 --> 00:07:25,023
‫Let's just copy that.

139
00:07:29,310 --> 00:07:34,200
‫And then let's just call getTotalReviewCount

140
00:07:34,200 --> 00:07:35,373
‫for the current book.

141
00:07:37,410 --> 00:07:41,610
‫And so now, yeah, we get all of this data that we wanted,

142
00:07:41,610 --> 00:07:43,470
‫but again it's just the essential data,

143
00:07:43,470 --> 00:07:47,160
‫just basically a small part of the total data

144
00:07:47,160 --> 00:07:50,100
‫that we had before in the books array.

145
00:07:50,100 --> 00:07:53,220
‫So these are just a few use cases that are going to become

146
00:07:53,220 --> 00:07:56,550
‫in handy for the rest of the React course.

147
00:07:56,550 --> 00:07:59,520
‫And if this was maybe a bit too fast,

148
00:07:59,520 --> 00:08:01,980
‫so if you didn't know this map method before

149
00:08:01,980 --> 00:08:04,623
‫and you didn't quite understand it yet,

150
00:08:05,490 --> 00:08:07,830
‫that's understandable because this was more

151
00:08:07,830 --> 00:08:11,190
‫of a crash course on this map method.

152
00:08:11,190 --> 00:08:14,310
‫And so if somehow it hasn't clicked for you yet,

153
00:08:14,310 --> 00:08:17,880
‫you can just check out the documentation on MDN.

154
00:08:17,880 --> 00:08:20,160
‫Or of course, you can also check out

155
00:08:20,160 --> 00:08:21,930
‫my complete JavaScript course

156
00:08:21,930 --> 00:08:25,170
‫because there I explain it all in a lot more detail.

157
00:08:25,170 --> 00:08:27,660
‫But for this short introduction, this should be enough.

158
00:08:27,660 --> 00:08:28,860
‫And so let's now move on

159
00:08:28,860 --> 00:08:32,493
‫to the next important method, which is the filter method.