VARIABLES - Local and Global, by The Seeker 09 March 1999

 VARIABLES - Global and Local - By The Seeker


The stand-alone code can be found here : Var-Declaration-Test-Program

Load it down and play with it !  Just reading my crap won't bring you very far ! 


Here is what The Sandman has already told you about variables :

Global variables once defined, exist within the entire scrip.  They can therefore be changed or read by any function within the script itself.  Global Variables are often used as a kind of 'counter' and or to maintain the results from having a string or number performed on it.
 
  A short extension by me :

 - Within a function, a local declared variable has more rights than a global
     variable with the same name. So you can - within a function - pass a value
     to a global variable and change this local variable, under the condition
     that there was no local variable with the same name declared.
 -  Within a function you can't access variables, which are local variables in
     another function.

So far, so good (isn't it ? :)
 
Let me bring some light into this darkness (and show you some evil traps) : Javascript is a rather 'cool' language concerning the strictness of the use of variables. (Could be from California, hi Jeff ;). But  this 'coolness' has its prize : you gotta be extremely careful with the use of the variables.
 
Look at this code : (you should have a printing of _global.htm lying next to your console)
 

var TestOne='Global_One'
TestTwo='Global_Two'
TestThree=null
showglobal('Before');

var TestOne='Global_One'......<-- this is a DECLARATION
TestTwo='Global_Two'..........<-- this is an ASSIGNMENT
TestThree=null................<--- just another assignment

We declare one variable and we assign two variables. Check this out :
 

Nothing sensational up to now. So let's dive into a function.
Here's the code :
 

go('Local_Test_One');

alert ('Local_Test_Two : '+ TestOne + ' * ' + TestTwo + ' * ' + TestThree + ' ')

var TestOne='Local_One'
TestTwo='Local_Two'
TestThree='Local_Three'

alert ('Local_Test_Three : '+ TestOne + ' * ' + TestTwo + ' * ' + TestThree + ' ')

go('Local_Test_Four');
}

Let's wade through this code step by step.
 
We have a function :

function Local_Pub()
{
var TestThree='test_three'.......and we declare a local variable

go('Local_Test_One');............after this declaration we call another function,
                                                                    to show us the new values.
 
The alert-box (Local_Test_One) gives us this :

TestOne :  Global_One *** TestTwo :  Global_Two *** TestThree : Null

Remember : TestThree is a local variable, which can't be shown in another function !
 

On with the code :

alert ('Local_Test_Two : '+ TestOne + ' * ' + TestTwo + ' * ' + TestThree + ' ')
 

Local_Test_Two shows us :

TestOne :  undefined *** TestTwo :  Global_Two *** TestThree : test_Three

This local alert-box shows us three things :
1. The local variable 'TestThree' now has a value within the function   (surprise ;)
2. The global variable 'TestTwo' (which was assigned) shows its value  (surprise ;)
3. The global value 'TestOne' (which was declared) is undefined !!!!
     Don't ask me why! This is really strange ! (Or am I just making a mistake ??)
 

On with the code :

var TestOne='Local_One'........<-- declaration of a local variable

TestTwo='Local_Two'............<---assignment of a local variable

TestThree='Local_Three'........<---just another assignment

Let's make some alert (within the function) :

alert ('Local_Test_Three : '+ TestOne + ' * ' + TestTwo + ' * ' + TestThree + ' ')
 

This box (Local_Test_Three) shows us :

TestOne :  Local_One *** TestTwo :  Local_Two *** TestThree : Local_Three

So this goes to show, that the local variables have more 'rights' than the global ones.
(AND, don't forget : you can change the value of a global variable within a function,
if there was no declaration of a local variable with the same name !
 

Next line :

go('Local_Test_Four');
 

Once again we call another function to show us some variables, and we get (Local_Test_Four) :

TestOne :  Global_One *** TestTwo :  Local_Two *** TestThree : null

Funny, isn't it ? The value of the global variable 'TestTwo' has been changed (forever), just because this global variable was assigned, but not declared !!
 

From the main-program we make a last test :

.... onClick="showglobal('after')"
 

This alert ("after") gives us :

TestOne :  Global_One *** TestTwo :  Local_Two *** TestThree : null

and just goes to show that the global variable 'TestTwo' has changed it's value.
 

O.k., that's it. What was this crap for, you may ask ? Well, the only thing I can tell you :
be careful with declarations and assignments of variables. If you are writing some code, test
 the values of your variables with an alert-box. Better one time too much, than an evil surprise !
 

The Seeker