WEBVTT 1 00:00:01.270 --> 00:00:04.620 Let's now take functions even one step further 2 00:00:04.620 --> 00:00:09.060 and calling one function from inside another function. 3 00:00:09.060 --> 00:00:12.440 And this is something that we do all the time in JavaScript. 4 00:00:12.440 --> 00:00:14.740 But I have seen many beginners struggle 5 00:00:14.740 --> 00:00:17.020 to understand this logic. 6 00:00:17.020 --> 00:00:20.923 And so I created a specific video just for this topic. 7 00:00:22.550 --> 00:00:25.980 And to illustrate functions calling other functions 8 00:00:25.980 --> 00:00:28.650 let's go back to our initial example 9 00:00:28.650 --> 00:00:31.870 of a function being like a fruitProcessor. 10 00:00:31.870 --> 00:00:36.870 So let's move to the first functions lecture 11 00:00:37.020 --> 00:00:41.253 which just this one and simply copy this function. 12 00:00:45.290 --> 00:00:48.230 So remember that we had this function 13 00:00:48.230 --> 00:00:50.340 which was like a fruit processor 14 00:00:50.340 --> 00:00:52.850 which received a certain number of apples 15 00:00:52.850 --> 00:00:54.680 and a certain number of oranges. 16 00:00:54.680 --> 00:00:56.130 And then based on that 17 00:00:56.130 --> 00:01:01.000 it basically produced and returned juice to us. 18 00:01:01.000 --> 00:01:02.600 But now in this example 19 00:01:02.600 --> 00:01:05.390 let's consider that the fruit processor 20 00:01:05.390 --> 00:01:09.210 can only make juice with smaller fruit pieces. 21 00:01:09.210 --> 00:01:11.270 And so before making the juice 22 00:01:11.270 --> 00:01:14.200 the fruit processor now needs another machine 23 00:01:14.200 --> 00:01:17.320 that first cuts the fruits that we give it 24 00:01:17.320 --> 00:01:19.493 and to multiple smaller pieces. 25 00:01:20.590 --> 00:01:23.680 So I hope that's not an example too silly 26 00:01:23.680 --> 00:01:25.680 but I think it makes sense actually 27 00:01:25.680 --> 00:01:29.300 to understand the point that I'm trying to make. 28 00:01:29.300 --> 00:01:33.200 So, let's actually start by writing that machine. 29 00:01:33.200 --> 00:01:36.603 So basically that function that cuts a fruit 30 00:01:36.603 --> 00:01:38.273 into multiple pieces. 31 00:01:39.160 --> 00:01:42.110 So let's say function cutFruitPieces 32 00:01:46.310 --> 00:01:50.163 and this function will receive a fruit. 33 00:01:51.450 --> 00:01:52.980 And all this function will do 34 00:01:52.980 --> 00:01:55.773 is to return the fruit cut in four pieces. 35 00:01:56.630 --> 00:02:01.630 So basically fruit multiplied by four. 36 00:02:01.770 --> 00:02:03.680 So if we get two apples here 37 00:02:03.680 --> 00:02:06.080 it will return eight pieces to us. 38 00:02:06.080 --> 00:02:08.730 So simply the number eight, okay? 39 00:02:08.730 --> 00:02:12.400 So that's our machine that cuts the fruit in pieces. 40 00:02:12.400 --> 00:02:15.550 And now here in the fruitProcessor itself 41 00:02:15.550 --> 00:02:17.800 we received apples and oranges 42 00:02:17.800 --> 00:02:21.170 and then we're gonna use our newly created machine 43 00:02:21.170 --> 00:02:25.830 to cut the received apples and oranges in two pieces. 44 00:02:25.830 --> 00:02:28.133 And so let's do that. 45 00:02:29.100 --> 00:02:32.897 So we start by calling cutFruitPieces in here 46 00:02:35.280 --> 00:02:39.900 with the number of apples that were received. 47 00:02:39.900 --> 00:02:41.960 And the result of calling this function 48 00:02:41.960 --> 00:02:43.150 we will then capture 49 00:02:43.150 --> 00:02:45.570 into a variable called, applePieces Okay? 50 00:02:51.430 --> 00:02:54.833 And now let's do the same for the oranges that we receive. 51 00:02:56.410 --> 00:03:01.410 So orangePieces will be also cutFruitPieces 52 00:03:04.400 --> 00:03:09.400 but we call it with the oranges okay? 53 00:03:09.530 --> 00:03:11.480 And so for the first time now 54 00:03:11.480 --> 00:03:14.893 we called one function inside of another function. 55 00:03:16.660 --> 00:03:21.660 So if we now call fruitProcessor with two and three 56 00:03:26.690 --> 00:03:29.680 then this will call the fruitProcessor function 57 00:03:29.680 --> 00:03:33.730 which then in turn will call the cutFruitPieces function 58 00:03:33.730 --> 00:03:34.890 and actually twice. 59 00:03:34.890 --> 00:03:37.350 So once here and once here. 60 00:03:37.350 --> 00:03:40.670 And so let's not actually analyze how the data flows 61 00:03:40.670 --> 00:03:42.213 between these functions. 62 00:03:43.470 --> 00:03:45.850 So down here we are calling the fruitProcessor function 63 00:03:46.710 --> 00:03:49.710 with the arguments two and three. 64 00:03:49.710 --> 00:03:51.320 And as we already know 65 00:03:51.320 --> 00:03:54.500 this will then replace the apples parameter in the function 66 00:03:54.500 --> 00:03:57.188 with the number two anti oranges parameter 67 00:03:57.188 --> 00:04:00.320 and the function with the number three. 68 00:04:00.320 --> 00:04:03.440 So that should be nothing new at this point, right? 69 00:04:03.440 --> 00:04:06.340 We are simply replacing the parameter replace orders 70 00:04:06.340 --> 00:04:09.260 with the actual values, two and three. 71 00:04:09.260 --> 00:04:11.300 And now let's analyze what's gonna happen 72 00:04:11.300 --> 00:04:13.500 with these apple value. 73 00:04:13.500 --> 00:04:16.550 So apple right now holds the number two. 74 00:04:16.550 --> 00:04:18.810 And that value two will then be used 75 00:04:18.810 --> 00:04:22.320 to call the cutPieces function right ? 76 00:04:22.320 --> 00:04:24.430 Now, as we call cutPieces 77 00:04:24.430 --> 00:04:26.680 this too is actually the argument 78 00:04:26.680 --> 00:04:28.940 for the cutPieces function. 79 00:04:28.940 --> 00:04:32.610 And it will basically replace the fruit parameter. 80 00:04:32.610 --> 00:04:35.490 So the fruit placeholder okay? 81 00:04:35.490 --> 00:04:40.170 So now fruit here in this cutPieces function is also two. 82 00:04:40.170 --> 00:04:41.930 And they hope that these arrows here 83 00:04:41.930 --> 00:04:44.760 make the data flow quite obvious. 84 00:04:44.760 --> 00:04:46.850 Then inside this function 85 00:04:46.850 --> 00:04:49.580 of course the fruit is then also two 86 00:04:49.580 --> 00:04:51.820 which we'll get multiplied by a four. 87 00:04:51.820 --> 00:04:53.870 And so the result here is gonna be eight. 88 00:04:54.730 --> 00:04:57.890 And so the result of calling this cutPieces function 89 00:04:57.890 --> 00:05:00.640 with apples will be eight. 90 00:05:00.640 --> 00:05:03.210 And so that's the value that we then store 91 00:05:03.210 --> 00:05:05.440 into the applePieces variable. 92 00:05:05.440 --> 00:05:09.005 And from there we will then built this juice string 93 00:05:09.005 --> 00:05:12.210 that we have down here okay? 94 00:05:12.210 --> 00:05:15.380 So take a moment and analyze exactly how the data flows 95 00:05:15.380 --> 00:05:18.030 from one function to another 96 00:05:18.030 --> 00:05:20.920 because I know that it can be a little bit confusing 97 00:05:20.920 --> 00:05:23.880 especially calling the cutPieces function here 98 00:05:23.880 --> 00:05:25.900 without a tangible number. 99 00:05:25.900 --> 00:05:27.550 So we're calling cutPieces here 100 00:05:27.550 --> 00:05:30.730 not with an actual number that we wrote ourselves 101 00:05:30.730 --> 00:05:32.300 like two or three 102 00:05:32.300 --> 00:05:35.270 but really with the argument that we received 103 00:05:35.270 --> 00:05:37.230 into fruitProcessor. 104 00:05:37.230 --> 00:05:39.200 So that can be a little bit confusing 105 00:05:39.200 --> 00:05:43.800 so take a second to understand exactly what happens here. 106 00:05:43.800 --> 00:05:46.240 And what happened here with the apples variable 107 00:05:46.240 --> 00:05:49.880 will of course happen exactly the same with oranges. 108 00:05:49.880 --> 00:05:52.680 And so I'm not gonna go into that part here. 109 00:05:52.680 --> 00:05:56.020 Because that would be too confusing having all these arrows 110 00:05:56.020 --> 00:05:57.510 here on the slide. 111 00:05:57.510 --> 00:06:00.050 But of course you can analyze that for yourself 112 00:06:00.050 --> 00:06:02.680 and see exactly what is gonna happen. 113 00:06:02.680 --> 00:06:05.290 But now let's move back to the code 114 00:06:05.290 --> 00:06:07.933 to see how this actually works out in practice. 115 00:06:09.540 --> 00:06:14.060 And so now we need to change this juice string here. 116 00:06:14.060 --> 00:06:15.420 So in the function that we just saw 117 00:06:15.420 --> 00:06:17.550 it was already complete 118 00:06:17.550 --> 00:06:20.550 but let's now write it out ourselves. 119 00:06:20.550 --> 00:06:22.700 So here we used to have apples 120 00:06:22.700 --> 00:06:27.111 but now we want to use the applePieces value. 121 00:06:27.111 --> 00:06:29.778 So applePieces, piece of apples 122 00:06:32.048 --> 00:06:34.881 and then here we want orangePieces 123 00:06:37.280 --> 00:06:38.697 pieces of orange. 124 00:06:41.156 --> 00:06:43.656 So orange and apple here okay? 125 00:06:45.753 --> 00:06:48.450 So here we call the fruitProcessor function then 126 00:06:48.450 --> 00:06:50.810 just as I explained in the slide 127 00:06:50.810 --> 00:06:54.420 and then let's simply lock the result to the console. 128 00:06:54.420 --> 00:06:57.070 There is no need in this case to store it 129 00:06:57.070 --> 00:06:59.357 into a variable okay? 130 00:06:59.357 --> 00:07:01.210 And so again this works 131 00:07:01.210 --> 00:07:04.150 because the result of calling this function 132 00:07:04.150 --> 00:07:06.250 will become this string here 133 00:07:06.250 --> 00:07:08.363 that we return from the function. 134 00:07:09.460 --> 00:07:12.723 And so then console.log works with that string. 135 00:07:13.730 --> 00:07:15.550 So let's try that. 136 00:07:15.550 --> 00:07:18.510 And indeed, we get a juice with eight pieces 137 00:07:18.510 --> 00:07:21.200 which is four times two here 138 00:07:21.200 --> 00:07:23.920 and then a 12 pieces of orange 139 00:07:23.920 --> 00:07:26.680 which is three times four. 140 00:07:26.680 --> 00:07:29.898 And so that works just as expected. 141 00:07:29.898 --> 00:07:33.350 Great, so I think that was a really great example 142 00:07:33.350 --> 00:07:35.700 to illustrate the mechanics 143 00:07:35.700 --> 00:07:38.420 of one function calling the other. 144 00:07:38.420 --> 00:07:41.980 But now again, you might ask the following question. 145 00:07:41.980 --> 00:07:46.570 Why not simply multiply both of the input values by four 146 00:07:46.570 --> 00:07:48.110 and call it a day? 147 00:07:48.110 --> 00:07:49.710 So we could do that of course. 148 00:07:49.710 --> 00:07:53.830 We can say applePieces equals apples times four 149 00:07:53.830 --> 00:07:58.350 and orangePieces here is oranges times four as well. 150 00:07:58.350 --> 00:08:03.110 Well, but we did it this way for well, multiple reasons. 151 00:08:03.110 --> 00:08:05.460 First, the point that I'm making here 152 00:08:05.460 --> 00:08:06.830 is that it's very common 153 00:08:06.830 --> 00:08:09.300 for one function to call another function. 154 00:08:09.300 --> 00:08:11.120 So just like we did here. 155 00:08:11.120 --> 00:08:15.000 Then second, this is also a very good example to illustrate 156 00:08:15.000 --> 00:08:17.410 the don't repeat yourself principle 157 00:08:17.410 --> 00:08:19.010 that I mentioned earlier. 158 00:08:19.010 --> 00:08:21.070 So the DRY principle. 159 00:08:21.070 --> 00:08:23.430 For example imagine that suddenly 160 00:08:23.430 --> 00:08:26.610 the cutting machine would cut in three pieces 161 00:08:26.610 --> 00:08:28.850 and not in four pieces. 162 00:08:28.850 --> 00:08:30.170 Then if we didn't have 163 00:08:30.170 --> 00:08:32.680 to separate cutFruitPieces function 164 00:08:32.680 --> 00:08:35.790 we would have to change the code in multiple places. 165 00:08:35.790 --> 00:08:39.350 And this is not a problem of course with two lines of code. 166 00:08:39.350 --> 00:08:43.490 But if we needed to cut like 10 fruits into pieces 167 00:08:43.490 --> 00:08:46.220 then we would have to change that in all the places 168 00:08:46.220 --> 00:08:48.190 and that would simply be annoying 169 00:08:48.190 --> 00:08:50.830 and it could also be a source of bugs 170 00:08:50.830 --> 00:08:52.880 so of coding mistakes. 171 00:08:52.880 --> 00:08:55.960 And so it's a lot better to put that functionality 172 00:08:55.960 --> 00:08:57.800 into its own function. 173 00:08:57.800 --> 00:09:00.970 So if the fruit was now only cut in three pieces 174 00:09:00.970 --> 00:09:03.830 all you have to do is to change it here 175 00:09:03.830 --> 00:09:04.763 and that's it. 176 00:09:05.900 --> 00:09:07.980 Then this changes to six 177 00:09:07.980 --> 00:09:11.680 which is two times three and does changes to nine 178 00:09:11.680 --> 00:09:15.140 which is three times three okay? 179 00:09:15.140 --> 00:09:17.520 So I hope dad made sense to you 180 00:09:17.520 --> 00:09:21.070 and that you can start internalizing this kind of logic. 181 00:09:21.070 --> 00:09:23.600 With time and practice you will exactly know 182 00:09:23.600 --> 00:09:26.010 when you should create your own functions 183 00:09:26.010 --> 00:09:29.763 and when to have multiple functions one calling another. 184 00:09:30.830 --> 00:09:34.740 Great, once more congratulations for all the progress 185 00:09:34.740 --> 00:09:36.700 that you're making here. 186 00:09:36.700 --> 00:09:38.968 Working through these lectures about functions 187 00:09:38.968 --> 00:09:41.440 can be a lot of work, I know 188 00:09:41.440 --> 00:09:44.290 and it can be sometimes a little bit confusing. 189 00:09:44.290 --> 00:09:46.060 So you're making great progress 190 00:09:46.060 --> 00:09:48.060 and it's great to see that you all ready 191 00:09:48.060 --> 00:09:50.130 at this point of the course. 192 00:09:50.130 --> 00:09:53.110 So again functions is a very important topic 193 00:09:53.110 --> 00:09:54.350 and so in the next video 194 00:09:54.350 --> 00:09:56.400 we're gonna take a couple of minutes 195 00:09:56.400 --> 00:09:59.850 to review the fundamental principles about functions 196 00:09:59.850 --> 00:10:01.600 that we just learned here. 197 00:10:01.600 --> 00:10:05.293 So stay tuned for that one and I see you in a minute.