Google Maps API Version 2 Tutorial

Translate this page:

Javascript Concepts: Scope

In common with most modern computer languages, Javascript variables and functions have "scope". What this means is that the variable or function can only be accessed from within the function that "var"ed it.

In languages without scope, such as early versions of BASIC and COBOL, people working on different parts of the same program had to be careful not to use the same variable for different purposes. If Fred wrote a useful BASIC subroutine that used the variable "A", and Dave incorporated that subroutine into one of his programs that also happened to use a variable called "A", then calling the subroutine would change the value of "A" which might cause Dave's program to behave incorrectly in a completely different part of the code that expected the original value.

In a scoped language, Fred can write a function that uses separate "local" variables which only exist inside that function, and there's no danger of them clashing with "global" variables of the same name that exist in the calling program.

If you really really want to, you can explicitly access the global variable, by referring to it like "window.A". Global variables are properties of the "window" object.

Undeclared variables

If you assign a value to a variable without first "var"ing it, then a global variable of that name is created for you.

In MSIE, there's a conflict with the fact that it already creates a global variable that matches the "id" of each element that has an "id". Attempting to assign a new value to a variable that MSIE created that way, without using "var", will throw an error.

Not block structured

If you're familiar with block-structured languages, such as C, Pascal and Java, then you might possibly be caught out by the fact that Javascript is not block-structured. Variables that are created inside blocks (such as for loops and if statements) persist until the end of the function. For example, if you're used to a block-structured language, you might expect variable in this example to display the value "123".

   function foo() {
     var i=123;
     for (var i=0; i<3; i++) {
       ...
     }
     alert(i);
   }

In Javascript, the value displayed is "3". That's because "i" is local to the function, not local to the "block", so the "i" used inside the for is the same as the one declared outside the for loop.

Note that Javascript doesn't complain if you "var" the same variable more than once within the same scope.

Calling Javascript from HTML

Whenever you make calls from HTML to Javascript, e.g. from the "onclick" of a button, the called Javascript executes in global context. This means that any functions or variables referenced in the "onclick" string must be global.

Local functions

In the same way that variables can be local to a function, functions can be local to another function.

It's all too easy to do this by mistake if you change your code from something that runs inline to something that's called from <body onload="loadMap()">. You can't just wrap "function loadMap() {" ... "}" around the whole of your code and expect it to work because functions that were previously global will have become local functions of loadMap().

Back to Mike's Homepage
Up to the start of this tutorial