JavaScript The Complete Reference (2012)

---

ONLINE http://javascriptref.com/3ed/ch5/weakreference.html

If you are concerned about flexibility and slight variations of passing semantics depending on modification, then just rely on return to pass a value(s) back from a function. If it is necessary to send multiple values back from the function, it is possible to do this by returning an array or object that contains multiple entries.

Global and Local Variables

There are two basic scopes in JavaScript: global and local. A global variable is one that is known throughout a document, while a local variable is one that is limited to the particular function it is defined within. For example, in the script here, the variable x is defined globally and is available within the function myFunction(), which both prints and sets its value:

The output of this script is shown here:

Notice in this case that the variable x can be read and modified both inside and outside the function. This is because it is global. However, global variables aren’t always helpful because they don’t allow us to reuse functions easily.

Instead of using global variables, we should define local variables that are known only within the scope of the function in which they are defined. For example, in the following script the variable y is defined locally within the function myFunction() and set to a simple string:

However, outside the function, y is undefined, so the script will throw an error message:

To “fix” the execution of this script, we can replace the second output statement with a small if statement to determine if the variable y is defined within the current context, namely the current window:

Notice that, in this case, the script shows that indeed the variable y is undefined in the global space:

However, more likely, we purposefully want to create local variables that are not known in the global scope so that we can hide the implementation of the function from the code that uses it. This abstraction allows for the clean function reuse alluded to earlier, but be careful because sometimes the use of local and global variables can get confusing, particularly when there are similar names in use.

Variable Naming for Scope

When employing variables in different scopes, we should be cautious. In this section, we briefly discuss how to name variables for readability. First up, the use of similar variable names for both local and global variables creates a potentially confusing situation, often termed a mask out. Notice in the example here how both local and global variables named x are used:

As shown in the output here, the value change made in the function is not preserved because the local variable does not affect the global one:

This is the appropriate action, but the readability of the code is somewhat reduced since there is no immediate difference on inspection between the global x and the local x. Given the often dangerous use of global variables, many JavaScript programmers will prefix them with a g so that they are easily seen. For example:

Alternatively, you may decide to prefix the local variable or make it a property of the function itself and reference it in that way so it is more obvious that the variable is local:

As we’ve mentioned many times in the book, we need to be somewhat cautious with JavaScript variable naming, particularly with global values, as they share the same name space with other scripts. The use of the object wrapper or prefixing techniques should be used to reduce the possibility of these problems.

Inner Functions

It might also be useful, in addition to limiting a variable’s scope to a particular function, to create a function local to a function. This capability is not surprising if you consider that it is possible to create local objects and that functions themselves are objects (as we’ll see in the section “Functions as Objects,” later in this chapter).

To create a local function, just declare it within the statement block of the function to which it should be local. For example, the following script shows a function called testFunction() with two locally defined functions, inner1() and inner2():

From within the function, it is possible to call these functions as shown above, but attempting to call inner1() or inner2() from the global scope results in error messages, as demonstrated here:

Do not mistakenly assume that you would be able to invoke the inner functions with some path such as testFunction.inner2(), as that doesn’t work. Local functions are hidden within the containing object, and thus this construct provides us the ability to create stand-alone modules of code. Early on, such techniques were not widely used; but today with much more involved uses of JavaScript, they are more commonplace. However, the potentially confusing nature of variable scope and the lifetime of inner functions present an often confusing but quite useful idea called a closure, which we explore next.

Closures

A closure is an inner function in JavaScript that becomes available outside of the enclosing function and thus must retain a variable state to act in a meaningful way. For example, consider the following function:

When you run this code fragment, the function outer() is invoked and has a locally scoped function inner() that will print out the variable. This inner() function will be called in one second, but you will have left the outer() function by the time the inner() function is called, so what would the value of x be? Because of the way JavaScript binds the values of the needed variables to the function, it will actually have a value in x of 10 at the time the function inner() is invoked:

This gets quite interesting if you note when these bindings actually happen. Consider the following code, which resets the value of x:

It might be surprising to you, since the timeout and the reassignment happens after the function is defined, that the value of x is the string value “Late to the party!” as shown here. This shows that the inner function is not just copying the value of the variable x, but also holds a reference to that variable.

Do not assume that closures are related solely to timeouts and other asynchronous activity, such as the pattern of JavaScript called Ajax thrives on; they can be employed casually. The following little example shows that you could just as easily use them when doing higher-order JavaScript programming when you return functions as values for later use:

Beyond such a rudimentary example of closures, you will also encounter these constructs commonly in Ajax applications (see Chapter 15) because of the need to set up asynchronous communication and various event handlers to address user activity. We’ll see that sloppy use of closures, event handlers, and other JavaScript nuances can lead to memory leaks. We warn readers that excessively employing complex coding patterns heavy on closures may be done with good intention of elegance, but may too often result in frustrating debugging and refactoring efforts.

Functions as Objects

As we’ll see in the next chapter, in JavaScript just about everything is an object, and functions are no exception. Thus it is possible to define functions in a much different way than we have seen up until now by treating a function just like any plain object and instantiating it using the keyword new. For example, here we define a function and assign it to the variable sayHello :

Notice that Function is capitalized since it is a constructor and we are creating an instance of JavaScript’s built-in Function object. Later on, we can then use the assigned variable sayHello just like a regular function call:

Because functions are first-class data types, the function can even be assigned to another variable and used by that name instead:

To continue the example, we could define a function with a parameter to print out, as follows,

and call it:

The general syntax for the Function() constructor is

As we have already seen, functions can have zero arguments, so the actual number of parameters to the Function() constructor will vary. The only thing we have to do is pass, as the final argument, the set of statements that are to execute as the body of the function.

If you have coded JavaScript before, you may not have seen this style of function definition and might wonder what its value is. The main advantage of declaring a function using the new operator is that a script can create a function after a document loads.

Function Literals

As we have seen in the previous section, defining a function using a new operator doesn’t give the function a name. A similar way to define a function without a name and then assign it to something is by using a function literal. Function literals use the function keyword but without an explicit name. Our simple example from before would be written as a functional literal, like so:

Function literals are commonly employed when creating methods for user-defined objects. A simple example showing function literals used in this manner is presented here. We have defined a function Robot() that is used as an object constructor—a function that creates an object. Within the function, we have defined three methods that are assigned function literals:

It is now simple to create an object using the new operator in conjunction with our Robot constructor function, as shown here:

Invoking the various functions, or more correctly methods, is simply a matter of invoking their names, similar to plain function calls:

You might wonder why not just use the following new style syntax in the constructor function:

The reality is you could, and everything would still operate properly. The only downside to this approach is that it will use substantially more memory, as new function objects are created every time you create a new instance of the Robot object.

Anonymous Functions

A function literal is a nameless function that doesn’t get assigned a name at any time. An anonymous function is one that cannot be further referenced after assignment. For example, we may want to sort arrays in a different manner than what the built-in sort() method provides (as we’ll see in Chapter 7); in such cases, we may pass an anonymous function:

The creation of an anonymous function is, in this case, carried out by using a function literal. While the function is accessible to sort() because it was passed a parameter, the function is never bound to a visible name, so it is considered anonymous.

As the previous example demonstrates, in JavaScript functions are first-class data types, so it is quite possible to use them pretty much wherever you might use a variable. Generally, these throw-away functions are directly invoked. Here a simple example shows this:

The general sense of wanting to use such a construct is to encapsulate some code you would like to use once and not pollute the runtime name space.

Probably the most common style of anonymous function application will be as simple event handlers, as illustrated with this example that binds a window load-handling function as well as a simple function for a button press:

While syntactically correct, this use of anonymous function event binding is inelegant and results in interaction problems when used with multiple scripts. A better approach to event management using DOM methods such as addEventListener() is presented in Chapter 11.

Static Variables

One interesting aspect of the nature of functions as objects is that you can create static variables that persist beyond function invocations by adding an instance property for the defined function. For example, consider the code here that defines a function doSum() that adds two numbers and keeps a running sum:

The result shown next demonstrates that, by using a static variable, we can save data between calls of a function: