Within the body of a function, a local variable takes precedence over
a global variable with the same name. If you declare a local variable
or function parameter with the same name as a global variable, you
effectively hide the global variable. For example, the following code
prints the word "local":
var scope = "global"; // Declare a global variable
function checkscope( ) {
var scope = "local"; // Declare a local variable with the same name
document.write(scope); // Use the local variable, not the global one
}
checkscope( ); // Prints "local"
Although you can get away with not using the var
statement when you write code in the global scope, you must always
use var to declare local variables. Consider what
happens if you don't:
scope = "global"; // Declare a global variable, even without var
function checkscope( ) {
scope = "local"; // Oops! We just changed the global variable
document.write(scope); // Uses the global variable
myscope = "local"; // This implicitly declares a new global variable
document.write(myscope); // Uses the new global variable
}
checkscope( ); // Prints "locallocal"
document.write(scope); // This prints "local"
document.write(myscope); // This prints "local"
In general, functions do not know what variables are defined in the
global scope or what they are being used for. Thus, if a function
uses a global variable instead of a local one, it runs the risk of
changing a value upon which some other part of the program relies.
Fortunately, avoiding this problem is simple: declare all variables
with var.
In JavaScript 1.2 (and ECMAScript v3), function definitions can be
nested. Each function has its own local scope, so it is possible to
have several nested layers of local scope. For example:
var scope = "global scope"; // A global variable
function checkscope( ) {
var scope = "local scope"; // A local variable
function nested( ) {
var scope = "nested scope"; // A nested scope of local variables
document.write(scope); // Prints "nested scope"
}
nested( );
}
checkscope( );