Original subtitles

1 1

Let's now take functions even one step further 2

2

and calling one function from inside another function. 3

3

And this is something that we do all the time in JavaScript. 4

4

But I have seen many beginners struggle 5

5

to understand this logic. 6

6

And so I created a specific video just for this topic. 7

7

And to illustrate functions calling other functions 8

8

let's go back to our initial example 9

9

of a function being like a fruitProcessor. 10

10

So let's move to the first functions lecture 11

11

which just this one and simply copy this function. 12

12

So remember that we had this function 13

13

which was like a fruit processor 14

14

which received a certain number of apples 15

15

and a certain number of oranges. 16

16

And then based on that 17

17

it basically produced and returned juice to us. 18

18

But now in this example 19

19

let's consider that the fruit processor 20

20

can only make juice with smaller fruit pieces. 21

21

And so before making the juice 22

22

the fruit processor now needs another machine 23

23

that first cuts the fruits that we give it 24

24

and to multiple smaller pieces. 25

25

So I hope that's not an example too silly 26

26

but I think it makes sense actually 27

27

to understand the point that I'm trying to make. 28

28

So, let's actually start by writing that machine. 29

29

So basically that function that cuts a fruit 30

30

into multiple pieces. 31

31

So let's say function cutFruitPieces 32

32

and this function will receive a fruit. 33

33

And all this function will do 34

34

is to return the fruit cut in four pieces. 35

35

So basically fruit multiplied by four. 36

36

So if we get two apples here 37

37

it will return eight pieces to us. 38

38

So simply the number eight, okay? 39

39

So that's our machine that cuts the fruit in pieces. 40

40

And now here in the fruitProcessor itself 41

41

we received apples and oranges 42

42

and then we're gonna use our newly created machine 43

43

to cut the received apples and oranges in two pieces. 44

44

And so let's do that. 45

45

So we start by calling cutFruitPieces in here 46

46

with the number of apples that were received. 47

47

And the result of calling this function 48

48

we will then capture 49

49

into a variable called, applePieces Okay? 50

50

And now let's do the same for the oranges that we receive. 51

51

So orangePieces will be also cutFruitPieces 52

52

but we call it with the oranges okay? 53

53

And so for the first time now 54

54

we called one function inside of another function. 55

55

So if we now call fruitProcessor with two and three 56

56

then this will call the fruitProcessor function 57

57

which then in turn will call the cutFruitPieces function 58

58

and actually twice. 59

59

So once here and once here. 60

60

And so let's not actually analyze how the data flows 61

61

between these functions. 62

62

So down here we are calling the fruitProcessor function 63

63

with the arguments two and three. 64

64

And as we already know 65

65

this will then replace the apples parameter in the function 66

66

with the number two anti oranges parameter 67

67

and the function with the number three. 68

68

So that should be nothing new at this point, right? 69

69

We are simply replacing the parameter replace orders 70

70

with the actual values, two and three. 71

71

And now let's analyze what's gonna happen 72

72

with these apple value. 73

73

So apple right now holds the number two. 74

74

And that value two will then be used 75

75

to call the cutPieces function right ? 76

76

Now, as we call cutPieces 77

77

this too is actually the argument 78

78

for the cutPieces function. 79

79

And it will basically replace the fruit parameter. 80

80

So the fruit placeholder okay? 81

81

So now fruit here in this cutPieces function is also two. 82

82

And they hope that these arrows here 83

83

make the data flow quite obvious. 84

84

Then inside this function 85

85

of course the fruit is then also two 86

86

which we'll get multiplied by a four. 87

87

And so the result here is gonna be eight. 88

88

And so the result of calling this cutPieces function 89

89

with apples will be eight. 90

90

And so that's the value that we then store 91

91

into the applePieces variable. 92

92

And from there we will then built this juice string 93

93

that we have down here okay? 94

94

So take a moment and analyze exactly how the data flows 95

95

from one function to another 96

96

because I know that it can be a little bit confusing 97

97

especially calling the cutPieces function here 98

98

without a tangible number. 99

99

So we're calling cutPieces here 100

100

not with an actual number that we wrote ourselves 101

101

like two or three 102

102

but really with the argument that we received 103

103

into fruitProcessor. 104

104

So that can be a little bit confusing 105

105

so take a second to understand exactly what happens here. 106

106

And what happened here with the apples variable 107

107

will of course happen exactly the same with oranges. 108

108

And so I'm not gonna go into that part here. 109

109

Because that would be too confusing having all these arrows 110

110

here on the slide. 111

111

But of course you can analyze that for yourself 112

112

and see exactly what is gonna happen. 113

113

But now let's move back to the code 114

114

to see how this actually works out in practice. 115

115

And so now we need to change this juice string here. 116

116

So in the function that we just saw 117

117

it was already complete 118

118

but let's now write it out ourselves. 119

119

So here we used to have apples 120

120

but now we want to use the applePieces value. 121

121

So applePieces, piece of apples 122

122

and then here we want orangePieces 123

123

pieces of orange. 124

124

So orange and apple here okay? 125

125

So here we call the fruitProcessor function then 126

126

just as I explained in the slide 127

127

and then let's simply lock the result to the console. 128

128

There is no need in this case to store it 129

129

into a variable okay? 130

130

And so again this works 131

131

because the result of calling this function 132

132

will become this string here 133

133

that we return from the function. 134

134

And so then console.log works with that string. 135

135

So let's try that. 136

136

And indeed, we get a juice with eight pieces 137

137

which is four times two here 138

138

and then a 12 pieces of orange 139

139

which is three times four. 140

140

And so that works just as expected. 141

141

Great, so I think that was a really great example 142

142

to illustrate the mechanics 143

143

of one function calling the other. 144

144

But now again, you might ask the following question. 145

145

Why not simply multiply both of the input values by four 146

146

and call it a day? 147

147

So we could do that of course. 148

148

We can say applePieces equals apples times four 149

149

and orangePieces here is oranges times four as well. 150

150

Well, but we did it this way for well, multiple reasons. 151

151

First, the point that I'm making here 152

152

is that it's very common 153

153

for one function to call another function. 154

154

So just like we did here. 155

155

Then second, this is also a very good example to illustrate 156

156

the don't repeat yourself principle 157

157

that I mentioned earlier. 158

158

So the DRY principle. 159

159

For example imagine that suddenly 160

160

the cutting machine would cut in three pieces 161

161

and not in four pieces. 162

162

Then if we didn't have 163

163

to separate cutFruitPieces function 164

164

we would have to change the code in multiple places. 165

165

And this is not a problem of course with two lines of code. 166

166

But if we needed to cut like 10 fruits into pieces 167

167

then we would have to change that in all the places 168

168

and that would simply be annoying 169

169

and it could also be a source of bugs 170

170

so of coding mistakes. 171

171

And so it's a lot better to put that functionality 172

172

into its own function. 173

173

So if the fruit was now only cut in three pieces 174

174

all you have to do is to change it here 175

175

and that's it. 176

176

Then this changes to six 177

177

which is two times three and does changes to nine 178

178

which is three times three okay? 179

179

So I hope dad made sense to you 180

180

and that you can start internalizing this kind of logic. 181

181

With time and practice you will exactly know 182

182

when you should create your own functions 183

183

and when to have multiple functions one calling another. 184

184

Great, once more congratulations for all the progress 185

185

that you're making here. 186

186

Working through these lectures about functions 187

187

can be a lot of work, I know 188

188

and it can be sometimes a little bit confusing. 189

189

So you're making great progress 190

190

and it's great to see that you all ready 191

191

at this point of the course. 192

192

So again functions is a very important topic 193

193

and so in the next video 194

194

we're gonna take a couple of minutes 195

195

to review the fundamental principles about functions 196

196

that we just learned here. 197

197

So stay tuned for that one and I see you in a minute.