WEBVTT 1 00:00:00.870 --> 00:00:02.970 Okay, and let's start 2 00:00:02.970 --> 00:00:05.853 by grabbing the calc tip function from earlier. 3 00:00:08.910 --> 00:00:10.383 So that should be here. 4 00:00:15.622 --> 00:00:16.455 Okay. 5 00:00:19.020 --> 00:00:20.940 And that's why we keep all the code 6 00:00:20.940 --> 00:00:23.283 in one neat file like this. 7 00:00:25.350 --> 00:00:27.700 Next up, we create the bills array 8 00:00:29.910 --> 00:00:33.090 and this one has quite a number of values 9 00:00:33.090 --> 00:00:34.390 but we can just copy them. 10 00:00:35.280 --> 00:00:38.050 They're already almost in the correct format 11 00:00:39.900 --> 00:00:42.843 so no and, but a comma. 12 00:00:43.710 --> 00:00:46.233 Then we created the empty tips and totals, 13 00:00:48.259 --> 00:00:51.660 const tips equals an empty array 14 00:00:51.660 --> 00:00:56.660 and const totals, another empty array. 15 00:00:58.320 --> 00:01:00.810 And now is where the magic starts. 16 00:01:00.810 --> 00:01:05.040 So basically where we will calculate the tips 17 00:01:05.040 --> 00:01:06.240 and the totals. 18 00:01:06.240 --> 00:01:08.760 So that is question number three. 19 00:01:08.760 --> 00:01:12.663 So use calctip to calculate tips and total values. 20 00:01:14.190 --> 00:01:17.190 So essentially what we will do is to loop 21 00:01:17.190 --> 00:01:22.007 over the bills array and then fill up these two arrays. 22 00:01:23.610 --> 00:01:28.120 So for let i equal zero 23 00:01:29.310 --> 00:01:33.270 and we want this to run while the counter is less 24 00:01:33.270 --> 00:01:36.720 than the length of the bills, which is 10. 25 00:01:36.720 --> 00:01:39.630 And so the length index is nine. 26 00:01:39.630 --> 00:01:42.513 And so that's the last element that's gonna be taken. 27 00:01:45.420 --> 00:01:46.800 And now in here, let's start 28 00:01:46.800 --> 00:01:49.833 by calculating the tip and store it in a variable. 29 00:01:50.790 --> 00:01:54.390 So const tip is equal 30 00:01:54.390 --> 00:01:56.583 and now we're using the calc tip function. 31 00:01:57.510 --> 00:01:59.820 So we call it using parenthesis. 32 00:01:59.820 --> 00:02:02.490 And now we need to pass in the bill value. 33 00:02:02.490 --> 00:02:04.950 And what is the bill value? 34 00:02:04.950 --> 00:02:09.213 Well, it is just the bill's array at the current position. 35 00:02:11.730 --> 00:02:15.660 And now you might wonder why I am able to declare 36 00:02:15.660 --> 00:02:18.810 this tip variable here as a constant. 37 00:02:18.810 --> 00:02:22.140 Am I not changing it in every loop iteration? 38 00:02:22.140 --> 00:02:25.500 Well, actually that's not what happens. 39 00:02:25.500 --> 00:02:27.270 Actually, in each iteration, 40 00:02:27.270 --> 00:02:30.300 a new tip variable is gonna be created. 41 00:02:30.300 --> 00:02:34.080 So we're not mutating, we're not changing the original tip 42 00:02:34.080 --> 00:02:35.640 that we declare here. 43 00:02:35.640 --> 00:02:38.640 In each iteration, we will simply create a new one 44 00:02:38.640 --> 00:02:40.950 and that's why we can use const. 45 00:02:40.950 --> 00:02:44.550 Anyway, now we have the tip calculated 46 00:02:44.550 --> 00:02:47.820 and so we just need to push it into the tips array. 47 00:02:47.820 --> 00:02:52.353 So tips dot push and tier the tip. 48 00:02:53.190 --> 00:02:57.903 And finally we need to push into the totals. 49 00:02:59.100 --> 00:03:03.870 So totals dot push D tip plus the current bill. 50 00:03:03.870 --> 00:03:07.637 And we already know that that is bills, right? 51 00:03:11.010 --> 00:03:14.250 Okay. And that's actually it. 52 00:03:14.250 --> 00:03:17.610 Now, you could have done it in a different way, for example, 53 00:03:17.610 --> 00:03:20.040 without this variable here at all. 54 00:03:20.040 --> 00:03:25.040 You could have just put this code here and here 55 00:03:25.680 --> 00:03:28.950 but then you would've calculated the value twice. 56 00:03:28.950 --> 00:03:31.290 And that's just not necessary. 57 00:03:31.290 --> 00:03:32.880 We just calculated once 58 00:03:32.880 --> 00:03:36.330 and then we use it both to push the value 59 00:03:36.330 --> 00:03:38.763 into the tips and into the totals. 60 00:03:43.680 --> 00:03:45.520 Okay? And now as always 61 00:03:46.380 --> 00:03:50.433 let's check all the three arrays out in the console. 62 00:03:54.870 --> 00:03:58.770 And whoa, that's a lot of numbers. 63 00:03:58.770 --> 00:04:01.200 But just by quickly looking at them 64 00:04:01.200 --> 00:04:03.183 everything looks correct. 65 00:04:04.500 --> 00:04:06.570 Great, that's really great. 66 00:04:06.570 --> 00:04:08.550 We basically just did the same 67 00:04:08.550 --> 00:04:11.460 as we did in the previous version of the challenge 68 00:04:11.460 --> 00:04:15.090 but this time we did it using a loop instead of manually 69 00:04:15.090 --> 00:04:19.590 creating the array by calling calc tip with bills zero, 70 00:04:19.590 --> 00:04:20.760 one, and two. 71 00:04:20.760 --> 00:04:22.950 So that's what we did in the previous challenge 72 00:04:22.950 --> 00:04:27.420 but this one is a lot better because now no matter how many 73 00:04:27.420 --> 00:04:31.800 bills we have here, the loop will take care of all of them 74 00:04:31.800 --> 00:04:34.050 at the same time, basically. 75 00:04:34.050 --> 00:04:36.360 Okay? So that's the basic challenge. 76 00:04:36.360 --> 00:04:40.140 I hope you arrived at the same result that I did 77 00:04:40.140 --> 00:04:42.750 no matter how you solved it. 78 00:04:42.750 --> 00:04:45.150 And now let's go for the bonus here. 79 00:04:45.150 --> 00:04:48.393 So we're writing a function called calc average. 80 00:04:52.650 --> 00:04:54.810 So const calc average. 81 00:04:54.810 --> 00:04:57.750 And once again, I'm using a function expression here 82 00:04:57.750 --> 00:05:00.663 which is my favorite kind of function I would say. 83 00:05:03.240 --> 00:05:06.030 And as we said, we will receive an array 84 00:05:06.030 --> 00:05:08.610 and any array here will work. 85 00:05:08.610 --> 00:05:11.880 So once again, we're building a generic function 86 00:05:11.880 --> 00:05:15.660 which does not care what kind of values it's gonna receive. 87 00:05:15.660 --> 00:05:20.660 It can receive bills or tips or scores or heights 88 00:05:20.940 --> 00:05:23.610 or masses or whatever really. 89 00:05:23.610 --> 00:05:26.280 It doesn't care what the values are. 90 00:05:26.280 --> 00:05:29.700 And that's also why I gave it this generic name. 91 00:05:29.700 --> 00:05:32.490 So it's just calc average and not, for example, 92 00:05:32.490 --> 00:05:34.503 calc average totals. 93 00:05:35.790 --> 00:05:40.790 Let's not do what we say or what I say here in 4.1, 94 00:05:41.070 --> 00:05:45.030 which is to start creating a sum variable that starts 95 00:05:45.030 --> 00:05:46.080 at zero. 96 00:05:46.080 --> 00:05:49.230 Then as we loop over the array, we will keep adding 97 00:05:49.230 --> 00:05:52.260 the current value to that variable. 98 00:05:52.260 --> 00:05:57.260 So this time it needs to be a let, because this sum 99 00:05:57.450 --> 00:06:00.903 will of course be updated as we loop over the array. 100 00:06:02.550 --> 00:06:06.333 And now all of this is pretty standard at this point. 101 00:06:07.290 --> 00:06:12.290 So equal zero, I should stay below the array 102 00:06:14.700 --> 00:06:15.900 dot length. 103 00:06:15.900 --> 00:06:18.060 And so this time array is simply the array 104 00:06:18.060 --> 00:06:20.100 that we're receiving in this function. 105 00:06:20.100 --> 00:06:21.393 So it's this parameter. 106 00:06:23.430 --> 00:06:26.760 And now as I said, as we loop over the array 107 00:06:26.760 --> 00:06:29.553 we will keep adding the current value to the sum. 108 00:06:30.450 --> 00:06:33.660 So what I mean is sum will be equal, 109 00:06:33.660 --> 00:06:38.490 the current value of sum plus the array that we received 110 00:06:38.490 --> 00:06:41.433 as an input at the current position. 111 00:06:42.420 --> 00:06:43.770 And that's it. 112 00:06:43.770 --> 00:06:48.770 We're just missing here, the increment of the counter. 113 00:06:49.740 --> 00:06:51.720 But that's easy to fix. 114 00:06:51.720 --> 00:06:54.070 And this one here could be even more condensed. 115 00:06:55.050 --> 00:06:57.250 So let me just copy this one 116 00:06:59.730 --> 00:07:02.670 and comment out the original one because remember 117 00:07:02.670 --> 00:07:05.950 that we have a more shorthand operator in JavaScript 118 00:07:06.810 --> 00:07:09.810 which we can use when we want to update a value. 119 00:07:09.810 --> 00:07:12.363 So instead of sum equals sum plus, 120 00:07:13.260 --> 00:07:18.260 remember we can write sum plus equal array i. 121 00:07:19.650 --> 00:07:22.500 So this one is exactly the same as this. 122 00:07:22.500 --> 00:07:25.260 So if you prefer, you can write just this version 123 00:07:25.260 --> 00:07:27.723 but this here is gonna do exactly the same thing. 124 00:07:28.710 --> 00:07:31.570 Okay, and just to see if this works, 125 00:07:31.570 --> 00:07:33.150 let's actually test this now 126 00:07:33.150 --> 00:07:38.150 for now by logging only the sum, so console dot log sum. 127 00:07:40.950 --> 00:07:42.990 And now again, to test it, 128 00:07:42.990 --> 00:07:46.860 I will just call the function calc average 129 00:07:46.860 --> 00:07:49.830 with simply an array of some values. 130 00:07:49.830 --> 00:07:53.823 So two plus three plus six. 131 00:07:54.750 --> 00:07:58.320 And we know that this will be 11, right? 132 00:07:58.320 --> 00:08:02.340 And so now we can test this function here just to see 133 00:08:02.340 --> 00:08:05.433 if this first part that we just wrote works. 134 00:08:06.450 --> 00:08:07.680 Let's see. 135 00:08:07.680 --> 00:08:10.110 And yes, we get 11. 136 00:08:10.110 --> 00:08:13.470 And so this logic here is correct. 137 00:08:13.470 --> 00:08:17.543 So we got this array here into the function, okay? 138 00:08:18.480 --> 00:08:22.770 And so R is now two, three, six. 139 00:08:22.770 --> 00:08:25.420 And so that's the array that we're then looping over. 140 00:08:26.580 --> 00:08:29.160 Okay, so we end up with the sum 141 00:08:29.160 --> 00:08:34.160 and now what we want to return is simply the sum 142 00:08:34.920 --> 00:08:38.280 divided by the number of elements in the array 143 00:08:38.280 --> 00:08:41.133 which remember is R dot length. 144 00:08:42.240 --> 00:08:43.740 And that's it. 145 00:08:43.740 --> 00:08:47.790 Can now get rid of this but now we need to log the result 146 00:08:47.790 --> 00:08:50.490 to the console if we want to see it. 147 00:08:50.490 --> 00:08:53.220 Because this function here now does not log it. 148 00:08:53.220 --> 00:08:54.573 It simply returns it. 149 00:08:55.410 --> 00:08:57.873 And remember that that is a big difference. 150 00:08:58.830 --> 00:09:01.290 So we know that the sum of this is 11 151 00:09:01.290 --> 00:09:06.290 and 11 divided by three is something like close to four. 152 00:09:06.660 --> 00:09:08.790 So we could change this here to seven 153 00:09:08.790 --> 00:09:12.780 then the sum would be 12 and 12 divided by three is four. 154 00:09:12.780 --> 00:09:16.173 And so then we can make sure that this function works. 155 00:09:17.220 --> 00:09:20.580 So it is four, so great. 156 00:09:20.580 --> 00:09:22.860 This means that the function now works. 157 00:09:22.860 --> 00:09:27.860 And so now we can use this function to actually 158 00:09:28.860 --> 00:09:31.830 calculate the average total. 159 00:09:31.830 --> 00:09:34.320 And so here we simply use the totals value 160 00:09:34.320 --> 00:09:38.013 that we already created before, and that's it. 161 00:09:39.930 --> 00:09:42.900 So the average total value of all 162 00:09:42.900 --> 00:09:47.597 our bills plus tips is 275 and 19. 163 00:09:48.660 --> 00:09:53.660 And let's actually do the same with the tips themselves 164 00:09:54.210 --> 00:09:58.083 just to get an idea of the kind of tips that were paid here. 165 00:09:58.980 --> 00:10:03.000 So the average tip is 42.89. 166 00:10:03.000 --> 00:10:07.590 Hopefully that part here was not too confusing 167 00:10:07.590 --> 00:10:10.500 but if you go slowly through the code step by step, 168 00:10:10.500 --> 00:10:12.570 you will understand it. 169 00:10:12.570 --> 00:10:14.280 All right. And with this, 170 00:10:14.280 --> 00:10:18.060 we finished the complete JavaScript fundamentals. 171 00:10:18.060 --> 00:10:20.790 So we made a ton of progress here. 172 00:10:20.790 --> 00:10:23.940 So congratulations for making it this far. 173 00:10:23.940 --> 00:10:25.800 Great job, really. 174 00:10:25.800 --> 00:10:27.660 However, as you know, 175 00:10:27.660 --> 00:10:30.120 we are really just getting started here. 176 00:10:30.120 --> 00:10:32.250 There is so much more to learn. 177 00:10:32.250 --> 00:10:34.860 And actually in the next section, we will quickly 178 00:10:34.860 --> 00:10:39.030 configure our VS code editor a little bit better 179 00:10:39.030 --> 00:10:42.690 and also set up a better development environment. 180 00:10:42.690 --> 00:10:44.280 So that's gonna be super useful 181 00:10:44.280 --> 00:10:46.740 for writing code a little bit faster. 182 00:10:46.740 --> 00:10:49.770 And I will also teach you some developer skills 183 00:10:49.770 --> 00:10:53.340 that every developer should really have. 184 00:10:53.340 --> 00:10:55.470 But as always, before moving on, 185 00:10:55.470 --> 00:10:59.760 make 100% sure that you understood all these fundamentals 186 00:10:59.760 --> 00:11:02.760 from this section and a previous section. 187 00:11:02.760 --> 00:11:06.300 So if you want, you can redo the challenges or you can 188 00:11:06.300 --> 00:11:10.470 come up with your own small problems or ideas to solve. 189 00:11:10.470 --> 00:11:11.303 And by doing that, 190 00:11:11.303 --> 00:11:14.370 you'll reinforce all these tools even better 191 00:11:14.370 --> 00:11:17.850 and ultimately become a better developer faster. 192 00:11:17.850 --> 00:11:21.633 Then when you're really ready, let's together move forward.