Original subtitles

Let's now take functions even one step further

and calling one function from inside another function.

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

But I have seen many beginners struggle

to understand this logic.

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

And to illustrate functions calling other functions

let's go back to our initial example

of a function being like a fruitProcessor.

So let's move to the first functions lecture

which just this one and simply copy this function.

So remember that we had this function

which was like a fruit processor

which received a certain number of apples

and a certain number of oranges.

And then based on that

it basically produced and returned juice to us.

But now in this example

let's consider that the fruit processor

can only make juice with smaller fruit pieces.

And so before making the juice

the fruit processor now needs another machine

that first cuts the fruits that we give it

and to multiple smaller pieces.

So I hope that's not an example too silly

but I think it makes sense actually

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

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

So basically that function that cuts a fruit

into multiple pieces.

So let's say function cutFruitPieces

and this function will receive a fruit.

And all this function will do

is to return the fruit cut in four pieces.

So basically fruit multiplied by four.

So if we get two apples here

it will return eight pieces to us.

So simply the number eight, okay?

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

And now here in the fruitProcessor itself

we received apples and oranges

and then we're gonna use our newly created machine

to cut the received apples and oranges in two pieces.

And so let's do that.

So we start by calling cutFruitPieces in here

with the number of apples that were received.

And the result of calling this function

we will then capture

into a variable called, applePieces Okay?

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

So orangePieces will be also cutFruitPieces

but we call it with the oranges okay?

And so for the first time now

we called one function inside of another function.

So if we now call fruitProcessor with two and three

then this will call the fruitProcessor function

which then in turn will call the cutFruitPieces function

and actually twice.

So once here and once here.

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

between these functions.

So down here we are calling the fruitProcessor function

with the arguments two and three.

And as we already know

this will then replace the apples parameter in the function

with the number two anti oranges parameter

and the function with the number three.

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

We are simply replacing the parameter replace orders

with the actual values, two and three.

And now let's analyze what's gonna happen

with these apple value.

So apple right now holds the number two.

And that value two will then be used

to call the cutPieces function right ?

Now, as we call cutPieces

this too is actually the argument

for the cutPieces function.

And it will basically replace the fruit parameter.

So the fruit placeholder okay?

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

And they hope that these arrows here

make the data flow quite obvious.

Then inside this function

of course the fruit is then also two

which we'll get multiplied by a four.

And so the result here is gonna be eight.

And so the result of calling this cutPieces function

with apples will be eight.

And so that's the value that we then store

into the applePieces variable.

And from there we will then built this juice string

that we have down here okay?

So take a moment and analyze exactly how the data flows

from one function to another

because I know that it can be a little bit confusing

especially calling the cutPieces function here

without a tangible number.

So we're calling cutPieces here

not with an actual number that we wrote ourselves

like two or three

but really with the argument that we received

into fruitProcessor.

So that can be a little bit confusing

so take a second to understand exactly what happens here.

And what happened here with the apples variable

will of course happen exactly the same with oranges.

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

Because that would be too confusing having all these arrows

here on the slide.

But of course you can analyze that for yourself

and see exactly what is gonna happen.

But now let's move back to the code

to see how this actually works out in practice.

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

So in the function that we just saw

it was already complete

but let's now write it out ourselves.

So here we used to have apples

but now we want to use the applePieces value.

So applePieces, piece of apples

and then here we want orangePieces

pieces of orange.

So orange and apple here okay?

So here we call the fruitProcessor function then

just as I explained in the slide

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

There is no need in this case to store it

into a variable okay?

And so again this works

because the result of calling this function

will become this string here

that we return from the function.

And so then console.log works with that string.

So let's try that.

And indeed, we get a juice with eight pieces

which is four times two here

and then a 12 pieces of orange

which is three times four.

And so that works just as expected.

Great, so I think that was a really great example

to illustrate the mechanics

of one function calling the other.

But now again, you might ask the following question.

Why not simply multiply both of the input values by four

and call it a day?

So we could do that of course.

We can say applePieces equals apples times four

and orangePieces here is oranges times four as well.

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

First, the point that I'm making here

is that it's very common

for one function to call another function.

So just like we did here.

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

the don't repeat yourself principle

that I mentioned earlier.

So the DRY principle.

For example imagine that suddenly

the cutting machine would cut in three pieces

and not in four pieces.

Then if we didn't have

to separate cutFruitPieces function

we would have to change the code in multiple places.

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

But if we needed to cut like 10 fruits into pieces

then we would have to change that in all the places

and that would simply be annoying

and it could also be a source of bugs

so of coding mistakes.

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

into its own function.

So if the fruit was now only cut in three pieces

all you have to do is to change it here

and that's it.

Then this changes to six

which is two times three and does changes to nine

which is three times three okay?

So I hope dad made sense to you

and that you can start internalizing this kind of logic.

With time and practice you will exactly know

when you should create your own functions

and when to have multiple functions one calling another.

Great, once more congratulations for all the progress

that you're making here.

Working through these lectures about functions

can be a lot of work, I know

and it can be sometimes a little bit confusing.

So you're making great progress

and it's great to see that you all ready

at this point of the course.

So again functions is a very important topic

and so in the next video

we're gonna take a couple of minutes

to review the fundamental principles about functions

that we just learned here.

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