Speaker: 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.