1 00:00:00,662 --> 00:00:03,850 And here goes the final coding challenge 2 00:00:03,850 --> 00:00:05,173 of this section. 3 00:00:06,810 --> 00:00:09,770 And in this one, let's improve the tip calculator 4 00:00:09,770 --> 00:00:11,510 that we created earlier 5 00:00:11,510 --> 00:00:13,990 but this time using loops. 6 00:00:13,990 --> 00:00:16,320 So here is what I want you to do, 7 00:00:16,320 --> 00:00:20,040 first create an array called bills, 8 00:00:20,040 --> 00:00:23,020 which will contain the 10 test values 9 00:00:23,020 --> 00:00:25,010 that we have down here. 10 00:00:25,010 --> 00:00:30,010 Then create empty arrays for both the tips and the totals. 11 00:00:30,050 --> 00:00:33,970 And so these arrays should be called tips and totals. 12 00:00:33,970 --> 00:00:36,990 And if you need more details about this challenge, 13 00:00:36,990 --> 00:00:40,203 you can always go back to the code of the previous version 14 00:00:40,203 --> 00:00:42,540 that we wrote of this. 15 00:00:42,540 --> 00:00:43,850 Then in number three, 16 00:00:43,850 --> 00:00:47,200 use the calcTip function that we wrote before. 17 00:00:47,200 --> 00:00:50,190 And so go back to that challenge really, 18 00:00:50,190 --> 00:00:51,810 and copy the function from there. 19 00:00:51,810 --> 00:00:55,490 There is no need to repeat the same code. 20 00:00:55,490 --> 00:00:59,610 So use that function to calculate both the tips 21 00:00:59,610 --> 00:01:03,040 and the total values for every single bill value 22 00:01:03,040 --> 00:01:06,960 that is in the bills array we created in number one. 23 00:01:06,960 --> 00:01:08,610 And to do that of course 24 00:01:08,610 --> 00:01:11,230 use a four loop just as we learned 25 00:01:11,230 --> 00:01:14,090 over these few last lectures. 26 00:01:14,090 --> 00:01:16,300 And to my hint to help you a little bit 27 00:01:16,300 --> 00:01:18,330 with this in case you need it 28 00:01:18,330 --> 00:01:22,270 is to call the calcTip function inside the loop 29 00:01:22,270 --> 00:01:25,770 and then use the push method to keep adding values 30 00:01:25,770 --> 00:01:28,670 to the tips and the totals arrays. 31 00:01:28,670 --> 00:01:29,650 All right? 32 00:01:29,650 --> 00:01:31,660 So that's the basic challenge 33 00:01:31,660 --> 00:01:33,680 and hopefully you can solve it 34 00:01:33,680 --> 00:01:37,150 even if you need to consult the code that we wrote earlier, 35 00:01:37,150 --> 00:01:39,040 there's absolutely no problem. 36 00:01:39,040 --> 00:01:42,030 So there's no need to memorize anything. 37 00:01:42,030 --> 00:01:43,830 All you need is to understand. 38 00:01:43,830 --> 00:01:47,360 And so if you understood what we did up until this point, 39 00:01:47,360 --> 00:01:49,970 you should be able to look at the code that we wrote 40 00:01:49,970 --> 00:01:53,760 and then change that in order to fit this challenge. 41 00:01:53,760 --> 00:01:57,290 Now, if you want to challenge yourself even more 42 00:01:57,290 --> 00:02:01,600 and basically push what we learned to the limit, 43 00:02:01,600 --> 00:02:04,350 then I have a bonus question 44 00:02:04,350 --> 00:02:08,000 and here I want you to write a function calcAverage, 45 00:02:08,000 --> 00:02:12,240 which will take an array called arr as an argument, 46 00:02:12,240 --> 00:02:14,610 and dysfunction will calculate the average 47 00:02:14,610 --> 00:02:18,360 of all the numbers and the array that had received. 48 00:02:18,360 --> 00:02:21,840 Now, let me tell you that this is a very difficult challenge 49 00:02:21,840 --> 00:02:23,330 for you at this point 50 00:02:23,330 --> 00:02:27,350 because we haven't done anything like this before, okay. 51 00:02:27,350 --> 00:02:30,900 So, if you don't want to get frustrated or something 52 00:02:30,900 --> 00:02:34,040 then there's no need to try this one. 53 00:02:34,040 --> 00:02:37,890 You can just watch the solution at the end of this video 54 00:02:37,890 --> 00:02:41,130 but if you still want to attempt how to do it, 55 00:02:41,130 --> 00:02:42,410 here are the steps 56 00:02:43,440 --> 00:02:45,890 how to solve it to make it a bit easier. 57 00:02:45,890 --> 00:02:47,200 So first of all, 58 00:02:47,200 --> 00:02:50,320 you will need to add up all the values in the array 59 00:02:50,320 --> 00:02:52,100 that a function receives. 60 00:02:52,100 --> 00:02:53,260 And to do that, 61 00:02:53,260 --> 00:02:56,570 you start by creating a variable called sum 62 00:02:56,570 --> 00:02:58,400 and set it to zero 63 00:02:58,400 --> 00:03:02,190 and then you will loop over the array using a four loop. 64 00:03:02,190 --> 00:03:03,290 And in each iteration 65 00:03:03,290 --> 00:03:05,680 you will add the current value of the array 66 00:03:05,680 --> 00:03:07,620 to the sum variable. 67 00:03:07,620 --> 00:03:10,290 And by doing this you will end up with all the values 68 00:03:10,290 --> 00:03:12,750 in the array added together. 69 00:03:12,750 --> 00:03:15,640 And then to calculate and return the average, 70 00:03:15,640 --> 00:03:18,090 all you have to do is to divide the sum 71 00:03:18,090 --> 00:03:21,770 that you just calculated by the length of the array, 72 00:03:21,770 --> 00:03:24,840 because that is the number of elements. 73 00:03:24,840 --> 00:03:27,860 So for example, if the array had just two values, 74 00:03:27,860 --> 00:03:30,000 like 10 and 20, 75 00:03:30,000 --> 00:03:31,270 we would add them together, 76 00:03:31,270 --> 00:03:35,320 they would be 30 and then divided by the number of elements 77 00:03:35,320 --> 00:03:36,600 in the array. 78 00:03:36,600 --> 00:03:38,020 And so that would be two 79 00:03:38,020 --> 00:03:40,590 and so the result would be 15. 80 00:03:40,590 --> 00:03:44,560 Okay. That's how you create the calcAverage function. 81 00:03:44,560 --> 00:03:47,040 And then I want you to use that function 82 00:03:47,040 --> 00:03:49,720 on the totals array. 83 00:03:49,720 --> 00:03:50,800 All right. 84 00:03:50,800 --> 00:03:53,880 So basically I want you to calculate the average 85 00:03:53,880 --> 00:03:58,090 of all the total values of the tips plus bills. 86 00:03:58,090 --> 00:03:59,200 Okay. 87 00:03:59,200 --> 00:04:02,530 So again don't beat yourself up if this bonus one 88 00:04:02,530 --> 00:04:04,290 is too hard for you. 89 00:04:04,290 --> 00:04:06,640 Anyway, good luck with this one, 90 00:04:06,640 --> 00:04:09,203 and I see you here again in a minute. 91 00:04:12,450 --> 00:04:13,750 Okay. 92 00:04:13,750 --> 00:04:15,240 And let's start by grabbing 93 00:04:15,240 --> 00:04:17,423 the calcTip function from earlier. 94 00:04:20,490 --> 00:04:21,943 So that should be here. 95 00:04:25,980 --> 00:04:26,813 Okay. 96 00:04:30,600 --> 00:04:32,510 And that's why we keep all the code 97 00:04:32,510 --> 00:04:34,833 in one neat file like this. 98 00:04:36,910 --> 00:04:39,423 Next up we create the bills array, 99 00:04:41,160 --> 00:04:44,660 and this one has quite a number of values, 100 00:04:44,660 --> 00:04:45,960 but we can just copy them. 101 00:04:46,840 --> 00:04:49,673 They're already almost in the correct format. 102 00:04:51,470 --> 00:04:54,340 So, no and but a comma 103 00:04:55,280 --> 00:04:58,630 then we create the empty tips and totals const 104 00:04:59,620 --> 00:05:03,220 tips equals an empty array 105 00:05:03,220 --> 00:05:06,253 and const totals, 106 00:05:07,150 --> 00:05:09,870 another empty array. 107 00:05:09,870 --> 00:05:12,390 And now is where the magic starts, 108 00:05:12,390 --> 00:05:15,500 So basically where we will calculate 109 00:05:15,500 --> 00:05:17,750 the tips and the totals, 110 00:05:17,750 --> 00:05:20,340 so that is the question number three. 111 00:05:20,340 --> 00:05:24,243 So use calcTip to calculate tips and total values. 112 00:05:25,770 --> 00:05:28,445 So essentially what we will do is to loop 113 00:05:28,445 --> 00:05:33,445 over the bills array and then fill up these two arrays. 114 00:05:35,190 --> 00:05:39,773 So, for let i equals zero, 115 00:05:40,890 --> 00:05:43,510 and we want this to run while the counter 116 00:05:43,510 --> 00:05:47,010 is less than the length of the bills, 117 00:05:47,010 --> 00:05:48,280 which is 10 118 00:05:48,280 --> 00:05:51,200 and so the last index is nine, 119 00:05:51,200 --> 00:05:54,083 and so that's the last element that's gonna be taken. 120 00:05:57,000 --> 00:05:59,740 And now in here let's start by calculating the tip 121 00:05:59,740 --> 00:06:01,403 and store it in a variable. 122 00:06:02,350 --> 00:06:04,440 So const tip 123 00:06:04,440 --> 00:06:08,163 is equal and now we're using the caLcTip function. 124 00:06:09,080 --> 00:06:11,380 So we call it using parenthesis, 125 00:06:11,380 --> 00:06:14,070 and now we need to pass in the bill value. 126 00:06:14,070 --> 00:06:16,540 And what is the bill value? 127 00:06:16,540 --> 00:06:20,763 Well, it is just a bill's array at the current position. 128 00:06:23,290 --> 00:06:24,910 And now you might wonder 129 00:06:24,910 --> 00:06:27,240 why I am able to declare 130 00:06:27,240 --> 00:06:30,380 this tip variable here as a constant. 131 00:06:30,380 --> 00:06:33,710 Am I not changing it in every loop iteration? 132 00:06:33,710 --> 00:06:37,060 Well, actually that's not what happens, 133 00:06:37,060 --> 00:06:38,840 actually in each iteration, 134 00:06:38,840 --> 00:06:41,860 a new tip variable is gonna be created. 135 00:06:41,860 --> 00:06:43,420 So we're not mutating, 136 00:06:43,420 --> 00:06:47,210 we're not changing the original tip that we declare here, 137 00:06:47,210 --> 00:06:50,200 in each iteration we will simply create a new one 138 00:06:50,200 --> 00:06:52,510 and that's why we can't use const. 139 00:06:52,510 --> 00:06:56,090 Anyway, now we have the tip calculated 140 00:06:56,090 --> 00:06:59,380 and so we just need to push it into the tips array, 141 00:06:59,380 --> 00:07:01,573 so tips dot.push, 142 00:07:02,920 --> 00:07:03,903 and tier the tip, 143 00:07:04,760 --> 00:07:09,453 and finally we need to push into the totals, 144 00:07:10,690 --> 00:07:15,460 so total.push, tier tip plus the current bill 145 00:07:15,460 --> 00:07:18,790 and we already know that is bills i. 146 00:07:22,600 --> 00:07:25,820 Okay. And that's actually it. 147 00:07:25,820 --> 00:07:28,500 Now you could have done it in a different way, 148 00:07:28,500 --> 00:07:31,620 for example without this variable here at all, 149 00:07:31,620 --> 00:07:36,620 you could have just put this code here and here, 150 00:07:37,240 --> 00:07:40,510 but then you would have calculated the value twice 151 00:07:40,510 --> 00:07:42,860 and that's just not necessary. 152 00:07:42,860 --> 00:07:44,450 We just calculated once 153 00:07:44,450 --> 00:07:46,340 and then we use it, 154 00:07:46,340 --> 00:07:49,050 both to push the value into the tips 155 00:07:49,050 --> 00:07:50,323 and into the totals. 156 00:07:55,240 --> 00:07:57,950 Okay. And now as always, 157 00:07:57,950 --> 00:08:01,910 let's check all the three arrays out in the console 158 00:08:06,400 --> 00:08:10,350 and that's a lot of numbers, 159 00:08:10,350 --> 00:08:12,760 but just by quickly looking at them, 160 00:08:12,760 --> 00:08:14,723 everything looks correct. 161 00:08:16,080 --> 00:08:18,150 Great. That's really great. 162 00:08:18,150 --> 00:08:20,140 We basically just did the same 163 00:08:20,140 --> 00:08:23,050 as we did in the previous version of the challenge. 164 00:08:23,050 --> 00:08:25,670 But this time we did it using a loop 165 00:08:25,670 --> 00:08:27,760 instead of manually creating the array 166 00:08:27,760 --> 00:08:32,350 by calling calcTip with bills zero one and two. 167 00:08:32,350 --> 00:08:34,510 So that's what we did in a previous challenge, 168 00:08:34,510 --> 00:08:37,240 but this one is a lot better 169 00:08:37,240 --> 00:08:40,910 because now no matter how many bills we have here, 170 00:08:40,910 --> 00:08:43,380 the loop will take care of all of them 171 00:08:43,380 --> 00:08:45,610 at the same time basically. 172 00:08:45,610 --> 00:08:47,920 Okay. So that's the basic challenge. 173 00:08:47,920 --> 00:08:50,810 I hope you arrived at the same result 174 00:08:50,810 --> 00:08:54,310 that I did no matter how you solved it. 175 00:08:54,310 --> 00:08:56,720 And now let's go for the bonus here. 176 00:08:56,720 --> 00:08:59,913 So we're writing a function called calcAverage, 177 00:09:04,505 --> 00:09:06,380 const calcAverage. 178 00:09:06,380 --> 00:09:09,340 And once again I'm using a function expression here, 179 00:09:09,340 --> 00:09:12,233 which is my favorite kind of function I would say. 180 00:09:14,800 --> 00:09:17,600 And as we said, we will receive an array 181 00:09:17,600 --> 00:09:20,180 and any array here will work. 182 00:09:20,180 --> 00:09:23,460 So once again, we're building a generic function 183 00:09:23,460 --> 00:09:25,870 which does not care what kind of values 184 00:09:25,870 --> 00:09:27,230 it's gonna receive. 185 00:09:27,230 --> 00:09:30,330 It can receive bills or tips 186 00:09:30,330 --> 00:09:33,610 or scores or heights or masses 187 00:09:33,610 --> 00:09:35,170 or whatever really. 188 00:09:35,170 --> 00:09:37,830 It doesn't care what the values are. 189 00:09:37,830 --> 00:09:41,270 And that's also why I gave it this generic name, 190 00:09:41,270 --> 00:09:43,120 so it's just calcAverage 191 00:09:43,120 --> 00:09:46,083 and not for example calcAverage totals. 192 00:09:47,360 --> 00:09:52,360 Let's not do what we say or what I say here in 4.1, 193 00:09:52,630 --> 00:09:55,730 which is to start creating sum variable 194 00:09:55,730 --> 00:09:57,650 that starts at zero. 195 00:09:57,650 --> 00:09:59,540 Then as we loop over the array, 196 00:09:59,540 --> 00:10:03,830 we will keep adding the current value to that variable. 197 00:10:03,830 --> 00:10:05,990 So, this time it needs to be alert 198 00:10:07,240 --> 00:10:10,970 because this sum will of course be updated 199 00:10:10,970 --> 00:10:12,653 as we loop over the array. 200 00:10:14,110 --> 00:10:17,903 And now all of this is pretty standard at this point. 201 00:10:18,850 --> 00:10:20,113 So equals zero, 202 00:10:21,740 --> 00:10:24,160 i should stay below 203 00:10:24,160 --> 00:10:27,460 the array.length. 204 00:10:27,460 --> 00:10:29,630 And so at this time array is simply the array 205 00:10:29,630 --> 00:10:31,660 that we're receiving in this function, 206 00:10:31,660 --> 00:10:32,880 so it's this parameter 207 00:10:35,000 --> 00:10:36,170 And now as I said, 208 00:10:36,170 --> 00:10:38,330 as we loop over the array, 209 00:10:38,330 --> 00:10:41,113 we will keep adding the current value to the sum. 210 00:10:42,010 --> 00:10:45,210 So what I mean is some will be equal 211 00:10:45,210 --> 00:10:47,080 to current value of sum, 212 00:10:47,080 --> 00:10:51,510 plus the array that we received as an input 213 00:10:51,510 --> 00:10:52,920 at to current position 214 00:10:54,010 --> 00:10:55,310 and that's it. 215 00:10:55,310 --> 00:10:56,380 We're just missing here, 216 00:10:56,380 --> 00:11:01,300 the increment of the counter 217 00:11:01,300 --> 00:11:03,300 but that's easy to fix. 218 00:11:03,300 --> 00:11:05,650 And this one here could be even more condensed. 219 00:11:06,630 --> 00:11:08,903 So let me just copy this one, 220 00:11:11,270 --> 00:11:13,300 and comment out the original one, 221 00:11:13,300 --> 00:11:16,560 because remember that we have a more shorthand operator 222 00:11:16,560 --> 00:11:18,370 in JavaScript, 223 00:11:18,370 --> 00:11:21,390 which we can use when we want to update a value. 224 00:11:21,390 --> 00:11:23,933 So instead of sum equals, sum plus, 225 00:11:24,810 --> 00:11:29,810 remember we can write some plus equal array i. 226 00:11:31,220 --> 00:11:34,080 So this one is exactly the same as this. 227 00:11:34,080 --> 00:11:36,830 So if you prefer, you can write just this version, 228 00:11:36,830 --> 00:11:39,280 but this here is gonna do exactly the same thing. 229 00:11:40,300 --> 00:11:41,390 Okay. 230 00:11:41,390 --> 00:11:43,320 And just to see if this works, 231 00:11:43,320 --> 00:11:45,760 let's actually test this now for now 232 00:11:45,760 --> 00:11:47,273 by logging only the sum. 233 00:11:48,200 --> 00:11:52,510 So console.log sum, 234 00:11:52,510 --> 00:11:54,560 and now again to test it, 235 00:11:54,560 --> 00:11:57,530 I will just call the function calcAverage 236 00:11:58,430 --> 00:12:01,410 with simply an array of sum values, 237 00:12:01,410 --> 00:12:05,373 so two plus three, plus six, 238 00:12:06,330 --> 00:12:09,850 and we know that this will be 11, right? 239 00:12:09,850 --> 00:12:12,780 And so now we can test this function here 240 00:12:12,780 --> 00:12:16,993 just to see if this first part that we just wrote works. 241 00:12:18,020 --> 00:12:19,240 Let's see, 242 00:12:19,240 --> 00:12:21,660 and yes we get 11. 243 00:12:21,660 --> 00:12:25,060 And so this logic here is correct. 244 00:12:25,060 --> 00:12:28,603 So we got this array here into the function. 245 00:12:29,680 --> 00:12:34,340 Okay. And so arr is now two, three, six 246 00:12:34,340 --> 00:12:37,040 and so that's the array that we are done looping over. 247 00:12:38,120 --> 00:12:40,710 Okay. So we end up with the sum 248 00:12:40,710 --> 00:12:42,230 and now what we want to return 249 00:12:44,480 --> 00:12:48,640 is simply the sum divided by a number of elements 250 00:12:48,640 --> 00:12:49,850 in the array, 251 00:12:49,850 --> 00:12:52,693 which remember is arr.length. 252 00:12:53,800 --> 00:12:55,374 And that's it. 253 00:12:55,374 --> 00:12:57,240 We can now get rid of this, 254 00:12:57,240 --> 00:13:00,630 but now we need to lock the result to the console 255 00:13:00,630 --> 00:13:02,070 if we want to see it, 256 00:13:02,070 --> 00:13:04,800 because this function here now does not log it, 257 00:13:04,800 --> 00:13:06,123 it simply returns it. 258 00:13:06,970 --> 00:13:09,453 And remember that is a big difference. 259 00:13:10,420 --> 00:13:12,547 So we know that some of this is 11 260 00:13:12,547 --> 00:13:15,250 and 11 divided by three 261 00:13:15,250 --> 00:13:18,230 is something like close to four. 262 00:13:18,230 --> 00:13:20,380 So we could change this here to seven 263 00:13:20,380 --> 00:13:24,350 then sum would be 12 and 12 divided by three is four. 264 00:13:24,350 --> 00:13:27,723 And so then we can make sure that this function works. 265 00:13:28,780 --> 00:13:30,340 So, it is four. 266 00:13:30,340 --> 00:13:32,170 So, great. 267 00:13:32,170 --> 00:13:34,420 This means that the function now works. 268 00:13:34,420 --> 00:13:39,330 And so now we can use this function 269 00:13:39,330 --> 00:13:43,410 to actually calculate the average total. 270 00:13:43,410 --> 00:13:45,963 And so here we simply use the totals value 271 00:13:45,963 --> 00:13:48,630 that we already created before. 272 00:13:48,630 --> 00:13:49,563 And that's it. 273 00:13:51,520 --> 00:13:56,290 So, the average total value of all our bills plus tips 274 00:13:56,290 --> 00:14:00,240 is 275 and 19. 275 00:14:00,240 --> 00:14:02,290 And let's actually do the same 276 00:14:02,290 --> 00:14:05,780 with the tips themselves, 277 00:14:05,780 --> 00:14:09,653 just to get an idea of the kind of tips that were paid here. 278 00:14:10,530 --> 00:14:14,550 So the average tip is 4289. 279 00:14:14,550 --> 00:14:17,140 Hopefully that partier was, 280 00:14:17,140 --> 00:14:19,160 not too confusing, 281 00:14:19,160 --> 00:14:22,060 but if you go slowly through the code step by step, 282 00:14:22,060 --> 00:14:24,140 you will understand it. 283 00:14:24,140 --> 00:14:24,973 All right. 284 00:14:24,973 --> 00:14:25,840 And with this, 285 00:14:25,840 --> 00:14:29,640 we finished the complete JavaScript fundamentals. 286 00:14:29,640 --> 00:14:32,360 So we made a ton of progress here. 287 00:14:32,360 --> 00:14:35,510 So congratulations for making it this far. 288 00:14:35,510 --> 00:14:37,380 Great job really. 289 00:14:37,380 --> 00:14:39,230 However, as you know 290 00:14:39,230 --> 00:14:41,700 we are really just getting started here, 291 00:14:41,700 --> 00:14:43,810 there is so much more to learn 292 00:14:43,810 --> 00:14:45,660 and actually in the next section, 293 00:14:45,660 --> 00:14:49,140 we will quickly configure our VS code editor 294 00:14:49,140 --> 00:14:50,600 a little bit better 295 00:14:50,600 --> 00:14:54,250 and also set up a better development environment. 296 00:14:54,250 --> 00:14:55,860 So that's gonna be super useful 297 00:14:55,860 --> 00:14:58,300 for writing code a little bit faster, 298 00:14:58,300 --> 00:15:01,330 and I will also teach you some developer skills 299 00:15:01,330 --> 00:15:04,920 that every developer should really have 300 00:15:04,920 --> 00:15:07,060 but as always before moving on, 301 00:15:07,060 --> 00:15:09,150 make 100% sure 302 00:15:09,150 --> 00:15:11,340 that you understood all these fundamentals 303 00:15:11,340 --> 00:15:14,340 from this section and to previous section. 304 00:15:14,340 --> 00:15:17,160 So, if you want you can redo the challenges 305 00:15:17,160 --> 00:15:19,780 or you can come up with your own small problems 306 00:15:19,780 --> 00:15:22,050 or ideas to solve. 307 00:15:22,050 --> 00:15:23,880 And by doing that you will reinforce 308 00:15:23,880 --> 00:15:25,930 all these tools even better 309 00:15:25,930 --> 00:15:29,410 and ultimately become a better developer faster. 310 00:15:29,410 --> 00:15:31,020 Then when you're really ready, 311 00:15:31,020 --> 00:15:33,193 let's together move forward.