WEBVTT 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.