Nesting JavaScript Functions - Calling Functions from Inside
(Page 4 of 5 )
A function can call its immediately nested (inner) function, but it cannot call a function that is more than one (inner) level down. So, in the above example, if the outer function is called, the innermost function cannot be called unless the outermost function calls the middle function, which then calls the innermost function. In the following code (a modified form of the earlier example), the outermost function is called; it calls the middle function, which calls the innermost function.
<html>
<head>
<script type="text/javascript">
function fnName1()
{
alert('Statements 1A');
function fnName2()
{
alert('Statements 2A');
function fnName3()
{
alert('Statements 3');
}
alert('Statements 2B');
fnName3();
}
alert('Statements 1B');
fnName2();
}
</script>
</head>
<body>
<button type="button" onclick="fnName1()">Call fnName1 Function</button>
</body>
</html>
Look at the position of the function calls. When the outermost function is called as a result of clicking the button (the only button in the code), the first alert box of the outermost function will display "Statements 1A" and the second alert box (look at its position in the code) in fnName1() will display "Statements 1B." After this, the middle function is called, because the call "fnName2();" is immediately after the second alert statement in the outermost function code.
When the middle function is called, the first alert box of the middle function will display "Statements 2A" and the second alert box (note its position in the code) will display "Statements 2B." A nested function cannot be executed unless it is called.
The nested function definition and some statements can be at the same level in the code. The definition of the fnName2() function and its call below it (after the second alert statement) are at the same statement level. It can only be so, since a function can only call its immediate nested function.
After the second alert statement in the middle function is executed, the innermost function is called, because the call "fnName3();" occurs immediately after the second alert statement. You can try the above code.
When the innermost function is called, its single alert statement displays "Statements 3."
Now try the following code and you will realize that nothing will happen or an error will be displayed in the status bar of your browser.
<html>
<head>
<script type="text/javascript">
function fnName1()
{
fnName3();
function fnName2()
{
alert('Statements 2A');
function fnName3()
{
alert('Statements 3');
}
alert('Statements 2B');
}
}
</script>
</head>
<body>
<button type="button" onclick="fnName1()">Call fnName1 Function</button>
</body>
</html>
When you click the button, the outermost function will be called. As soon as it is called, it tries to call the innermost function (fnName3()). When it attempts that, however, nothing happens, or you see an error message in the task bar of your browser.
We conclude that a function can call its immediate nested function, but it cannot call a function that is more than one level down. However, any nested function can call its nesting (outer) function or any of its ancestor outer functions; that is, you can have a call (statement) in a nested function that will do the calls. Well, this can lead to a loop of calling functions, when a nesting function calls a nested function and the nested function calls some ancestor function. You should avoid having this type of loop situation in your code, unless you have a very good reason for it.
Next: Privacy of Nested Functions >>
More JavaScript Articles
More By Chrysanthus Forcha
/ 2 
