Introduction to Javascript Nested Functions
Functions within another function are called “Nested function”. A function can have one or more inner functions. These nested functions (inner functions) are under the scope of outer functions. Javascript Nested Functions in this, the outer function can be called as Parent function and inner function can be called as Child function. Child function can access variables and parameters of the Parent function.
However, Parent function cannot access variables of inside child functions.
How do Nested functions work in JavaScript?
JavaScript is interpreted, which means execute code line by line. Internally JavaScript has execution stack. All the tasks put on the stack to execute. JavaScript works-based LIFO LIFO stands for Last In First Out. Just like a Stack. As we discussed the Nested function has parent and child functions.
Syntax:
function parentFun()//function definition
{
function childFun1()//function definition
{
function childFun2()//function definition
{
//code
}
childFun2(); //function calling
}
childFun1();//function calling
}
parentFun();//function callingExplanation:
Outer function parentFun() definition with 2 inner functions childFun1() and childFun1() definitions. Once we define the inner functions, immediately below of it we have called the function because the inner functions childFun1 () and childFun1 () have to execute their code or logic.
At last, we called parentFun() to execute all the functions within it.
Purpose of Nested functions
Whenever we don’t want to access all functions outside of the outer function then we will go for Nested functions.
Examples of Javascript Nested Functions
Examples of javascript nested functions are given below:
1. Outer function() with single inner function()
Syntax:
function parent(){
//code
function child()
{
//code
}
Child();
}
Parent();Code
<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Outer function() with single inner function()</h1></font>
<script>
function triangleHypotenuse(base,height)
{
function square(side){
return side*side;
}
return Math.sqrt(square(base)+square(height));
}
document.write("Hypotenuse of triangle is :"+triangleHypotenuse(3,4));
</script>
</body>
</html>Output:
Explanation:
triangleHypotenuse() is outer function and square() is inner function. sqrt(square(base)+square(height)) returns square root of base and height, which gives us 3rd side value.
2. Function calling inside the Outer function
If we call any other function inside the function is clearly said to be Nested function.
Syntax:
function getName() //outer function
{
getAge();//inner function
}
function getAge()
{
//code
}
getName(); //function callingExplanation:
getName() is called nested function because t has one more function getAge() inside the function. When we call getName(), it will call to getAge(). So, it will execute getAge() first. We can conclude by this JavaScript stores the data in a Stack (LIFO).
Code:
<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Outer function() with single inner function()</h1></font
<script tyype="text/javascript">
function getAge(name,age)
{
document.write(name+" age is :"+age+" years"+"<br>");
}
function getName(name,age)
{
document.write("I am :"+name+"<br>");//document.write() prints output in a browser
getAge(name,age);
}
getName("Amardeep",26);
getName("Paramesh",24);
getName("Jyothi",25);
</script>
</body>
</html>Output:
Explanation:
getName(name,age) outer function will print I am Paramesh. This function again calling getAge(name,age) inner function. It will print Paramesh age is 24 years. The same way the rest of the function callings output will display.
3. Anonymous inner function() with outer function()
Syntax:
function add(a,b)//outer function
{
return function() //inner function
{
//code
}
}
add(3,9);Code:
<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Anonymous inner function() with outer function()</h1></font>
<script>
function addSum (a) {
return function (b) {
return a + b;
};
}
var out = addSum(5);
document.write(out(3));
</script>
</body>
</html>Output:
Explanation:
- Created an outer function addSum(a) and inner anonymous function (b).
- When we call addSum(5) then its resultant becomes one more function with name out().
- Again if we call out(3) function then gives us output a+b=5+3=8.
4. Inner and Outer function with Variable Scope
Syntax:
var m=0; //global value
function parent(p,q) //p,q parent values
{
var a=10;//parent value or local value
function child()
{
var b=20;//local value
//code
}
child();
}
parent(2,4);Code:
<!DOCTYPE html>
<html>
<body>
<font color="blue"><h1 align="center">Inner and Outer function with Variable Scope</h1></font>
<script>
var m=0; //global value
function parent(p,q) //p,q parent values
{
var a=10;//parent value or local value
function child()
{
var b=20;//local value
document.write("Parent value of p "+p+"<br>");//<br>takes output to new line
document.write("Parent value of q "+q+"<br>");
document.write("Parent value of a "+a+"<br>");
document.write("Local value of b "+b+"<br>");
document.write("Global value of m "+m);
}
child();
}
parent(2,4);
</script>
</body>
</html>Output:
Explanation:
As you can see above output child() function can access all values like global, local, parent values. Whereas, parent() function can able to access its own values and global values
Conclusion
JavaScript (JS) has allowed nested functions without any errors. JS allows anonymous functions also inside an outer function. Child function can access all values global, local and parent. In the case of Parent, the function allows only global and it’s parental values.
