Page 1 of 2 There are two variable scopes in JavaScript: local and global. Local variables exist only inside the function in which they were declared. Local scope means a variable can only be referenced from within that function in which it was declared. Global variables, on the other hand, once declared, exist throughout the script and their values can be accessed (and changed) from within any function or outside of a function. In other words, global scope means a variable can be referenced from anywhere within your site's JavaScript.
There is a third type of scope called "static" or "closure". "Closures" are variables that are local to a function, but keep their values between function calls. Closures are an advanced JavaScript topic and will not be discussed in this article.
Let's show five variables being declared, and discuss their scope:
1. <script type="text/javascript">
2.
3. var outsideFunction1 = "hello";
4. outsideFunction2 = 42;
5.
6. function myFunction(myParameter){
7. var insideFunction1 = new Array();
8. insideFunction2 = false;
9. }
10.
11. </script>
Listing 1: Example of local and global variable declaration
The first variable is on line 3: outsideFunction1. Even though this variable is declared with the var keyword, it is declared outside of any function, and therefore has global scope.
The second variable is on line 4: outsideFunction2. This variable is also declared outside of any function, and therefore has global scope.
The third variable is on line 6: myParameter. Function parameters always have local scope. Even if there were a global variable called myParameter, that global variable will maintain its value even if the value of myParameter was changed within the function.
The fourth variable is on line 7: insideFunction1. Because this variable is declared within a function with the var keyword, it also only has local scope. Similar to parameter variables, even if there were a global variable called insideFunction1, that global variable would maintain its value even if the value of insideFunction1 were changed within the function.
The fifth variable is on line 8: insideFunction2. This is really the reason that this article is needed: this is a global variable declared within a function, which is one of the most common causes of logic errors. Because the var keyword has been omitted, the insideFunction2 variable is global.
Variables initialized inside a function using the var keyword will have a local scope. If you initialize a variable inside a function without the var keyword, your variable will have a global scope. Parameters are local variables, as if the keyword var was included before the parameter. Local variables, including a parameters, can have the same name as a global variable.
var myName = "estelle"; // global
alertThisName("jonathan");
function alertThisName(myName){ // local
alert(myName); // alerts "jonathan"
}
alert(myName); // alerts "estelle";
Listing 2: The variable myName is declared both globally outside of the function, and locally as the function parameter. Variables declared as function parameters have local scope. The myName variable on the first line is a global variable. The variable myName declared as a parameter of the function is a local variable only visible within the alertThisName function.
In this case, declaring a local variable with the same name as a global variable masks the global variable: all global variables in your script are accessible to this function EXCEPT the global myName variable.*
*Note: In browsers, global variables that are masked by a function's local variable with the same variable name are still accessible to the function by accessing the global variable thru it's parent. In Listing 2, if you are in a browser, you could access the global myName variable from within the alertThisName function by using window.myName or top.myName.
Keywords
javascript, local, global, scope, variable scope, global scope, local scope, closure
