1. Technology

Your suggestion is on its way!

An email with a link to:

http://printscan.about.com/bltut07.htm

was emailed to:

Thanks for sharing About.com with others!

Variable Scope
 Related Terms
• Variable
 
 Previous Tutorials
• Getting Started
• Hello World
• Variables
• Operators
• The IF Statement
• The CASE Statement
• Functions
 

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 surround that part of the code in braces. 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;

You have already been introduced to some places where you need to use braces in your coding such as around the statements that are to be run after an if statement has been evaluated and around the statements that belong to a function. There are a number of statements we are yet to look at that also require braces to be used.

In all of these instances you need to be careful of where you define your variables. If you define it within the braces then it will only exist from where it is defined until the close brace is reached. Such a variable is said to have local scope. You can also add braces around a section of code that doesn't otherwise need to have braces used in order to restrict the scope of a given variable to that code.

If you define a variable outside of all of the braces 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:

var i = 0;
{
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:

var i = 0;
{
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.

You can opt-out at any time. Please refer to our privacy policy for contact information.

©2014 About.com. All rights reserved.