3.4. Scoping Variables

Not only can variables in JavaScript be used to refer to any type of object at any time, they can actually be used without being declared at all. This can be a source of problems that are hard to identify because it will not be considered an error if you mistype a variable name. Rather, JavaScript will just assume that you are introducing a new variable.

A variable's scope is the context of code where that variable can be accessed. Whenever a variable is defined, it is assigned a scope for access based on where it is in the code. It is available to all inner scopes; loops, function calls, and further nested control structures. Basically, it is available from the point it is first defined until the scope in which it was defined exits.

A variable is never available at a higher scope. If you declare a variable for use within function MyFunction(), for example, that variable and its value are not available to the caller but are available to any functions that MyFunction() calls. In fact, the variable is available to any functions called by functions that MyFunction() calls. This means there is no concept of local variables that are not visible outside your function (only those you call, and the functions they call, can see them).

JavaScript allows you to use a variable without declaring it (where it will be implicitly declared), but it changes the scope for that variable from what you would typically expect. An undeclared variable is automatically assigned a global scope. In many cases, this is not a problem. A variable used within a function may not be accessed from a containing scope, so no other code is affected. However, some variable names may be reused. In addition, without requiring explicit declaration, the outside scope can be affected unintentionally. This can result in problems that are hard to debug, since they depend on the scope in which variables are used in addition to where the problem occurs.

Illustrated here in Listing 3-15, two values are assigned to two variables, one of which is defined and one of which is not. The same thing is also done inside a nested function call. This function is able to modify both the declared and undeclared variables from the parent scope. When the function returns, the caller is able to use the variable that was used without declaration inside the function. The other variable is scoped to the function and is no longer available after the function returns.

Example 3-15. Working with variable scope
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Scope</title>

    <script type="text/javascript">

        // Use of a global variable without declaration
        someUndeclaredVariable = "some undeclared variable";

        // Global variable declaration

        var someDeclaredVariable = "some declared variable";

        function someFunction() {
            // Variable declared local to the function
            var nestedDeclared = "a nested declared variable";

            // Undeclared variable used in function becomes global in scope
            nestedUndeclared = "a nested undeclared variable";

            // Update the global variables
            someUndeclaredVariable = "modified undeclared variable";
            someDeclaredVariable = "modified declared variable";
        }

        someFunction();

// Check the existence and values of the variables
        if(!!someUndeclaredVariable) {
            document.write("someUndeclaredVariable = " + someUndeclaredVariable +
               "<br />");
        }

        if(!!someDeclaredVariable) {
            document.write("someDeclaredVariable = " + someDeclaredVariable +
               "<br />");
        }

        if(!!nestedUndeclared) {
            document.write("nestedUndeclared = " + nestedUndeclared + "<br />");
        }

        if(!!nestedDeclared) {
            document.write("nestedDeclared =" + nestedDeclared + "<br />");
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

Figure 3-8 shows the output of running the page from within both Microsoft's Internet Explorer and Mozilla's Firefox. Although there are attempts to access and write each of the four variables, only the two used in the global scope and the one used in a nested scope without declaration are available. The undeclared variables are automatically elevated to a global scope. The declared variable is limited to the scope in which it is defined. In a simple example like this, it appears straightforward, but in real-world, complex development tasks, the scoping of undefined variables can easily lead to problems that are hard to isolate and fix.

In Figure 3-8, notice the small yellow exclamation point icon in the lower-left corner of Internet Explorer. This is an indication of an error on the page. When it is double-clicked, a dialog will appear that explains that there is a script error on the page. In fact, you can instruct Internet Explorer to treat this as an error. That way instead of getting an exclamation point in the corner, a dialog box alerts you that the undeclared variable was used.

The details view of the error says that script code on the page is attempting to use an undeclared variable. In Firefox, the Tools menu has an option for launching a JavaScript console for working with script on the page. The Firefox console shows additional warnings when running in strict mode. To access the configuration settings, enter about:config in the address bar of the browser and press Enter.

Figure 3-8. Figure 3-8

When you use this command, a long list of available configuration settings is displayed. Any setting that has been changed from the default value will be in bold text, while the rest are in regular text. Scroll down until you see javascript.options.script and double-click on that line in particular. This action will toggle the value to true from its default value of false.

Any use of undeclared variables will then be flagged in the JavaScript console as a warning. The browser window itself will not show an error, but the JavaScript console will show the warning when it is made visible by selecting it in the Tools menu (by selecting Tools Error Console). Internet Explorer and Firefox both provide ways to find any undeclared variables you have used because of the problems that arise when coding that way. Always declare variables to limit their scope and avoid modifying data unintentionally. Figure 3-9 shows the configuration screen for Mozilla Firefox and the JavaScript console, with a warning visible for using an undeclared variable.

Sometimes you want to test to see whether a variable is in scope without causing an error. You do this by testing for it as a member of the window class. If an object exists, it will be coerced to true in a Boolean test; if false, it does not exist:

if(window.nestedDeclared)
{
    document.write("nestedDeclared =" + nestedDeclared + "<br />");
}
else
{
    document.write("nestedDeclared is not in scope");
}

Figure 3-9. Figure 3-9

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset