const - JS | lectureJavaScript Fundamentals 2

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:

1. It's very common for one function to call another function, just like we did

2. 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.