1
00:00:00,520 --> 00:00:03,160
To end up this particular section.

2
00:00:03,280 --> 00:00:08,410
Let's talk about these three methods, and the first one is reduced.

3
00:00:09,270 --> 00:00:13,650
Filter and find guys.

4
00:00:13,650 --> 00:00:22,800
This method are commonly used, so pay attention and make sure that you are familiar with it.

5
00:00:23,550 --> 00:00:29,560
Comparing these methods and then the one that you talk about like shift and on shift.

6
00:00:29,580 --> 00:00:36,090
These ones are easy to use, but for these ones as a beginner, unless you wrap your head around.

7
00:00:36,270 --> 00:00:39,270
But trust me, I'm going to make it pretty easy.

8
00:00:39,780 --> 00:00:41,900
So the first one is reduce.

9
00:00:41,910 --> 00:00:49,290
Before I explain, if you get back to the advanced section of this course, we are going to revisit

10
00:00:49,290 --> 00:00:51,150
these methods again.

11
00:00:51,360 --> 00:00:55,800
So you have two chances to grab the logic.

12
00:00:55,830 --> 00:00:58,590
The first one is reduced.

13
00:00:58,590 --> 00:00:59,910
So let me comment.

14
00:00:59,910 --> 00:01:00,870
This one's.

15
00:01:02,140 --> 00:01:05,500
To avoid a lot of console.log inside my browser.

16
00:01:06,290 --> 00:01:06,590
Okay.

17
00:01:06,610 --> 00:01:08,770
So let's start with the first one.

18
00:01:10,010 --> 00:01:12,200
As reduce.

19
00:01:13,660 --> 00:01:24,040
I can see that any production application out there make use of reduced because I use this method a

20
00:01:24,040 --> 00:01:24,270
lot.

21
00:01:24,280 --> 00:01:28,930
For example, if I want to find some of numbers in a way I use this.

22
00:01:28,930 --> 00:01:37,540
So what actually is a reduced function where the reduced function as the name implies, it is used to

23
00:01:37,540 --> 00:01:41,500
reduce some data into a single value.

24
00:01:41,560 --> 00:01:43,360
So reduce.

25
00:01:44,660 --> 00:01:48,140
Retain a single value.

26
00:01:48,500 --> 00:01:57,230
So let's say that we have an array of, let's say, 1000 record by reduce we can use to flatten it to

27
00:01:57,230 --> 00:01:59,510
retain a single value.

28
00:02:00,080 --> 00:02:08,060
And one good thing about reduce is also is that, well, it doesn't change the original array and I'll

29
00:02:08,060 --> 00:02:11,570
prove to you so once it doesn't change means that it does mutate.

30
00:02:11,570 --> 00:02:16,640
So it does not mutate, meaning change the original array.

31
00:02:17,210 --> 00:02:27,290
So that is one features about reduced function and then this function execute every element in the array.

32
00:02:27,410 --> 00:02:29,390
So let's have a look at this.

33
00:02:29,510 --> 00:02:40,850
Let's say that we have this array of, let's say number of product or let's say quantity of product,

34
00:02:41,270 --> 00:02:42,080
for example.

35
00:02:42,080 --> 00:02:43,790
So let's say that product.

36
00:02:44,700 --> 00:02:55,200
Quantity now is equal to, let's say first one is 1230 and the next one, let's say five, eight two

37
00:02:55,200 --> 00:02:57,330
and let's say four, dude.

38
00:02:57,570 --> 00:03:02,250
So for this data, I can ask you that, please.

39
00:03:02,850 --> 00:03:08,880
Can you tell me how many total quantity are in this particular array?

40
00:03:09,780 --> 00:03:16,280
So to be able to get this one, unless we flatten it, I mean, compress or reduce it.

41
00:03:16,950 --> 00:03:26,340
We are going to reduce the entire array to form a single array when we have reducing OC reduce and always

42
00:03:26,340 --> 00:03:27,480
going to retain.

43
00:03:28,450 --> 00:03:29,290
A value.

44
00:03:29,560 --> 00:03:33,340
So with this one, let's have a look at the syntax first.

45
00:03:33,340 --> 00:03:36,900
Then we come back to this I example.

46
00:03:37,030 --> 00:03:43,000
To be able to find how many quantities are present in this particular array.

47
00:03:43,300 --> 00:03:48,160
So let's have a look at the syntax for array reduced.

48
00:03:48,550 --> 00:03:49,470
Here you go.

49
00:03:49,480 --> 00:03:53,980
Remember, reduce is used to operate on array.

50
00:03:54,040 --> 00:03:57,240
So for the meantime, let's say this is my area.

51
00:03:57,250 --> 00:03:58,390
Let me have a comment here.

52
00:03:58,390 --> 00:04:01,690
Otherwise I'm going to see some error in a console.

53
00:04:01,690 --> 00:04:12,670
So let's say that this is my array and on that I have reduce this syntax and reduce it's a function.

54
00:04:13,400 --> 00:04:21,290
But if a function is being operated on, an object is called method and this function or method takes

55
00:04:21,290 --> 00:04:26,300
in one callback, that's kind of a topic on its own when the callback.

56
00:04:26,300 --> 00:04:27,680
Well, don't worry.

57
00:04:27,680 --> 00:04:31,940
As you proceed on, I will explain more about callback.

58
00:04:32,060 --> 00:04:41,990
For the meantime, take it that this reduced function takes in one argument or parameter and that is

59
00:04:42,320 --> 00:04:43,280
a function.

60
00:04:43,610 --> 00:04:51,410
Remember all the functions that we have in creating, we pass in, for example, a string, a variable

61
00:04:51,410 --> 00:04:57,980
in it, but for built in method like this one insists that you're not going to pass in a string or a

62
00:04:57,980 --> 00:05:01,280
number, but instead I'm going to pass in a function.

63
00:05:02,160 --> 00:05:11,340
So a callback simply means that a function that is passing into an argument of and a function is called

64
00:05:11,340 --> 00:05:12,090
callback.

65
00:05:12,390 --> 00:05:15,390
So here we call something anonymous function.

66
00:05:15,510 --> 00:05:18,420
Well, it's a function without a name.

67
00:05:19,050 --> 00:05:23,970
So, for example, I can write a function like this one, a function like this one.

68
00:05:24,760 --> 00:05:25,420
Yes.

69
00:05:25,450 --> 00:05:27,910
Let's say concert log.

70
00:05:27,910 --> 00:05:29,380
Concert log.

71
00:05:29,380 --> 00:05:34,480
Here we see that this anonymous function because it has no name.

72
00:05:34,900 --> 00:05:35,530
Yes.

73
00:05:35,530 --> 00:05:37,580
So this is what we call callback.

74
00:05:37,600 --> 00:05:42,250
I'm going to pass this function into this particular release function.

75
00:05:42,250 --> 00:05:43,780
So let me remove this one.

76
00:05:43,780 --> 00:05:50,270
And now inside this, remember how you write function because we haven't talked about array.

77
00:05:50,290 --> 00:05:51,730
Sorry, error function.

78
00:05:51,910 --> 00:05:56,290
Let's stick to this normal function syntax to function here.

79
00:05:56,590 --> 00:05:59,530
My parentheses and my carry braces.

80
00:06:00,400 --> 00:06:01,020
Get it?

81
00:06:01,030 --> 00:06:04,240
You see that we pass in only.

82
00:06:05,170 --> 00:06:08,770
A function without a name into this entire function.

83
00:06:08,950 --> 00:06:11,050
So let me have some illustration for you.

84
00:06:11,050 --> 00:06:14,050
See, this is the original function here.

85
00:06:14,080 --> 00:06:20,830
Then we pass in this function in that to get it perfect.

86
00:06:21,040 --> 00:06:26,530
So inside that, inside this particular function called callback.

87
00:06:26,560 --> 00:06:30,760
Now this a callback meaning we pass in into the function.

88
00:06:31,730 --> 00:06:33,890
Of reduce with a callback.

89
00:06:34,250 --> 00:06:40,820
And inside this callback function where remember functions are first class citizens, meaning that we

90
00:06:40,820 --> 00:06:46,750
can pass in a function to a function, we can assign a variable to a function, we can do whatever with

91
00:06:46,760 --> 00:06:47,420
a function.

92
00:06:47,420 --> 00:06:51,380
So that's why function in JavaScript is first class citizen.

93
00:06:51,560 --> 00:06:52,760
Enough about that.

94
00:06:52,760 --> 00:06:58,970
So this callback you're going to take in for parameters or argument.

95
00:06:59,270 --> 00:07:02,390
The first one is what you call accumulator.

96
00:07:03,510 --> 00:07:06,630
The next one is called current value.

97
00:07:08,030 --> 00:07:11,930
The next one is called current index.

98
00:07:12,690 --> 00:07:15,270
The next one is the original.

99
00:07:16,380 --> 00:07:16,950
You see that.

100
00:07:16,950 --> 00:07:23,090
So this particular reduced function had is taking in four argument.

101
00:07:23,490 --> 00:07:32,430
Now after that, after this first callback, if passing this function is also take in another argument.

102
00:07:32,700 --> 00:07:33,890
So here.

103
00:07:34,050 --> 00:07:34,950
Come on.

104
00:07:35,670 --> 00:07:36,600
Like that.

105
00:07:37,490 --> 00:07:41,960
And now you call it as initial value.

106
00:07:41,960 --> 00:07:43,730
Initial value.

107
00:07:44,690 --> 00:07:47,510
I is that like I say, advanced topic.

108
00:07:47,510 --> 00:07:55,040
So I want to expose you here if you get back to advance to explain it more for you to see.

109
00:07:55,310 --> 00:07:57,020
So now have a look here.

110
00:07:57,020 --> 00:08:00,170
Let me have some more room here, I think.

111
00:08:00,590 --> 00:08:04,010
Yes, maybe summarize it so I can see it clearly here.

112
00:08:04,790 --> 00:08:05,240
Good.

113
00:08:05,240 --> 00:08:10,940
So if we see that this function, take two things.

114
00:08:10,970 --> 00:08:14,360
First of all, this actual function here, up to here.

115
00:08:14,690 --> 00:08:15,410
All right.

116
00:08:15,410 --> 00:08:20,330
And now we pass in first argument my function here.

117
00:08:20,360 --> 00:08:25,010
So the first thing and the second one is called the initial value.

118
00:08:25,280 --> 00:08:30,260
So now inside my function body, that's I'm going to write my actual logic.

119
00:08:30,620 --> 00:08:33,950
So let's see now.

120
00:08:36,020 --> 00:08:37,580
For this one.

121
00:08:37,880 --> 00:08:43,760
Let me open my carapace here like that because let me comment out this one to here.

122
00:08:44,360 --> 00:08:44,790
Okay.

123
00:08:44,810 --> 00:08:46,850
So now I have open up my body.

124
00:08:47,090 --> 00:08:53,360
Now let's see what does these things I mean, these variables mean over here.

125
00:08:53,690 --> 00:08:59,420
So the accumulator is a current value in the array.

126
00:09:00,200 --> 00:09:04,160
The current value in the array is called accumulator.

127
00:09:04,980 --> 00:09:12,090
And the current value represent the current element in the array.

128
00:09:12,600 --> 00:09:15,710
We have a value and we have the element.

129
00:09:15,720 --> 00:09:24,540
Well, when I pass in the array able to see what we are referring to and then the current index is the

130
00:09:24,540 --> 00:09:28,530
index number of the current element in the array.

131
00:09:29,150 --> 00:09:36,440
And then this array is array X of the original array and it's called initial value.

132
00:09:36,620 --> 00:09:37,120
Good.

133
00:09:37,130 --> 00:09:40,720
So this is the syntax for.

134
00:09:41,870 --> 00:09:42,630
Reduce.

135
00:09:42,650 --> 00:09:45,830
So now let's come back to the actual logic here.

136
00:09:47,150 --> 00:09:54,950
The logic says that find the Toyota Toyota quantity.

137
00:09:55,940 --> 00:09:59,150
In the array like that.

138
00:09:59,150 --> 00:10:01,460
So how are we going to do it?

139
00:10:01,850 --> 00:10:05,750
Remember, it takes an array and this is my array, right?

140
00:10:05,750 --> 00:10:07,640
So I'll come up here and see that.

141
00:10:07,730 --> 00:10:14,180
Put that quantity my array dot reduce then a function.

142
00:10:14,300 --> 00:10:15,410
Now here you go.

143
00:10:15,650 --> 00:10:17,060
Look at IntelliSense.

144
00:10:17,240 --> 00:10:23,390
It takes in callback function, previous value and the current current value, right?

145
00:10:23,390 --> 00:10:28,370
So you can make some as a pivot value and then current value the same thing.

146
00:10:28,880 --> 00:10:29,390
Good.

147
00:10:29,390 --> 00:10:35,960
So now inside this, I'm going to pass in my callback function as an element function here.

148
00:10:36,530 --> 00:10:40,010
The second element is my initial value.

149
00:10:40,460 --> 00:10:44,870
So I want to start for the meantime, let's give it a zero.

150
00:10:44,900 --> 00:10:46,460
I've explained to you very soon.

151
00:10:47,000 --> 00:10:54,380
Then inside my callback function, I have access to my accumulator as a pivot value.

152
00:10:55,850 --> 00:10:56,840
Current.

153
00:10:57,570 --> 00:10:58,560
Value.

154
00:10:59,190 --> 00:11:01,230
And then this one going to be the.

155
00:11:03,280 --> 00:11:08,110
Next, I'm going to be the index and then the original array.

156
00:11:08,590 --> 00:11:09,070
Okay.

157
00:11:09,070 --> 00:11:14,320
So now inside my function, buddy, let's try to console.log these ones for you to see.

158
00:11:15,010 --> 00:11:24,250
So first one is console.log and let me call this one as the first one as my accumulator.

159
00:11:26,280 --> 00:11:28,410
Then I would inject.

160
00:11:29,610 --> 00:11:31,860
The accumulator.

161
00:11:31,860 --> 00:11:36,660
And so when I console like it, you will know what values represent these ones.

162
00:11:37,110 --> 00:11:40,380
Let me also copy this one and now paste it.

163
00:11:41,730 --> 00:11:42,480
Four times.

164
00:11:42,480 --> 00:11:44,290
Now they face this one.

165
00:11:44,310 --> 00:11:46,680
Current value here, current value.

166
00:11:46,680 --> 00:11:48,180
And it's my current value.

167
00:11:48,420 --> 00:11:57,750
This is my index and is my index and is my index and is array and opacity array and then array.

168
00:11:57,900 --> 00:11:59,670
So now moment of truth.

169
00:11:59,700 --> 00:12:06,960
So when I save this one, let's check the console, open the console, and now let's refresh it.

170
00:12:06,990 --> 00:12:07,650
Good.

171
00:12:08,100 --> 00:12:12,060
It will see that it has repeated how many times.

172
00:12:12,450 --> 00:12:15,060
For the meantime, let me make a little bit, I think.

173
00:12:15,060 --> 00:12:17,250
Let's have a list to record here.

174
00:12:18,260 --> 00:12:20,600
So I can repeat it two times.

175
00:12:21,290 --> 00:12:27,800
We see that the function has been called on each of the items in a way, because we have two records

176
00:12:27,800 --> 00:12:29,970
here, 12 and 30.

177
00:12:29,990 --> 00:12:34,160
So this function will call two times and that's why we have it here.

178
00:12:34,820 --> 00:12:39,770
So the first upon the first loop here, we have this one.

179
00:12:40,670 --> 00:12:41,600
Let me show you.

180
00:12:41,630 --> 00:12:42,440
I'll point at first.

181
00:12:42,440 --> 00:12:42,890
Look.

182
00:12:44,040 --> 00:12:44,760
This is it.

183
00:12:44,790 --> 00:12:46,320
The first one is this one.

184
00:12:46,770 --> 00:12:49,230
And the second loop is this one.

185
00:12:49,620 --> 00:12:53,460
Now, let's have a look what the accumulator means.

186
00:12:54,600 --> 00:12:58,050
So the accumulator here is zero.

187
00:12:58,080 --> 00:12:59,670
Why is zero?

188
00:12:59,700 --> 00:13:01,500
Even though we don't have zero here.

189
00:13:01,860 --> 00:13:09,480
So the accumulator is a current value in the array because you provided the initial value here.

190
00:13:09,510 --> 00:13:17,490
This initial value here right now is my current my my the current value in the array called accumulator.

191
00:13:17,730 --> 00:13:24,330
If I pass in here, let's say ten when I save it that I have the accumulator here.

192
00:13:24,360 --> 00:13:27,450
Suppose is is ten good.

193
00:13:27,450 --> 00:13:30,350
So now initial value by default.

194
00:13:30,360 --> 00:13:31,890
Let's keep it at zero.

195
00:13:31,920 --> 00:13:33,450
You explain very soon.

196
00:13:33,720 --> 00:13:41,820
Now you know what the accumulator mean whereby the current value has given me 12 and this is it is a

197
00:13:41,820 --> 00:13:46,180
current value before the event, the array loop or the first loop.

198
00:13:46,200 --> 00:13:47,700
That's my current value.

199
00:13:47,760 --> 00:13:50,970
So the current value is a current element in the array.

200
00:13:51,330 --> 00:13:53,280
This is my current element in the array.

201
00:13:53,760 --> 00:13:58,890
And then the next one is going to be the index.

202
00:14:00,180 --> 00:14:03,060
At what index does this work case?

203
00:14:03,090 --> 00:14:04,890
It works at index zero.

204
00:14:04,920 --> 00:14:06,180
That's why I have it here.

205
00:14:06,560 --> 00:14:07,060
Here.

206
00:14:07,470 --> 00:14:12,690
Then the origin array, which is this array you pass in here, which is this.

207
00:14:13,630 --> 00:14:21,390
But on the second loop, we have something where here the accumulator is undefined because we are not

208
00:14:21,390 --> 00:14:23,280
adding up by default.

209
00:14:23,610 --> 00:14:25,350
We have zero here.

210
00:14:25,380 --> 00:14:30,510
Next loop is trying to add some logic here, but we have not yet implemented that.

211
00:14:30,510 --> 00:14:32,070
That's why we have undefined.

212
00:14:32,400 --> 00:14:39,450
So takeaway here is that know what these parameters mean in this particular function callback function

213
00:14:39,450 --> 00:14:40,590
to be more precise.

214
00:14:40,770 --> 00:14:41,220
Good.

215
00:14:41,460 --> 00:14:43,340
So now we got that one.

216
00:14:43,350 --> 00:14:48,120
Now we know that the zero is a starting point.

217
00:14:48,120 --> 00:14:49,050
At what point?

218
00:14:49,050 --> 00:14:52,290
You want to start adding your array at zero.

219
00:14:52,530 --> 00:14:55,530
So now I can remove this one.

220
00:14:55,860 --> 00:15:05,430
And next is I want to return from this function that I want to add the accumulator, which is this one.

221
00:15:07,870 --> 00:15:10,690
Meaning the first one, this accumulator.

222
00:15:10,720 --> 00:15:18,520
So now I want to add plus my current value, which is current value as that.

223
00:15:18,850 --> 00:15:29,500
So with this one, if I assign the is the response or the results, a variable call answer is equal

224
00:15:29,500 --> 00:15:30,040
to this.

225
00:15:30,800 --> 00:15:33,530
When I console.log.

226
00:15:33,530 --> 00:15:35,000
The answer.

227
00:15:35,910 --> 00:15:47,040
We see we have the magic 42 because when we add 12 plus 30 is what, 42, that is the reduced for you.

228
00:15:47,820 --> 00:15:49,920
So with this one.

229
00:15:51,810 --> 00:15:58,500
We can ignore the index, remove it and remove the array because we don't need it.

230
00:15:59,210 --> 00:15:59,780
Yes.

231
00:15:59,780 --> 00:16:02,990
For the meantime, let's ignore those agreements.

232
00:16:03,020 --> 00:16:04,790
So this is how we do this.

233
00:16:04,880 --> 00:16:14,810
If I had, let's say, 100 to the array, I'm going to get 142, meaning the the logic is working perfectly.

234
00:16:15,170 --> 00:16:16,760
So let me go over again for a bit.

235
00:16:16,760 --> 00:16:18,260
Understand what we are referring to here.

236
00:16:18,290 --> 00:16:21,470
Let me bring it back to these two numbers here.

237
00:16:22,040 --> 00:16:27,960
This is how it runs, dude, at the first run before the application runs.

238
00:16:27,980 --> 00:16:31,910
The this accumulator here represents this zero.

239
00:16:32,300 --> 00:16:34,160
You get it perfect.

240
00:16:34,460 --> 00:16:38,800
And this is the current value here represents the current value.

241
00:16:38,810 --> 00:16:40,130
I have it here.

242
00:16:41,220 --> 00:16:48,150
So inside our function body here, we are saying that at the first run we should add the accumulator,

243
00:16:48,150 --> 00:16:49,140
which is this.

244
00:16:49,470 --> 00:16:55,890
So behind the scene is zero plus what the current value and which is 12.

245
00:16:56,340 --> 00:16:59,220
So I have zero plus 12.

246
00:16:59,850 --> 00:17:00,690
Do you get it?

247
00:17:00,780 --> 00:17:01,500
Yes.

248
00:17:01,980 --> 00:17:03,750
Then on the next loop.

249
00:17:04,780 --> 00:17:08,380
This accumulator now has become, what, 12?

250
00:17:09,369 --> 00:17:10,150
Okay.

251
00:17:10,180 --> 00:17:12,849
So the next current value is 30.

252
00:17:13,180 --> 00:17:18,160
Then you're going to add 12 plus 30, giving me 42.