All About Variable Scope | Inside JavaScript

Now that we're achieving mastery over functions, another issue becomes important: variable scope . A variable's scope is made up of the part of the program in which is may be accessedthat is, where it's "visible" to your code. The scope of variables you declare in one function, for example, are limited to that function, and are not visible in other functions (unless those functions are nested inside the first function).

JavaScript has two types of scope: local and global . When you declare a variable in a function, it's local to that function, which means its scope is restricted to the body of the function. When you declare a variable in a <SCRIPT> element, outside any function, that variable is global . Any JavaScript code anywhere in the same page as a global variableinside a function or nothas access to a global variable. If you declare a local variable with the same name as a global variable, however, that local variable overrides the global variable as long as the local variable is in scope. When you leave the local variable's scope, the global variable resumes its original value.

Here's an example to make all this clearer. In this case, I'll declare a variable named variable1 as a global variable in a web page's head section. Because it's a global variable, it's available to all JavaScript code anywhere in the page (unless overridden by a local variable of the same name), not just in the head section.

I'll also declare a global variable named variable2 in the body section and add a function, function1 , to the body. In this function, we'll see that both global variables are visible. In another function, function2 , however, I'll declare a new local variable, also named variable2 . As we'll see, that local variable will override the global variable2 (but only in the function that declared a local version of variable2 ). Here's what it all looks like in code:

(Listing 03-14.html on the web site)

 <HTML>      <HEAD>          <TITLE>Working With Variable Scope</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  var variable1 = "Global, defined in the head."  // -->          </SCRIPT>      </HEAD>      <BODY onload="testValues()">          <H1>Working With Variable Scope</H1>          <SCRIPT LANGUAGE="JavaScript">  var variable2 = "Global, defined in the body."  function function1()              {  document.write("In function1: " + "<BR>")   document.write("variable1 is: " + variable1 + "<BR>")   document.write("variable2 is: " + variable2 + "<BR><BR>")  }              function function2()              {  document.write("In function2: " + "<BR>")   var variable2 = "Local, defined in function2."   document.write("variable1 is: " + variable1 + "<BR>")   document.write("variable2 is: " + variable2 + "<BR>")  }              function1()              function2()          </SCRIPT>      </BODY>  </HTML>

You can see the results of this code in Figure 3.11, where we get a picture of how scope works directly.

Figure 3.11. Handling variable scope.

graphics/03fig11.gif

Tip

Even though you can declare a variable throughout a function, as far as scope goes, after you have defined a local variable anywhere in a function, it overrides any global variables of the same name throughout the whole function. That means that the overridden global variable won't be visible in the function up to the point where you declare the local variable of the same namethe global variable will never be visible in the function at all.