1 00:00:00,870 --> 00:00:02,969 Okay, and let's start 2 00:00:02,969 --> 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,589 creating the array by calling calc tip with bills zero, 70 00:04:19,589 --> 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,159 and now what we want to return is simply the sum 142 00:08:34,919 --> 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.