Updated June 19, 2023
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 outer functions’ scope. In Javascript Nested Functions, the outer function can be called the Parent function, and the inner function can be called the Child function. The child function can access the variables and parameters of the Parent function.
However, the Parent function cannot access variables of inside child functions.
How do Nested functions work in JavaScript?
JavaScript is interpreted, which means executing code line by line. Internally JavaScript has an execution stack. All the tasks are 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 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, 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 the square root of the 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 a Nested function.
Syntax:
function getName() //outer function
{
getAge();//inner function
}
function getAge()
{
//code
}
getName(); //function callingExplanation:
getName() is called a 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 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 calls the 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 an inner anonymous function (b).
- When we call addSum(5), its resultant becomes one more function with a name out().
- Again if we call out the (3) function, it 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, the output child() function can access all global, local, and parent values. Whereas the parent() function can be 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 Parents, the function allows only global, and it’s parental values.
Recommended Articles
This is a guide to Javascript Nested Functions. Here we discuss the introduction, how Nested functions work in JavaScript, and Examples with codes & outputs. You can also go through our other related articles to learn more –
