Scope of Variables and Arguments in Nested JavaScript Functions
(Page 1 of 4 )
In this part of the series we shall look at the scope of variables and arguments in nested functions. We shall see whether the outer function can use the variables and arguments of the inner functions and vice versa. We shall also see how many levels downward or upward this can be done.
Variable Scope within Nested Functions
Consider the following code segment, which is the modified form of the example I mentioned in the previous part:
function fnName1()
{
alert(variableA2);
function fnName2(arg2)
{
var variableA2 = "I am variable 2";
function fnName3()
{
var variableA3 = "I am variable 3";
}
}
}
The nested function fnName2() has the following variable declared:
var variableA2 = "I am variable 2";
The nested function fnName3() has the following variable declared:
var variableA3 = "I am variable 3";
The outermost function has an alert statement, which would attempt to display the value of the variable in the middle function. Now if you call the outermost function in your browser, nothing will happen, or you will see an error message in the task bar. If you replace the alert statement with “alert(variableA3)” with the hope of displaying the variable of the innermost nested function, you would still have the same result (nothing happens).
The truth is, independent of the level of the inner function, an outer function cannot use (see) the variable of the inner function. We shall now look at the reverse case.
Consider the following code:
<html>
<head>
<script type="text/javascript">
function fnName1()
{
var variableA1 = "I am variable 1";
fnName2(); //call fnName2()
function fnName2()
{
alert("Called from middle, " + variableA1);
function fnName3()
{
//nothing here
}
}
}
</script>
</head>
<body>
<button type="button" onclick="fnName1()">Call fnName1 Function</button>
</body>
</html>
A variable has been declared only in the outermost function (outside the nested functions). The variable's name is variableA1, the value is “I am variable 1.” This outermost function calls the middle function. The middle function has an alert statement, which would display the string "Called from middle, " and the value of the variable of the outermost function. If you try the code (click the button), the alert box will display:
"Called from middle, I am variable 1"
Consider the following code:
<html>
<head>
<script type="text/javascript">
function fnName1()
{
var variableA1 = "I am variable 1";
fnName2(); //call fnName2()
function fnName2()
{
fnName3(); //call fnName3()
function fnName3()
{
alert("Called from innermost, " + variableA1);
}
}
}
</script>
</head>
<body>
<button type="button" onclick="fnName1()">Call fnName1 Function</button>
</body>
</html>
Again, a variable has been declared only in the outermost function (outside the nested functions). The variable's name is variableA1, and the value is “I am variable 1.” Here the outermost function calls the middle function, which calls the innermost function. The innermost function has an alert statement, which would display the string "Called from innermost, " and the value of the variable of the outermost function. If you try the code (click the button), the alert box will display:
"Called from innermost, I am variable 1"
Independent of the level of the outer function, an inner function can use the variables of the outer function. When we say a function can use variables, we are referring to the statements in the function.
Next: Argument Scope within Nested Functions >>
More JavaScript Articles
More By Chrysanthus Forcha
