Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,450 --> 00:00:04,700
Let's now solve together a real problem
2
00:00:04,700 --> 00:00:07,470
using the framework that we just learned about
3
00:00:07,470 --> 00:00:12,470
and also tools such as Google, Stack Overflow and MDN.
4
00:00:14,420 --> 00:00:17,270
And here is our very simple problem.
5
00:00:17,270 --> 00:00:20,630
So let's say that we work for a company that builds
6
00:00:20,630 --> 00:00:25,630
a smart home thermometer and our most recent task is this.
7
00:00:26,740 --> 00:00:31,310
So given an array of temperatures of one day,
8
00:00:31,310 --> 00:00:34,910
calculate the temperature amplitude and keep in mind
9
00:00:34,910 --> 00:00:38,520
that sometimes there might be a sensor error.
10
00:00:38,520 --> 00:00:42,000
And they give us this array of data.
11
00:00:42,000 --> 00:00:43,670
So what should we do here?
12
00:00:43,670 --> 00:00:45,740
How do we solve this problem?
13
00:00:45,740 --> 00:00:48,590
And this is actually a pretty simple problem,
14
00:00:48,590 --> 00:00:51,800
but it still shows us the fundamental logic
15
00:00:51,800 --> 00:00:53,480
of solving problems.
16
00:00:53,480 --> 00:00:56,750
Again, using the framework that I just showed you before.
17
00:00:56,750 --> 00:01:00,680
And so the two most important parts of that is to understand
18
00:01:00,680 --> 00:01:03,640
the problem and to breaking up the problem
19
00:01:03,640 --> 00:01:06,010
into smaller sub problems.
20
00:01:06,010 --> 00:01:07,850
So let's start by understanding the problem
21
00:01:07,850 --> 00:01:11,020
a little bit better by asking some questions.
22
00:01:11,020 --> 00:01:13,870
So first of all, they want us to calculate
23
00:01:13,870 --> 00:01:17,993
the temperature amplitude, but what actually is that?
24
00:01:18,840 --> 00:01:21,260
So we can write that down here.
25
00:01:21,260 --> 00:01:25,153
What is temperature amplitude?
26
00:01:26,370 --> 00:01:29,250
And the answer to that is that it's the difference between
27
00:01:29,250 --> 00:01:32,633
the highest and the lowest temperatures in the array.
28
00:01:34,420 --> 00:01:39,420
So answer difference between highest and lowest temp.
29
00:01:43,780 --> 00:01:46,570
And so this is the value that we will have to return
30
00:01:46,570 --> 00:01:48,240
from the function.
31
00:01:48,240 --> 00:01:52,200
Then we might ask, well, that's quite nice,
32
00:01:52,200 --> 00:01:54,590
but how do we actually calculate the highest
33
00:01:54,590 --> 00:01:57,440
and the lowest temperature in an array?
34
00:01:57,440 --> 00:01:59,900
So let's write that question.
35
00:01:59,900 --> 00:02:04,900
So how to compute the max and mean temperatures.
36
00:02:10,050 --> 00:02:12,400
And finally, they also tell us here
37
00:02:12,400 --> 00:02:16,650
that sometimes there might be a sensor error.
38
00:02:16,650 --> 00:02:19,493
So what does a sensor error look like?
39
00:02:21,500 --> 00:02:26,500
So what a sensor error and what to do when one occurs?
40
00:02:31,230 --> 00:02:35,170
And here the answer is probably to just ignore the error.
41
00:02:35,170 --> 00:02:37,520
Now, here from our data, we can actually see
42
00:02:37,520 --> 00:02:39,330
what an error looks like.
43
00:02:39,330 --> 00:02:43,720
So it's this string here, which says error, okay?
44
00:02:43,720 --> 00:02:46,710
But it's good to have an idea of all of these questions
45
00:02:46,710 --> 00:02:49,120
so that we now really understand the problem
46
00:02:49,120 --> 00:02:50,710
that we need to solve.
47
00:02:50,710 --> 00:02:52,540
And so I think with this here,
48
00:02:52,540 --> 00:02:54,810
we do have a pretty good idea.
49
00:02:54,810 --> 00:02:58,010
So now given our understanding of the problem,
50
00:02:58,010 --> 00:03:02,390
let's try to break the problem up into smaller sub problems.
51
00:03:02,390 --> 00:03:06,100
So first, we need to make it so that the sensor errors
52
00:03:06,100 --> 00:03:07,530
are actually ignored.
53
00:03:07,530 --> 00:03:10,950
So as I was saying, the answer to what to do here
54
00:03:10,950 --> 00:03:14,130
is to just ignore the sensor errors and simply work
55
00:03:14,130 --> 00:03:16,200
with the rest of the data.
56
00:03:16,200 --> 00:03:20,267
So how to ignore errors?
57
00:03:23,600 --> 00:03:25,563
Then another task is gonna be,
58
00:03:26,520 --> 00:03:31,520
find max value in temperature array.
59
00:03:34,051 --> 00:03:38,213
And then another task is to find the minimum value.
60
00:03:40,470 --> 00:03:45,470
And another task is gonna be to subtract min from max
61
00:03:50,430 --> 00:03:53,480
and then return it.
62
00:03:53,480 --> 00:03:57,483
So subtracting min from max is of course the amplitude.
63
00:03:58,690 --> 00:04:00,880
And so that's what we need to return.
64
00:04:00,880 --> 00:04:03,310
And so all of these are simple steps,
65
00:04:03,310 --> 00:04:04,710
but it's good to have an idea
66
00:04:04,710 --> 00:04:07,230
of how we will solve this problem.
67
00:04:07,230 --> 00:04:09,710
And so that's why I wrote down every single step
68
00:04:09,710 --> 00:04:11,093
of the way here.
69
00:04:11,950 --> 00:04:15,410
So let's start writing a function.
70
00:04:15,410 --> 00:04:17,700
So although they don't tell us that we should write
71
00:04:17,700 --> 00:04:21,370
a function here, whenever we encounter a task like this,
72
00:04:21,370 --> 00:04:24,740
it's a good idea to write a function for it.
73
00:04:24,740 --> 00:04:28,387
So call this function, calcTempAmplitude.
74
00:04:33,490 --> 00:04:37,720
And so this function will receive an array of temperatures.
75
00:04:37,720 --> 00:04:40,520
So let's again, just call that temps.
76
00:04:40,520 --> 00:04:43,740
And so now we are going to start to work on solving
77
00:04:43,740 --> 00:04:48,400
this problem, and let's starts here with finding the maximum
78
00:04:48,400 --> 00:04:51,090
and the minimum value in this array.
79
00:04:51,090 --> 00:04:54,540
We can deal with the errors a little bit later.
80
00:04:54,540 --> 00:04:58,180
Now, probably we don't know yet how to do that
81
00:04:58,180 --> 00:05:00,700
based on what we just learned, right?
82
00:05:00,700 --> 00:05:03,280
I mean, we all ready have the tools for sure,
83
00:05:03,280 --> 00:05:05,750
but this requires a little bit of thinking.
84
00:05:05,750 --> 00:05:07,450
And if we don't know yet how to think
85
00:05:07,450 --> 00:05:09,130
about this kind of problems,
86
00:05:09,130 --> 00:05:12,110
it's a good idea to do some research.
87
00:05:12,110 --> 00:05:15,240
And so we will now use Google to research how we can find
88
00:05:15,240 --> 00:05:17,563
a maximum value in an array.
89
00:05:18,690 --> 00:05:21,270
And so that's what I meant when I said we should
90
00:05:21,270 --> 00:05:24,640
do some research and use Google whenever we need to.
91
00:05:24,640 --> 00:05:28,370
So what I like to do is to just write JavaScript
92
00:05:30,210 --> 00:05:32,330
and then be as descriptive as possible
93
00:05:32,330 --> 00:05:34,360
of what I want to achieve.
94
00:05:34,360 --> 00:05:39,360
So let's say get max value in array.
95
00:05:43,870 --> 00:05:47,410
And so don't be afraid to ask Google this kind of questions
96
00:05:47,410 --> 00:05:50,060
whenever you're stuck yourself.
97
00:05:50,060 --> 00:05:54,450
Now we get here a couple of replies basically,
98
00:05:54,450 --> 00:05:57,810
but I'm interested in showing you a Stack Overflow now.
99
00:05:57,810 --> 00:06:01,800
So Stack Overflow is a site of questions and answers.
100
00:06:01,800 --> 00:06:03,960
And most of the time, someone all ready had
101
00:06:03,960 --> 00:06:06,330
the same question as we have.
102
00:06:06,330 --> 00:06:09,530
And so then they asked that question on Stack Overflow,
103
00:06:09,530 --> 00:06:13,060
and we can then go there and find a response.
104
00:06:13,060 --> 00:06:15,010
And this one here sounds good, right?
105
00:06:15,010 --> 00:06:18,313
Find the min-max elements of an array in JavaScript.
106
00:06:19,190 --> 00:06:21,110
So let's click on that one.
107
00:06:21,110 --> 00:06:24,570
But now here the problem is gonna be that at this point,
108
00:06:24,570 --> 00:06:27,860
you will not understand most of the solutions.
109
00:06:27,860 --> 00:06:31,993
For example, this one here talks about prototypes.
110
00:06:35,550 --> 00:06:39,060
This one has like this weird apply in math.
111
00:06:39,060 --> 00:06:40,760
And so let's just scroll
112
00:06:40,760 --> 00:06:44,470
until one that we can better understand.
113
00:06:44,470 --> 00:06:48,463
This one has this weird dots that we will go into later,
114
00:06:50,270 --> 00:06:53,753
but here we actually have something that we can understand.
115
00:06:54,700 --> 00:06:58,970
So let's focus on this solution here, okay?
116
00:06:58,970 --> 00:07:02,570
And usually the first solution is always the best one
117
00:07:02,570 --> 00:07:04,200
or the first or the second.
118
00:07:04,200 --> 00:07:06,830
But in this case, we just scroll it a little bit more
119
00:07:06,830 --> 00:07:08,460
so that we can find a solution
120
00:07:08,460 --> 00:07:10,360
that we can implement with the tools
121
00:07:10,360 --> 00:07:12,690
that we all ready learned about.
122
00:07:12,690 --> 00:07:16,300
So what they're doing here is to start by defining
123
00:07:16,300 --> 00:07:20,390
the first element of the array as a max.
124
00:07:20,390 --> 00:07:22,760
So in the beginning, they basically assume
125
00:07:22,760 --> 00:07:27,150
that the maximum value of the array is the first element.
126
00:07:27,150 --> 00:07:30,780
And then from here, they loop through the array
127
00:07:30,780 --> 00:07:32,250
or over the array.
128
00:07:32,250 --> 00:07:36,500
And in each iteration here they test,
129
00:07:36,500 --> 00:07:40,630
if the current value is greater than the maximum value.
130
00:07:40,630 --> 00:07:44,430
And if it is then the new maximum here,
131
00:07:44,430 --> 00:07:48,830
becomes the current element in the array, okay?
132
00:07:48,830 --> 00:07:51,400
Does that sound like a good idea?
133
00:07:51,400 --> 00:07:53,700
Well, I think that it does.
134
00:07:53,700 --> 00:07:55,970
So let's try to implement this ourself
135
00:07:55,970 --> 00:07:59,480
and then I will try to explain you a little bit better,
136
00:07:59,480 --> 00:08:01,023
why this is a good solution.
137
00:08:02,300 --> 00:08:04,507
So let's create a four-loop here,
138
00:08:04,507 --> 00:08:06,320
and of course we don't need to copy
139
00:08:06,320 --> 00:08:08,270
the code here from this site.
140
00:08:08,270 --> 00:08:11,000
Usually it's best to understand the solutions
141
00:08:11,000 --> 00:08:13,840
and then trying to implement it on yourself.
142
00:08:13,840 --> 00:08:18,350
So not copying the code exactly from Stack Overflow.
143
00:08:18,350 --> 00:08:20,283
So let's start with the counter i,
144
00:08:21,750 --> 00:08:24,530
let's start at zero as always, even though here,
145
00:08:24,530 --> 00:08:27,200
they're starting at one, but nevermind.
146
00:08:27,200 --> 00:08:30,253
We will just do it, like we have always been doing it.
147
00:08:31,400 --> 00:08:34,890
So I must stay below the length of the array
148
00:08:34,890 --> 00:08:36,520
that we're looping over.
149
00:08:36,520 --> 00:08:40,803
And in this case, that's the temperature array, right?
150
00:08:41,850 --> 00:08:46,850
So temps.length, and then i plus plus, okay?
151
00:08:51,600 --> 00:08:53,310
And actually before we do the loop,
152
00:08:53,310 --> 00:08:57,253
we need to create that max variable that they have here.
153
00:08:58,200 --> 00:08:59,910
So let's do that.
154
00:08:59,910 --> 00:09:04,910
Let max equal the temps array.
155
00:09:08,010 --> 00:09:10,280
So at the very first element.
156
00:09:10,280 --> 00:09:12,250
So again, we will start by assuming
157
00:09:12,250 --> 00:09:15,950
that the first element of the array is the maximum.
158
00:09:15,950 --> 00:09:17,560
And that's because we didn't loop over
159
00:09:17,560 --> 00:09:19,970
the array yet at this point.
160
00:09:19,970 --> 00:09:22,850
So this is similar to the challenge in the last section
161
00:09:22,850 --> 00:09:27,040
where we started out with the sum set to zero.
162
00:09:27,040 --> 00:09:29,167
So that was a good starter value.
163
00:09:29,167 --> 00:09:32,890
And in this case, a good starting point is simply the first
164
00:09:34,200 --> 00:09:36,110
value of the array.
165
00:09:36,110 --> 00:09:38,930
And now let's implement that logic here.
166
00:09:38,930 --> 00:09:43,790
So, if the current value of the array, so that's temps
167
00:09:46,810 --> 00:09:51,150
at position i, so the current position is greater
168
00:09:51,150 --> 00:09:53,340
than the current maximum value.
169
00:09:53,340 --> 00:09:58,023
Then the maximum value will become this new value.
170
00:09:59,170 --> 00:10:01,610
And that makes sense, right?
171
00:10:01,610 --> 00:10:04,150
Because if the current value in the array
172
00:10:04,150 --> 00:10:06,180
is greater than the maximum,
173
00:10:06,180 --> 00:10:09,530
well, then that value should be the maximum, right?
174
00:10:09,530 --> 00:10:14,170
And so that's what we then do here, okay?
175
00:10:14,170 --> 00:10:16,260
And now let's simply log it to the console.
176
00:10:16,260 --> 00:10:17,850
And remember that from now on,
177
00:10:17,850 --> 00:10:19,460
I will start using the snippet
178
00:10:19,460 --> 00:10:22,770
that we defined in the first lecture of the section.
179
00:10:22,770 --> 00:10:27,770
So I just type cl, hit return and then max, okay?
180
00:10:30,370 --> 00:10:32,203
And now just to test this function,
181
00:10:33,850 --> 00:10:37,920
let's call it with an array of just some values.
182
00:10:37,920 --> 00:10:42,140
So three, seven and four.
183
00:10:42,140 --> 00:10:45,173
And so now it's very obvious what the result should be.
184
00:10:46,240 --> 00:10:48,920
And so I all ready saved it and so probably we now all ready
185
00:10:48,920 --> 00:10:51,060
have to result here in the console,
186
00:10:51,060 --> 00:10:55,040
because remember we still have to live server here running.
187
00:10:55,040 --> 00:10:57,830
And so it automatically reloaded to page,
188
00:10:57,830 --> 00:10:59,920
and we get the correct result here,
189
00:10:59,920 --> 00:11:03,030
which is that seven is the max value.
190
00:11:03,030 --> 00:11:05,150
Let's add something else here like 23
191
00:11:06,089 --> 00:11:09,590
and now 23 will become the max value.
192
00:11:09,590 --> 00:11:12,590
And so the logic here works.
193
00:11:12,590 --> 00:11:14,160
So let's get rid of this one
194
00:11:14,160 --> 00:11:16,163
and just to analyze what happens.
195
00:11:17,010 --> 00:11:20,090
So in the beginning, before we even start a loop,
196
00:11:20,090 --> 00:11:25,070
the max will be the first element of the array.
197
00:11:25,070 --> 00:11:28,340
So three, okay?
198
00:11:28,340 --> 00:11:32,100
Then the loop starts at the first position.
199
00:11:32,100 --> 00:11:33,640
So that's three.
200
00:11:33,640 --> 00:11:37,370
So here then we ask is three greater than three?
201
00:11:37,370 --> 00:11:38,490
No, it's not.
202
00:11:38,490 --> 00:11:41,700
So nothing happens then in the next iteration of the loop,
203
00:11:41,700 --> 00:11:43,830
we are at seven.
204
00:11:43,830 --> 00:11:48,200
So then the question is, is seven greater than three
205
00:11:48,200 --> 00:11:50,010
which is the current maximum?
206
00:11:50,010 --> 00:11:51,800
And yes, it is.
207
00:11:51,800 --> 00:11:56,800
And so now max equals seven, okay?
208
00:11:56,870 --> 00:11:59,760
Next iteration of the loop, which is four.
209
00:11:59,760 --> 00:12:04,630
And so the question is, is four greater than seven,
210
00:12:04,630 --> 00:12:06,290
which is the current maximum?
211
00:12:06,290 --> 00:12:07,600
No, it's not.
212
00:12:07,600 --> 00:12:11,310
And so nothing happens and then we're done.
213
00:12:11,310 --> 00:12:12,830
And so the result in the end
214
00:12:12,830 --> 00:12:16,760
is that max is equal to seven, all right?
215
00:12:16,760 --> 00:12:18,550
Does that make sense?
216
00:12:18,550 --> 00:12:21,990
So we solved this problem here.
217
00:12:21,990 --> 00:12:25,430
So the sub problem where we found the max value,
218
00:12:25,430 --> 00:12:28,310
but now we need to do the same for the minimum.
219
00:12:28,310 --> 00:12:31,950
And hopefully you can see how that one works
220
00:12:31,950 --> 00:12:34,660
because it's pretty much in the same way.
221
00:12:34,660 --> 00:12:37,023
So let's say min,
222
00:12:37,990 --> 00:12:41,223
and we will start at the same starting point here.
223
00:12:43,310 --> 00:12:45,840
And all we need to do now is to add another line
224
00:12:45,840 --> 00:12:50,060
to this loop so we can do it all in one go.
225
00:12:50,060 --> 00:12:51,740
And so now what we're gonna say
226
00:12:51,740 --> 00:12:56,740
is if the current temperature is less than the minimum,
227
00:12:59,570 --> 00:13:02,100
then that should become the new minimum.
228
00:13:02,100 --> 00:13:05,013
So min equals the current temperature.
229
00:13:08,500 --> 00:13:12,560
And actually since we're using this here so many times,
230
00:13:12,560 --> 00:13:16,170
let's create a variable for that.
231
00:13:16,170 --> 00:13:21,170
So const current temperature is equal to temps
232
00:13:24,960 --> 00:13:26,450
at position i.
233
00:13:26,450 --> 00:13:29,260
And now I'm selecting and then command D
234
00:13:29,260 --> 00:13:33,310
or Control + D one, two, three, four,
235
00:13:33,310 --> 00:13:35,273
and replace all of this with curTemp.
236
00:13:37,130 --> 00:13:39,963
Okay, and now just to see again if it works,
237
00:13:41,160 --> 00:13:42,893
let's log the minimum as well,
238
00:13:43,860 --> 00:13:46,493
and let's add some other value here.
239
00:13:48,980 --> 00:13:51,970
And so what can we expect when we save it?
240
00:13:51,970 --> 00:13:55,560
Well, the max would be eight and the min should be one.
241
00:13:55,560 --> 00:14:00,083
So I'm saving, and yes, that works.
242
00:14:01,600 --> 00:14:06,600
Next up, we can then tackle the problem of ignoring errors.
243
00:14:07,200 --> 00:14:08,210
So what that means
244
00:14:08,210 --> 00:14:13,210
is that we do not want to include this, right?
245
00:14:13,560 --> 00:14:16,290
Or in other words, this logic here
246
00:14:16,290 --> 00:14:19,943
should only run if we actually have a number here.
247
00:14:21,090 --> 00:14:24,950
Okay, so basically if the current element is a number
248
00:14:24,950 --> 00:14:28,523
only then it makes sense to make this sort of comparisons.
249
00:14:29,940 --> 00:14:32,350
And so, we can use something that we learned
250
00:14:32,350 --> 00:14:36,350
in the last section, which is the continue keyword.
251
00:14:36,350 --> 00:14:41,350
So let's say if the type of the current temperature,
252
00:14:43,470 --> 00:14:48,470
so type of current temperature is different
253
00:14:48,850 --> 00:14:53,340
from a number, then continue.
254
00:14:53,340 --> 00:14:56,120
And remember that continue means that the rest
255
00:14:56,120 --> 00:14:58,650
of the iteration will not be executed.
256
00:14:58,650 --> 00:15:01,460
So the current iteration will be finished
257
00:15:01,460 --> 00:15:04,560
and then it moves on right to the next one.
258
00:15:04,560 --> 00:15:06,810
And so in this case, what happens
259
00:15:06,810 --> 00:15:10,470
is as soon as the loop reaches this part here,
260
00:15:10,470 --> 00:15:11,990
since it's not a number,
261
00:15:11,990 --> 00:15:15,350
then none of the logic down here is executed
262
00:15:15,350 --> 00:15:18,663
and then we move on to number nine right away.
263
00:15:20,810 --> 00:15:25,810
Okay, so let's now actually call calcTempAmplitude,
264
00:15:27,530 --> 00:15:29,693
using or temperatures array.
265
00:15:31,600 --> 00:15:33,597
And indeed, we all ready have here
266
00:15:33,597 --> 00:15:36,200
the max and min temperatures.
267
00:15:36,200 --> 00:15:38,660
So that's confirmed that that's correct.
268
00:15:38,660 --> 00:15:43,660
And yes, seven is the max and minus six is the minimum.
269
00:15:44,030 --> 00:15:49,030
Awesome, so that works now there's only the easy part left,
270
00:15:49,620 --> 00:15:52,740
which is to return the amplitude.
271
00:15:52,740 --> 00:15:57,740
So return the max minus the min, okay?
272
00:16:00,570 --> 00:16:02,650
Let's get rid of this one here
273
00:16:02,650 --> 00:16:05,900
and here let's store that result into a variable
274
00:16:08,160 --> 00:16:09,563
or actually amplitude.
275
00:16:12,020 --> 00:16:14,923
Okay, and then console log ampli,
276
00:16:18,060 --> 00:16:20,430
oh, actually there's an error here,
277
00:16:20,430 --> 00:16:22,513
This would be called amplitude.
278
00:16:26,250 --> 00:16:29,043
Okay, and so 23.
279
00:16:30,260 --> 00:16:31,660
So you can probably start to see
280
00:16:31,660 --> 00:16:34,070
that this is my favorite number.
281
00:16:34,070 --> 00:16:36,163
And so it comes up all the time here.
282
00:16:37,280 --> 00:16:40,960
Awesome, we did a great job here in solving this problem.
283
00:16:40,960 --> 00:16:43,670
And again, we did it because we first understood it
284
00:16:43,670 --> 00:16:47,853
correctly and then we broke it up into these sub problems.
285
00:16:49,640 --> 00:16:52,340
But now let's suppose that after we're done
286
00:16:52,340 --> 00:16:54,860
with our solution, the project manager
287
00:16:54,860 --> 00:16:56,780
tells us that the function
288
00:16:56,780 --> 00:17:00,210
should actually receive two arrays of temperatures
289
00:17:00,210 --> 00:17:02,000
and not just one.
290
00:17:02,000 --> 00:17:05,770
But the rest of the function should work just the same.
291
00:17:05,770 --> 00:17:10,770
Okay, so well, let's quickly write that problem down here.
292
00:17:15,430 --> 00:17:16,773
So problem two,
293
00:17:20,050 --> 00:17:25,050
function should now receive two arrays of temperatures.
294
00:17:28,290 --> 00:17:32,063
So let's try to again, understand the problem.
295
00:17:35,390 --> 00:17:40,390
So we can probably ask the question when we have two arrays,
296
00:17:42,070 --> 00:17:45,303
do we need to implement the same functionality twice?
297
00:17:51,000 --> 00:17:54,530
And well, the answer is actually no.
298
00:17:54,530 --> 00:17:56,760
So the solution is to just merge
299
00:17:56,760 --> 00:17:59,570
the two arrays at the beginning.
300
00:17:59,570 --> 00:18:04,250
So just merge two arrays and now we need
301
00:18:04,250 --> 00:18:09,160
to then again break this one up into sub problems.
302
00:18:09,160 --> 00:18:10,693
And in this case, that's just,
303
00:18:11,770 --> 00:18:14,380
well, really just one sub problem,
304
00:18:14,380 --> 00:18:19,380
which is how to merge two arrays, okay?
305
00:18:20,960 --> 00:18:24,100
But we can see that this is probably
306
00:18:24,100 --> 00:18:26,570
the best thing to do, right?
307
00:18:26,570 --> 00:18:29,080
So imagine that we have this same function,
308
00:18:29,080 --> 00:18:31,440
but instead of receiving this one here,
309
00:18:31,440 --> 00:18:34,040
so just one array it gets two,
310
00:18:34,040 --> 00:18:37,213
then if we can merge these two arrays into one,
311
00:18:37,213 --> 00:18:40,403
then the rest of the logic could stay exactly the same.
312
00:18:42,610 --> 00:18:45,840
Okay, and here the problem should actually be just
313
00:18:47,800 --> 00:18:49,420
merge two arrays.
314
00:18:49,420 --> 00:18:53,390
So that's our sub problem that we will now solve.
315
00:18:53,390 --> 00:18:55,893
So, let's now do some more research here.
316
00:18:57,000 --> 00:19:00,470
So, I think we could actually come up
317
00:19:00,470 --> 00:19:02,110
with our own solution here.
318
00:19:02,110 --> 00:19:05,140
But really, I just want in this lecture to use
319
00:19:05,140 --> 00:19:07,770
the tools that we have to solve problems
320
00:19:07,770 --> 00:19:10,320
on our own with research.
321
00:19:10,320 --> 00:19:12,200
So I want to show you how a developer
322
00:19:12,200 --> 00:19:13,973
goes about doing these things.
323
00:19:14,940 --> 00:19:19,903
So JavaScript merge two arrays.
324
00:19:22,570 --> 00:19:27,570
So we have here the Mozilla Developer Network
325
00:19:27,760 --> 00:19:29,860
that I told you about in the last lecture.
326
00:19:30,710 --> 00:19:33,803
And here we also have again, a Stack Overflow reply.
327
00:19:34,990 --> 00:19:37,933
So let's take a look at the Stack Overflow again.
328
00:19:40,230 --> 00:19:43,670
So here we see that apparently
329
00:19:43,670 --> 00:19:46,670
there is like a concat method.
330
00:19:46,670 --> 00:19:49,830
So here we can also see array.concat.
331
00:19:49,830 --> 00:19:52,810
So that seems to be the solution.
332
00:19:52,810 --> 00:19:56,140
And I remember that previously on that Google results page,
333
00:19:56,140 --> 00:19:58,620
there was also something about that.
334
00:19:58,620 --> 00:20:00,240
So this first year,
335
00:20:00,240 --> 00:20:04,020
so the MDN page is also about the concat method.
336
00:20:04,020 --> 00:20:05,800
So let's now actually explore
337
00:20:06,890 --> 00:20:10,530
the MDN website a little bit, okay?
338
00:20:10,530 --> 00:20:13,470
And let's make this a bit wider so I can show you
339
00:20:13,470 --> 00:20:15,103
how it really looks like.
340
00:20:18,165 --> 00:20:21,840
And so, MDN looks like this and once more,
341
00:20:21,840 --> 00:20:24,800
it might've changed by the time you're watching this video,
342
00:20:24,800 --> 00:20:27,570
but the core functionality will still be there.
343
00:20:27,570 --> 00:20:29,640
So there's always a short description
344
00:20:29,640 --> 00:20:34,103
about the functionality and then some quick examples.
345
00:20:34,960 --> 00:20:38,380
Then, here on the left side,
346
00:20:38,380 --> 00:20:42,420
we can actually see all the methods about the array.
347
00:20:42,420 --> 00:20:46,310
Okay, and that's because we are right now on the page
348
00:20:46,310 --> 00:20:48,000
about an array method.
349
00:20:48,000 --> 00:20:50,480
So concat is a method of arrays,
350
00:20:50,480 --> 00:20:55,170
so similar to push or shift or includes, right?
351
00:20:55,170 --> 00:20:58,480
So concat is just one more of these methods.
352
00:20:58,480 --> 00:21:01,630
And again, we can see all of the methods here.
353
00:21:01,630 --> 00:21:04,870
And as I told you, there are a lot of them.
354
00:21:04,870 --> 00:21:07,450
So push for example is the one that we all ready
355
00:21:07,450 --> 00:21:12,450
learned about and used, so we can quickly see that.
356
00:21:12,470 --> 00:21:16,160
And so indeed the push method adds zero or more elements
357
00:21:16,160 --> 00:21:19,340
to the end of an array and returns the new length
358
00:21:19,340 --> 00:21:20,173
of the array.
359
00:21:21,040 --> 00:21:24,780
So this is kind of what we did ourselves previously.
360
00:21:24,780 --> 00:21:27,360
And actually we can add multiple elements,
361
00:21:27,360 --> 00:21:29,060
which I didn't tell you by the time,
362
00:21:29,060 --> 00:21:31,580
but this here works just as well.
363
00:21:31,580 --> 00:21:36,173
But anyway, this was just to show you a familiar method,
364
00:21:37,470 --> 00:21:40,540
but let's return to concat here.
365
00:21:40,540 --> 00:21:43,130
So here is a long description of the method.
366
00:21:43,130 --> 00:21:45,260
Here's the exact syntax,
367
00:21:45,260 --> 00:21:48,300
which many times looks a bit intimidating.
368
00:21:48,300 --> 00:21:52,423
And so I like to actually stick to the examples here.
369
00:21:53,330 --> 00:21:56,970
So, whenever you need to know how a certain built in method
370
00:21:56,970 --> 00:21:59,260
or function works in JavaScript,
371
00:21:59,260 --> 00:22:02,210
you can always just look it up on MDN.
372
00:22:02,210 --> 00:22:04,330
This is really the complete,
373
00:22:04,330 --> 00:22:07,390
but unofficial JavaScript documentation.
374
00:22:07,390 --> 00:22:09,650
And in fact, many, many of the things
375
00:22:09,650 --> 00:22:13,630
that I know about JavaScript come here from MDN.
376
00:22:13,630 --> 00:22:17,210
So, don't be afraid of doing any research that you need
377
00:22:17,210 --> 00:22:20,600
on this page, or also on Stack Overflow.
378
00:22:20,600 --> 00:22:22,660
Anyway, here from this example,
379
00:22:22,660 --> 00:22:26,730
we can understand kind of how the concat method works.
380
00:22:26,730 --> 00:22:31,440
So we have array one and two, and then on array one,
381
00:22:31,440 --> 00:22:33,580
we can call the concat method
382
00:22:33,580 --> 00:22:36,870
and as an argument passed in the second array.
383
00:22:36,870 --> 00:22:39,750
And the result will be array three.
384
00:22:39,750 --> 00:22:41,950
And when we locked that to the console,
385
00:22:41,950 --> 00:22:44,690
we will get a, b, c, e, f.
386
00:22:44,690 --> 00:22:47,980
And so that's the array one, abc,
387
00:22:47,980 --> 00:22:52,180
and then followed by array two essentially, def.
388
00:22:52,180 --> 00:22:54,860
So I'll just copy this syntax now
389
00:22:54,860 --> 00:22:56,653
and to make this smaller again,
390
00:22:57,670 --> 00:22:58,900
and I will paste it here
391
00:23:00,410 --> 00:23:02,513
just so we can then use it as a reference.
392
00:23:04,320 --> 00:23:06,343
Okay, and now I will get
393
00:23:10,010 --> 00:23:12,930
this whole function and to not change that one,
394
00:23:12,930 --> 00:23:14,693
but instead create a new one.
395
00:23:16,170 --> 00:23:19,623
So calcTempAmplitude new.
396
00:23:20,510 --> 00:23:23,560
And then here we also called a new one
397
00:23:23,560 --> 00:23:26,053
and called amplitude new.
398
00:23:28,000 --> 00:23:30,283
Okay, amplitude new.
399
00:23:33,160 --> 00:23:36,380
And now here, we need to change the arguments.
400
00:23:36,380 --> 00:23:38,710
So, remember that now this new function
401
00:23:38,710 --> 00:23:41,950
will receive two arrays of temperatures.
402
00:23:41,950 --> 00:23:45,723
So I'm just gonna call them T one and T two.
403
00:23:47,130 --> 00:23:48,810
Here at the beginning of the function
404
00:23:48,810 --> 00:23:51,990
is where we will solve our problem.
405
00:23:51,990 --> 00:23:55,003
So this sub problem of merging the two arrays.
406
00:23:55,840 --> 00:23:58,920
So, let's again,
407
00:23:58,920 --> 00:24:03,070
just put this here, just so that we see it as a reference
408
00:24:03,070 --> 00:24:04,673
exactly where we need it.
409
00:24:06,890 --> 00:24:09,770
So what we want to do is to create a new array
410
00:24:11,180 --> 00:24:13,890
and I will call it temps.
411
00:24:13,890 --> 00:24:14,920
And I'm calling temps
412
00:24:14,920 --> 00:24:17,650
because that's the name of the complete array
413
00:24:17,650 --> 00:24:19,850
that we all ready have here in the function.
414
00:24:21,170 --> 00:24:22,370
So that used to be the name
415
00:24:22,370 --> 00:24:26,030
of the argument of the previous version of this function.
416
00:24:26,030 --> 00:24:29,503
And now I can just say, the array one,
417
00:24:30,370 --> 00:24:35,370
So array one, which in our case is T one dot,
418
00:24:37,170 --> 00:24:41,333
and then array number two, which in our case is T two.
419
00:24:44,000 --> 00:24:45,390
And that's it.
420
00:24:45,390 --> 00:24:47,450
And now let's just lock that to the console
421
00:24:47,450 --> 00:24:52,450
very quick, temps and we no longer need this.
422
00:24:54,430 --> 00:24:57,600
Oh, okay, and here then we need to call
423
00:24:57,600 --> 00:25:00,590
this new function with two arrays.
424
00:25:00,590 --> 00:25:02,940
So let's just create two arrays.
425
00:25:02,940 --> 00:25:05,893
So three, five, and one,
426
00:25:07,460 --> 00:25:12,460
and then another one, nine, zero and five.
427
00:25:15,430 --> 00:25:17,003
And now let's see.
428
00:25:18,720 --> 00:25:22,220
And here we see, that it did actually work.
429
00:25:22,220 --> 00:25:23,840
So now we get this one array,
430
00:25:23,840 --> 00:25:25,720
which includes all the elements,
431
00:25:25,720 --> 00:25:28,140
basically of these two arrays
432
00:25:28,140 --> 00:25:33,140
that we passed into calcTempAmplitude new, so this function.
433
00:25:34,070 --> 00:25:37,870
And we can also see that nine and zero are the max
434
00:25:37,870 --> 00:25:41,440
and the min and nine minus zero gives nine,
435
00:25:41,440 --> 00:25:44,183
which is then this new amplitude new.
436
00:25:46,530 --> 00:25:49,910
Awesome, so we solved this problem number two here
437
00:25:49,910 --> 00:25:51,713
successfully as well now.
438
00:25:53,000 --> 00:25:57,550
And yeah, so I hope that now you have a better idea
439
00:25:57,550 --> 00:25:59,310
of how to solve problems
440
00:25:59,310 --> 00:26:02,580
and especially how to do research using the tools
441
00:26:02,580 --> 00:26:04,410
that I just showed you in this video.
442
00:26:04,410 --> 00:26:07,040
So that's Google, Stack Overflow
443
00:26:07,040 --> 00:26:09,720
and also the MDN documentation.
444
00:26:09,720 --> 00:26:11,840
And as less one is, in my opinion,
445
00:26:11,840 --> 00:26:15,980
actually the most important one I learned so much from MDN.
446
00:26:15,980 --> 00:26:17,330
It's incredible.
447
00:26:17,330 --> 00:26:18,920
So now in the future,
448
00:26:18,920 --> 00:26:21,540
whenever something is not working in your code,
449
00:26:21,540 --> 00:26:23,680
and even during the course,
450
00:26:23,680 --> 00:26:27,340
you can always try to figure out a solution on your own,
451
00:26:27,340 --> 00:26:30,740
for example, using Google or Stack Overflow.
452
00:26:30,740 --> 00:26:32,850
And so that will then be very helpful
453
00:26:32,850 --> 00:26:34,343
for your developer journey.
34264
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.