Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,270 --> 00:00:04,620 Let's now take functions even one step further 2 2 00:00:04,620 --> 00:00:09,060 and calling one function from inside another function. 3 3 00:00:09,060 --> 00:00:12,440 And this is something that we do all the time in JavaScript. 4 4 00:00:12,440 --> 00:00:14,740 But I have seen many beginners struggle 5 5 00:00:14,740 --> 00:00:17,020 to understand this logic. 6 6 00:00:17,020 --> 00:00:20,923 And so I created a specific video just for this topic. 7 7 00:00:22,550 --> 00:00:25,980 And to illustrate functions calling other functions 8 8 00:00:25,980 --> 00:00:28,650 let's go back to our initial example 9 9 00:00:28,650 --> 00:00:31,870 of a function being like a fruitProcessor. 10 10 00:00:31,870 --> 00:00:36,870 So let's move to the first functions lecture 11 11 00:00:37,020 --> 00:00:41,253 which just this one and simply copy this function. 12 12 00:00:45,290 --> 00:00:48,230 So remember that we had this function 13 13 00:00:48,230 --> 00:00:50,340 which was like a fruit processor 14 14 00:00:50,340 --> 00:00:52,850 which received a certain number of apples 15 15 00:00:52,850 --> 00:00:54,680 and a certain number of oranges. 16 16 00:00:54,680 --> 00:00:56,130 And then based on that 17 17 00:00:56,130 --> 00:01:01,000 it basically produced and returned juice to us. 18 18 00:01:01,000 --> 00:01:02,600 But now in this example 19 19 00:01:02,600 --> 00:01:05,390 let's consider that the fruit processor 20 20 00:01:05,390 --> 00:01:09,210 can only make juice with smaller fruit pieces. 21 21 00:01:09,210 --> 00:01:11,270 And so before making the juice 22 22 00:01:11,270 --> 00:01:14,200 the fruit processor now needs another machine 23 23 00:01:14,200 --> 00:01:17,320 that first cuts the fruits that we give it 24 24 00:01:17,320 --> 00:01:19,493 and to multiple smaller pieces. 25 25 00:01:20,590 --> 00:01:23,680 So I hope that's not an example too silly 26 26 00:01:23,680 --> 00:01:25,680 but I think it makes sense actually 27 27 00:01:25,680 --> 00:01:29,300 to understand the point that I'm trying to make. 28 28 00:01:29,300 --> 00:01:33,200 So, let's actually start by writing that machine. 29 29 00:01:33,200 --> 00:01:36,603 So basically that function that cuts a fruit 30 30 00:01:36,603 --> 00:01:38,273 into multiple pieces. 31 31 00:01:39,160 --> 00:01:42,110 So let's say function cutFruitPieces 32 32 00:01:46,310 --> 00:01:50,163 and this function will receive a fruit. 33 33 00:01:51,450 --> 00:01:52,980 And all this function will do 34 34 00:01:52,980 --> 00:01:55,773 is to return the fruit cut in four pieces. 35 35 00:01:56,630 --> 00:02:01,630 So basically fruit multiplied by four. 36 36 00:02:01,770 --> 00:02:03,680 So if we get two apples here 37 37 00:02:03,680 --> 00:02:06,080 it will return eight pieces to us. 38 38 00:02:06,080 --> 00:02:08,730 So simply the number eight, okay? 39 39 00:02:08,730 --> 00:02:12,400 So that's our machine that cuts the fruit in pieces. 40 40 00:02:12,400 --> 00:02:15,550 And now here in the fruitProcessor itself 41 41 00:02:15,550 --> 00:02:17,800 we received apples and oranges 42 42 00:02:17,800 --> 00:02:21,170 and then we're gonna use our newly created machine 43 43 00:02:21,170 --> 00:02:25,830 to cut the received apples and oranges in two pieces. 44 44 00:02:25,830 --> 00:02:28,133 And so let's do that. 45 45 00:02:29,100 --> 00:02:32,897 So we start by calling cutFruitPieces in here 46 46 00:02:35,280 --> 00:02:39,900 with the number of apples that were received. 47 47 00:02:39,900 --> 00:02:41,960 And the result of calling this function 48 48 00:02:41,960 --> 00:02:43,150 we will then capture 49 49 00:02:43,150 --> 00:02:45,570 into a variable called, applePieces Okay? 50 50 00:02:51,430 --> 00:02:54,833 And now let's do the same for the oranges that we receive. 51 51 00:02:56,410 --> 00:03:01,410 So orangePieces will be also cutFruitPieces 52 52 00:03:04,400 --> 00:03:09,400 but we call it with the oranges okay? 53 53 00:03:09,530 --> 00:03:11,480 And so for the first time now 54 54 00:03:11,480 --> 00:03:14,893 we called one function inside of another function. 55 55 00:03:16,660 --> 00:03:21,660 So if we now call fruitProcessor with two and three 56 56 00:03:26,690 --> 00:03:29,680 then this will call the fruitProcessor function 57 57 00:03:29,680 --> 00:03:33,730 which then in turn will call the cutFruitPieces function 58 58 00:03:33,730 --> 00:03:34,890 and actually twice. 59 59 00:03:34,890 --> 00:03:37,350 So once here and once here. 60 60 00:03:37,350 --> 00:03:40,670 And so let's not actually analyze how the data flows 61 61 00:03:40,670 --> 00:03:42,213 between these functions. 62 62 00:03:43,470 --> 00:03:45,850 So down here we are calling the fruitProcessor function 63 63 00:03:46,710 --> 00:03:49,710 with the arguments two and three. 64 64 00:03:49,710 --> 00:03:51,320 And as we already know 65 65 00:03:51,320 --> 00:03:54,500 this will then replace the apples parameter in the function 66 66 00:03:54,500 --> 00:03:57,188 with the number two anti oranges parameter 67 67 00:03:57,188 --> 00:04:00,320 and the function with the number three. 68 68 00:04:00,320 --> 00:04:03,440 So that should be nothing new at this point, right? 69 69 00:04:03,440 --> 00:04:06,340 We are simply replacing the parameter replace orders 70 70 00:04:06,340 --> 00:04:09,260 with the actual values, two and three. 71 71 00:04:09,260 --> 00:04:11,300 And now let's analyze what's gonna happen 72 72 00:04:11,300 --> 00:04:13,500 with these apple value. 73 73 00:04:13,500 --> 00:04:16,550 So apple right now holds the number two. 74 74 00:04:16,550 --> 00:04:18,810 And that value two will then be used 75 75 00:04:18,810 --> 00:04:22,320 to call the cutPieces function right ? 76 76 00:04:22,320 --> 00:04:24,430 Now, as we call cutPieces 77 77 00:04:24,430 --> 00:04:26,680 this too is actually the argument 78 78 00:04:26,680 --> 00:04:28,940 for the cutPieces function. 79 79 00:04:28,940 --> 00:04:32,610 And it will basically replace the fruit parameter. 80 80 00:04:32,610 --> 00:04:35,490 So the fruit placeholder okay? 81 81 00:04:35,490 --> 00:04:40,170 So now fruit here in this cutPieces function is also two. 82 82 00:04:40,170 --> 00:04:41,930 And they hope that these arrows here 83 83 00:04:41,930 --> 00:04:44,760 make the data flow quite obvious. 84 84 00:04:44,760 --> 00:04:46,850 Then inside this function 85 85 00:04:46,850 --> 00:04:49,580 of course the fruit is then also two 86 86 00:04:49,580 --> 00:04:51,820 which we'll get multiplied by a four. 87 87 00:04:51,820 --> 00:04:53,870 And so the result here is gonna be eight. 88 88 00:04:54,730 --> 00:04:57,890 And so the result of calling this cutPieces function 89 89 00:04:57,890 --> 00:05:00,640 with apples will be eight. 90 90 00:05:00,640 --> 00:05:03,210 And so that's the value that we then store 91 91 00:05:03,210 --> 00:05:05,440 into the applePieces variable. 92 92 00:05:05,440 --> 00:05:09,005 And from there we will then built this juice string 93 93 00:05:09,005 --> 00:05:12,210 that we have down here okay? 94 94 00:05:12,210 --> 00:05:15,380 So take a moment and analyze exactly how the data flows 95 95 00:05:15,380 --> 00:05:18,030 from one function to another 96 96 00:05:18,030 --> 00:05:20,920 because I know that it can be a little bit confusing 97 97 00:05:20,920 --> 00:05:23,880 especially calling the cutPieces function here 98 98 00:05:23,880 --> 00:05:25,900 without a tangible number. 99 99 00:05:25,900 --> 00:05:27,550 So we're calling cutPieces here 100 100 00:05:27,550 --> 00:05:30,730 not with an actual number that we wrote ourselves 101 101 00:05:30,730 --> 00:05:32,300 like two or three 102 102 00:05:32,300 --> 00:05:35,270 but really with the argument that we received 103 103 00:05:35,270 --> 00:05:37,230 into fruitProcessor. 104 104 00:05:37,230 --> 00:05:39,200 So that can be a little bit confusing 105 105 00:05:39,200 --> 00:05:43,800 so take a second to understand exactly what happens here. 106 106 00:05:43,800 --> 00:05:46,240 And what happened here with the apples variable 107 107 00:05:46,240 --> 00:05:49,880 will of course happen exactly the same with oranges. 108 108 00:05:49,880 --> 00:05:52,680 And so I'm not gonna go into that part here. 109 109 00:05:52,680 --> 00:05:56,020 Because that would be too confusing having all these arrows 110 110 00:05:56,020 --> 00:05:57,510 here on the slide. 111 111 00:05:57,510 --> 00:06:00,050 But of course you can analyze that for yourself 112 112 00:06:00,050 --> 00:06:02,680 and see exactly what is gonna happen. 113 113 00:06:02,680 --> 00:06:05,290 But now let's move back to the code 114 114 00:06:05,290 --> 00:06:07,933 to see how this actually works out in practice. 115 115 00:06:09,540 --> 00:06:14,060 And so now we need to change this juice string here. 116 116 00:06:14,060 --> 00:06:15,420 So in the function that we just saw 117 117 00:06:15,420 --> 00:06:17,550 it was already complete 118 118 00:06:17,550 --> 00:06:20,550 but let's now write it out ourselves. 119 119 00:06:20,550 --> 00:06:22,700 So here we used to have apples 120 120 00:06:22,700 --> 00:06:27,111 but now we want to use the applePieces value. 121 121 00:06:27,111 --> 00:06:29,778 So applePieces, piece of apples 122 122 00:06:32,048 --> 00:06:34,881 and then here we want orangePieces 123 123 00:06:37,280 --> 00:06:38,697 pieces of orange. 124 124 00:06:41,156 --> 00:06:43,656 So orange and apple here okay? 125 125 00:06:45,753 --> 00:06:48,450 So here we call the fruitProcessor function then 126 126 00:06:48,450 --> 00:06:50,810 just as I explained in the slide 127 127 00:06:50,810 --> 00:06:54,420 and then let's simply lock the result to the console. 128 128 00:06:54,420 --> 00:06:57,070 There is no need in this case to store it 129 129 00:06:57,070 --> 00:06:59,357 into a variable okay? 130 130 00:06:59,357 --> 00:07:01,210 And so again this works 131 131 00:07:01,210 --> 00:07:04,150 because the result of calling this function 132 132 00:07:04,150 --> 00:07:06,250 will become this string here 133 133 00:07:06,250 --> 00:07:08,363 that we return from the function. 134 134 00:07:09,460 --> 00:07:12,723 And so then console.log works with that string. 135 135 00:07:13,730 --> 00:07:15,550 So let's try that. 136 136 00:07:15,550 --> 00:07:18,510 And indeed, we get a juice with eight pieces 137 137 00:07:18,510 --> 00:07:21,200 which is four times two here 138 138 00:07:21,200 --> 00:07:23,920 and then a 12 pieces of orange 139 139 00:07:23,920 --> 00:07:26,680 which is three times four. 140 140 00:07:26,680 --> 00:07:29,898 And so that works just as expected. 141 141 00:07:29,898 --> 00:07:33,350 Great, so I think that was a really great example 142 142 00:07:33,350 --> 00:07:35,700 to illustrate the mechanics 143 143 00:07:35,700 --> 00:07:38,420 of one function calling the other. 144 144 00:07:38,420 --> 00:07:41,980 But now again, you might ask the following question. 145 145 00:07:41,980 --> 00:07:46,570 Why not simply multiply both of the input values by four 146 146 00:07:46,570 --> 00:07:48,110 and call it a day? 147 147 00:07:48,110 --> 00:07:49,710 So we could do that of course. 148 148 00:07:49,710 --> 00:07:53,830 We can say applePieces equals apples times four 149 149 00:07:53,830 --> 00:07:58,350 and orangePieces here is oranges times four as well. 150 150 00:07:58,350 --> 00:08:03,110 Well, but we did it this way for well, multiple reasons. 151 151 00:08:03,110 --> 00:08:05,460 First, the point that I'm making here 152 152 00:08:05,460 --> 00:08:06,830 is that it's very common 153 153 00:08:06,830 --> 00:08:09,300 for one function to call another function. 154 154 00:08:09,300 --> 00:08:11,120 So just like we did here. 155 155 00:08:11,120 --> 00:08:15,000 Then second, this is also a very good example to illustrate 156 156 00:08:15,000 --> 00:08:17,410 the don't repeat yourself principle 157 157 00:08:17,410 --> 00:08:19,010 that I mentioned earlier. 158 158 00:08:19,010 --> 00:08:21,070 So the DRY principle. 159 159 00:08:21,070 --> 00:08:23,430 For example imagine that suddenly 160 160 00:08:23,430 --> 00:08:26,610 the cutting machine would cut in three pieces 161 161 00:08:26,610 --> 00:08:28,850 and not in four pieces. 162 162 00:08:28,850 --> 00:08:30,170 Then if we didn't have 163 163 00:08:30,170 --> 00:08:32,680 to separate cutFruitPieces function 164 164 00:08:32,680 --> 00:08:35,790 we would have to change the code in multiple places. 165 165 00:08:35,790 --> 00:08:39,350 And this is not a problem of course with two lines of code. 166 166 00:08:39,350 --> 00:08:43,490 But if we needed to cut like 10 fruits into pieces 167 167 00:08:43,490 --> 00:08:46,220 then we would have to change that in all the places 168 168 00:08:46,220 --> 00:08:48,190 and that would simply be annoying 169 169 00:08:48,190 --> 00:08:50,830 and it could also be a source of bugs 170 170 00:08:50,830 --> 00:08:52,880 so of coding mistakes. 171 171 00:08:52,880 --> 00:08:55,960 And so it's a lot better to put that functionality 172 172 00:08:55,960 --> 00:08:57,800 into its own function. 173 173 00:08:57,800 --> 00:09:00,970 So if the fruit was now only cut in three pieces 174 174 00:09:00,970 --> 00:09:03,830 all you have to do is to change it here 175 175 00:09:03,830 --> 00:09:04,763 and that's it. 176 176 00:09:05,900 --> 00:09:07,980 Then this changes to six 177 177 00:09:07,980 --> 00:09:11,680 which is two times three and does changes to nine 178 178 00:09:11,680 --> 00:09:15,140 which is three times three okay? 179 179 00:09:15,140 --> 00:09:17,520 So I hope dad made sense to you 180 180 00:09:17,520 --> 00:09:21,070 and that you can start internalizing this kind of logic. 181 181 00:09:21,070 --> 00:09:23,600 With time and practice you will exactly know 182 182 00:09:23,600 --> 00:09:26,010 when you should create your own functions 183 183 00:09:26,010 --> 00:09:29,763 and when to have multiple functions one calling another. 184 184 00:09:30,830 --> 00:09:34,740 Great, once more congratulations for all the progress 185 185 00:09:34,740 --> 00:09:36,700 that you're making here. 186 186 00:09:36,700 --> 00:09:38,968 Working through these lectures about functions 187 187 00:09:38,968 --> 00:09:41,440 can be a lot of work, I know 188 188 00:09:41,440 --> 00:09:44,290 and it can be sometimes a little bit confusing. 189 189 00:09:44,290 --> 00:09:46,060 So you're making great progress 190 190 00:09:46,060 --> 00:09:48,060 and it's great to see that you all ready 191 191 00:09:48,060 --> 00:09:50,130 at this point of the course. 192 192 00:09:50,130 --> 00:09:53,110 So again functions is a very important topic 193 193 00:09:53,110 --> 00:09:54,350 and so in the next video 194 194 00:09:54,350 --> 00:09:56,400 we're gonna take a couple of minutes 195 195 00:09:56,400 --> 00:09:59,850 to review the fundamental principles about functions 196 196 00:09:59,850 --> 00:10:01,600 that we just learned here. 197 197 00:10:01,600 --> 00:10:05,293 So stay tuned for that one and I see you in a minute. 17015