Variable Scope

Navigation Aids -- This Page        Glossary Aids -- This Topic        Navigation Aids -- This Site

Variable Scope Defined

The scope of a variable is the region of your program in which the variable is visible. A variable of global scope is visible for all regions of your program. A variable with local scope is visible for the region inside the function of which the variable was declared.

Scope of Explicitly Declared Variables

When the var keyword is explicitly part of the variable declaration, the variable will have local scope when declared inside a function. A variable declared at the top level region of your program (not bound by a function) will have global scope.

Scope of Implicitly Declared Variables

A variable that is declared without using the var keyword has an implicit declaration. All implicit variable declarations will have global scope. An Implicitly defined variable has global scope regardless at where it is defined (top-level or function).

Global Scope

A variable with global scope is visible for all regions within your JavaScript code. All of your code can "see" the global variable. Therefore it can be referenced or altered from anywhere within your program. The user-defined global variables are added to the Global object.

Local Scope

A variable with local scope is visible for only the code contained within the function that declared the variable. Only the function that declared the variable can "see" the variable. Therefore it can only be referenced or altered from within the function.


In our example that follows, follow the variable "make". "make" is defined in the top-level code and again inside the function.

<html> <head> <script type="text/javascript"> //this is top-level code, top-level, top-level, top-level var color = "Blue"; //global variable var make = "Ford"; //global variable var year = "2001"; //global variable function showCar() //function name showCar is also global {     var make = "Chevy"; //local variable     year = "1997"; //implicit global variable     var output = "The " + year + " " + make + " is " + color;     document.write(output); } </script> </head> // <body> <script> showCar();// Note 01 //above returns: The 1997 Chevy is Blue document.write("The " + year + " " + make + " is " + color);// Note 02 //above returns: The 1997 Ford is Blue </script> </body> </html>
Note 01:
The function showCar will find (make = Chevy) because the local variable is at the top of the scope chain and is found before the (make = Ford) global variable. The Call object for the function showcar places the variable (make = Chevy) ahead of the variable (make = Ford) on the scope chain.
Note 02:
At this point the local variables for showCar are gone from the scope chain (the function has finished executing). But the global variables are always there while the page remains loaded.
Another note: Whats up with the variable "year"???
"year" is tricky. It was defined as (year = 2001) in the top level code making it a global variable. However, it was also defined in our function. And it was defined in an implicit format. When defined implicitly, it's value replaced the original global variable with same name.

Guidelines and Rules Concerning Scope

The following general guideline govern variable scope:

The Scope Chain

With the process of variable resolution, JavaScript looks at a chain of objects. The first object in the chain that resolves the variable will be the variable's value. A chain object can fall into one of three categories:

  1. Top Level Only: When the variable is not referenced from a function but from top-level code only, then the chain consists of one object, the global object. All variables are looked up from this object. It is a chain of one object only.
  2. Function - Not Nested: A non-nested function will have a chain of two objects. The first level is the function's Call Object. The second level is the global object. Variables are looked up first to function's call object and when not found there, then resolution is attempted at the global object.
  3. Nested Functions: The nested function categories would have three or more objects in the chain. The variable resolution process starts from the inner most function call and continues outward through all function call objects until the outer most global object is reached.

The With Statement

The with statement will temporarily alter the scope chain by placing the object in the with header first in the chain.


Rx4AJAX        About Us | Topic Index | Contact Us | Privacy Policy | 2008 This Site Built By PPThompson