Nested Functions in JavaScript
In JavaScript, it is also possible to create functions inside other functions, which are called nested functions.
Similar to nested if statements, when we define a function inside another function, it is called nested functions in JavaScript.
In other words, a function can also contain an inner function that executes immediately during call time of the parent or top level function. JavaScript allows to nest multiple levels of function declarations.
Consider the following example code.
Example 1:
<html>
<head>
<title>JavaScript Nested functions</title>
<script>
// Top level, parent or outer function.
function parent()
{
var firstName = "John"; // local variable.
// Declaring an inner function named inner.
function inner()
{
var lastName = "Michael"; // variable declared inside inner function.
document.write("Full name: " +firstName+ " " +lastName);
}
// Calling inner or nested function when parent or outer function.
inner();
}
// Calling outer or parent function.
parent();
</script>
</head>
<body>
</body>
</html>
Output:
Full name: John Michael
In this example, we have defined an outer function named parent(). Inside the parent() function, we have declared a local variable and inner function named inner().
Inside the body of nested function, we have declared a local variable named lastName. When we have called parent() function, then inner() function is automatically invoked, which simply displays firstName and lastName.
How Nesting affects Scope?
1. Nested functions are not accessible outside their parent function. It helps to encapsulate functionality inside nested functions. Consider the following example.
Example 2:
<html>
<head>
<title>JavaScript Nested functions</title>
<script>
// Top level, parent or outer function.
function parent()
{
var firstName = "John"; // local variable.
// Declaring an inner function named inner.
function inner()
{
var lastName = "Michael"; // variable declared inside inner function.
document.write("Full name: " +firstName+ " " +lastName);
}
}
// Calling nested function from outside outer function.
inner(); // ReferenceError.
// Calling outer or parent function.
parent();
</script>
</head>
<body>
</body>
</html>
Output:
Uncaught ReferenceError: inner is not defined
2. Nested functions can access their parent variables. Let’s take an example program in which we will try to access parent variable from inside a nested function.
Example 3:
<html>
<head>
<title>Accessing parent variables from Nested functions</title>
<script>
function parent()
{
var firstName = "John"; // parent variable.
function inner()
{
var lastName = "Michael"; // variable declared inside inner function.
// Accessing parent variable.
document.write("Full name: " +firstName+ " " +lastName);
}
// Calling nested function.
inner();
}
// Calling outer or parent function.
parent();
</script>
</head>
<body>
</body>
</html>
Output:
Full name: John Michael
3. We cannot access nested function variables or inner functions from the parent function. Consider the following example script code.
Example 4:
<html>
<head>
<title>Accessing nested function variable from parent function</title>
<script>
function parent()
{
var firstName = "John"; // parent variable.
function inner()
{
var lastName = "Michael"; // variable declared inside inner function.
}
document.write("First name: " +firstName, "<br>");
document.write("Last name: " +lastName); // throws an error because lastName is scoped inside inner.
}
// Calling outer or parent function.
parent();
</script>
</head>
<body>
</body>
</html>
Output:
First name: John
Uncaught ReferenceError: lastName is not defined
4. If we declare a local variable having the same name as the global variable inside a function, we will be able to access the local variable inside the nested function, not global variable. Look at the following script code in the below program.
Example 5:
<html>
<head>
<script>
// Declaration of global variable.
var p = "I am global";
function m1()
{
var p = "I am local";
function m2()
{
document.write(p);
}
m2();
}
m1();
</script>
</head>
</html>
Output:
I am local
JavaScript Nested Functions Example
Example 6:
<html>
<head>
<script>
var x = true;
var y = function(num)
{
var z = 20;
function m1() {
document.write(z, "<br>");
}
for(var i = 0; i < num; i++) {
m1();
}
};
function m2(num) {
var y = 30;
var z = function() {
document.write(y, "<br>");
};
for(var i = 0; i < num; i++) {
z();
}
}
if(x) {
m2(3);
y(3);
}
</script>
</head>
</html>
Output:
30
30
30
20
20
20
In this tutorial, we learned nested functions in JavaScript with example programs. I hope that you will have understood the basic concept of nested functions and their scopes.
Thanks for reading!!!
