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.