Functions Calling Other Functions
Let's now take a step further with functions by calling one function from inside another function. It's something that is being done all the time in JavaScript.
To illustrate what this is all about, let's consider a function that adds the square of two numbers. Before adding them, this function needs another function whose role is to calculate the square of each number. I hope you understand the point I'm trying to make
Let's start by writing that function that calculates the square of a number.
function square(number) {
return number * number;
}
What the above function simply does is, we give it a number and what is returned to us is the square of that number, .i.e, if we give it 4 it gives us 16 as the returned value.
We now need to write that function which adds the square of two numbers. In this function we are about to write, we will use the previously created square
function to calculate the square of the different numbers we provide as parameters.
function addSquares(firstNumber, secondNumber) {
/**
* You can also do it like this :
* return square(firstNumber) + square(secondNumber)
*/
const squareFirstNumber = square(firstNumber);
const squareSecondNumber = square(secondNumber);
const additionResult = squareFirstNumber + squareSecondNumber;
return additionResult;
}
If we now execute or call our function addSquares
;
console.log(addSquares(2, 3));
This action will first call the addSquares
function, which then, in turn, will call the square
function twice, first to calculate the square of 2
and then that of 3
.
Let's try to analyze how data flows between these functions. We start by calling addSquares
with the arguments 2
and 3
; and as we already know, this will replace the firsNumber
parameter with 2
and the secondNumber
parameter with 3
. Up till now, everything should be fine because we are just replacing the function parameters with the actual values 2
and 3
.
firstNumber
and secondNumber
now hold the values 2
and 3
, respectively. Let's start with firstNumber
. The value of firstNumber
will be used to call the square
function. As we call the square
function, the firstNumber
parameter whose value is 2
is the argument for the square
function which will replace the number
parameter.
Inside the square
function, the value of the number
parameter is also 2
, which is then multiplied by itself, giving us 4
, which is then returned and stored in the squareFirstNumber
variable, which is then used in the addition process.
What happened with the firstNumber
variable will, of course, happen exactly the same with secondNumber
variable.
You might then be asking yourself the question, why do we need to create two functions? Why don't we just multiply both input values by themselves, add them up, and return the result all in a single function and call it a day?
We can actually do that, but we did it this way because:
It's very common for one function to call another function, just like we did
It's a very good example to illustrate the DRY (Don't Repeat Yourself) principle. Here is what I mean.
Right now, here is what we have:
const squareFirstNumber = square(firstNumber);
const squareSecondNumber = square(secondNumber);
Now imagine we instead had this:
const squareFirstNumber = firstNumber * firstNumber;
const squareSecondNumber = secondNumber * secondNumber;
Let's now say tomorrow we want that after squaring our number, we add 10
to it. This mean we need to do it twice .i.e for squareFirstNumber
and squareSecondNumber
.
const squareFirstNumber = firstNumber * firstNumber + 10;
const squareSecondNumber = secondNumber * secondNumber + 10;
If after some time again we need to divide by 12
after adding 10
, you see again that we have to update the equation on those two lines. That's not a big deal because we have two lines to deal with. But imagine you had like 20 or 30 lines, then we would have to change that in all those places. That will be annoying, and it could also be a source of bugs.
That's why it's much better to put that functionality in it's own function. So that if we had to add 10
and then divide by 12
, all we have to do is to update our square
function.
Always keep in mind that the DRY principle keeps our code clean and more maintainable.