How to define nested functions in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we are going to learn how can we define nested functions in JavaScript. Before learning how to define nested functions we need to learn what nested functions are.

A function can be called a nested function if it is defined inside another function means if we define one or two functions inside the scope of one function then the functions defined inside are known as nested functions. The outer function within which other functions are defined is known as the parent function and the functions defined inside the parent function are known as the child functions.

Syntax

Syntax to define a nested function in JavaScript is given as −

function parent_name ( param1, param2 ){
   function child_name ( param3,
   param4 ){
      statements; //body of the child function
   }
   statements; //body of the parent function
   child_name() //calling of child function
}
parent_name() //calling of parent function

Here param1, and param2 are the parameters declared in the parent function and param3, and param4 are the parameters declared in the child function

The parameters declared inside the parent function can be used by the child function, but the parameters declared inside the child function cannot be used by the parent function i.e., the scope of variables declared inside the parent function is up to the child function also but parameters of child function are local to that only.

As shown in the above syntax we can only call the child function inside the body of the parent function. It cannot be called from outside the parent function scope.

There are many methods/ approaches to define a nested function in JavaScript. Let’s investigate some of them −

Approach 1

In this approach, we will define a child function inside a parent function directly without any use of other variables or methods.

Steps to define a nested function in JavaScript -

Step 1 − Create a function named as add_two with two parameters declared inside it as a and b.
Step 2 − Now declare a new variable result and perform addition operation of a and b.
Step 3 − Now create another function named as add_three with one parameter declared inside it as c.
Step 4 − Again, perform the addition operation between variable result and c and store its value into variable result.
Step 5 − Now close the scope of child function and call the child function inside parent function.
Step 6 − Declare another variable named as answer and call parent function inside it with the two values of parameters provided.
Step 7 − At last print the value of variable answer.

Example

We can use the below HTML code to define nested functions in JavaScript −

<!DOCTYPE html>
<html>
<body>
   <h2>Tutorials Point</h2>
   <p>JavaScript nested functions</p>
   <p id="demo"></p>
   <script>
      function add_two(a,b) {
         let result =a+b;
         function add_three(c) {
            function add_three(c) {
               result = result+c;
            }
            add_three(2); 
            return result;
         }
      }
      let answer = add_two(4,6);
      document.getElementById("demo").innerHTML = answer;
   </script>
</body>
</html>

Approach 2

In this approach, we will declare a child function outside the parent function and then call it inside the parent function so that when we call the parent function it will automatically execute the child function and fulfil the criteria of being a nested function.

Steps to define nested function in JavaScript-

Step 1 − Declare a variable named as result.
Step 2 − Create a child function named as add_two with two parameters declared.
Step 3 − Now add the two numbers declared as parameters and store it in the variable result.
Step 4 − Create a parent function named as add_three with one parameter declared inside it.
Step 5 − Now call the child function inside the parent function.
Step 6 − Now we add the value of result variable with the parameter declared inside add_three function.
Step 7 − Now return the result variable from add_three function.
Step 8 − Declare another variable named as answer and call the function add_three inside it with one parameter declared inside it.
Step 9 − At last, we will print the value of the variable answer.

Example

We can use the below HTML code to define nested functions in JavaScript −

<!DOCTYPE html>
<html>
<body>
   <h2>Tutorials Point</h2>
   <p>JavaScript nested functions</p>
   <p id="demo"></p>
   <script>
      let result;
      function add_two(a,b) {
         result = a+b;
      }
      function add_three(c) {
         add_two(2,5);
         result =result+c;
         return result;
      }
      let answer = add_three(8);
      document.getElementById("demo").innerHTML = answer;
   </script>
</body>
</html>

As we can see in this example that we declare the child function outside the parent function but calling it inside the parent function makes it work as a nested function as well as providing the value of the arguments to child function inside the parent function.