Learn Javascript
Variable Scope
Join the Discussion
More of this Tutorial
Functions Passing Parameters Value of a Function Quiz Yourself
Related Terms
Introduction.
An earlier tutorial in this series introduced you to the variable which contains a value that can be modified or used at various spots within the program. What wasn't nmentioned at that time is that you can't define a variable at any spot in the program and use it at any spot, there is a specific relationship between where a variable is defined and where it can be used. This is known as the scope of the variable.
Global and Local Scope
If you look back at the previous tutorials you will notice that we always defined a variable before we tried to access it. The reason for this is that variables are only usable from the point in the program where they are defined. As you have no doubt figured out by looking at the tutorial on functions this refers to the order in which the statements are actually run and not to the order in which they appear on the page.
If this was all that there was to variable scope then there wouldn't be a need to spend an entire tutorial on it but that is not the end of the story. Depending on where a variable is defined it may also cease to exist before the program ends.
The simplest way to restrict the part of a program that has access to a particular variable is to define the variable within a function. The variable in the following example does not exist by the time that the following statement tries to use it:
var x = 1;
}
var y = x;
Not that Javascript (unlike some other programming languages) only restricts the scope of variables to the block that they are defined in when that block is a function and so variables defined within any other blocks (eg. if statements) will continue to exist after the end of that block until such time as the end of the function or script is reached.
When you use functions you need to be careful of where you define your variables. If you define a variable within a function it will only exist while the function code is running. Such a variable is said to have local scope.
If you define a variable outside of all functions then the variable will exist from that point until the end of the program. Such a variable is said to have global scope.
There is one situation where a global variable becomes temporarily inaccessible and that is if you define a local variable having the same name. Here's an example:
function yy (){
var i = 1;
document.write(i);
}
document.write(i);
In this code the locally defined variable will be the one referenced by the first document.write statement which will therefore write "1". That variable no longer exists when the second document.write statement is reached which will reference the original globally defined variable and write "0".
Now consider the effect of the making a minor change to the code as follows:
function yy (){
i = 1;
document.write(i);
}
document.write(i);
In this example the statement within the braces is no longer defining a new local variable but is changing the value of the existing global variable. Both document.write statements will now write "1".
Using What You Know
There will often be situations where you have multiple scripts that you have placed on the same web page. Sometimes these will all be scripts you have written yourself. Other times, one or more of the scripts may have been obtained from a script library.
Each script may run perfectly when on the page by itself. When you add a second script to a page that already has another script on it you may find that either the second script fails to work correctly (even though it works fine by itself) or that the first script stops working. You may even find that both scripts stop working when they are places on the same page.
The reason why scripts stop working in these situations is that you have a scope conflict between the variables in the two scripts. Either both scripts are trying to define a global variable with the same name or one of the scripts has left the var off of the front of the statement that is supposed to be defining a local variable and the other script has a global variable with the same name that gets used instead.
To resolve these conflicts you need to make sure that each variable is defined using var on the front of the statement so that it does not conflict with variables used by other scripts.
In the unlikely event that doing this doesn't fix the problem then you may also need to consider renaming one or more variables so that the two scripts don't use the same variable names.