Tap into advanced JavaScript functions

JavaScript's advanced functions will add power and punch to your Web site. Here's how to leverage recursion and passing by reference and value.

JavaScript functions are a convenient way to package sequences of instructions designed to perform specific tasks or to act as constructors for classes. You can find oodles of documentation on the Internet about using basic functions, but just try to find some info on advanced features of JavaScript functions. So I hope to provide some insight on leveraging recursion and other high-end capabilities.

Before diving into the harder stuff, let’s look at the ways that you can define functions in JavaScript.

Defining JavaScript functions
JavaScript provides three ways to define functions:

• The function statement
• The Function() constructor
• The function literal

Let's create a function called add to demonstrate these three approaches. The purpose of this function is to take the two passed arguments, add the arguments, and return the result.

Listing A (all listings are at the bottom of this page) displays how to create a function using the function statement, the most common tactic. Listing B illustrates function creation using the Function() constructor. I use the Function() constructor for event handlers, like onChange or onClick. The advantage of using the Function() constructor is that it provides the ability to use the this keyword. The this keyword is a reference to the object through which the function is invoked; it gives you the ability to pass the object to a function. Listing C shows how to define a function as a literal, and also illustrate that JavaScript functions are strings. This means that the code:

xyzzy = add; alert(xyzzy(2,2))

will produce the same results as:

alert(add(2,2))

One advantage of defining functions as literals is that it lets you copy server-side JavaScript functions to the client side.

Now that we’ve hashed out the basics, let’s take a look at some more advanced applications of JavaScript.

JavaScript functions as class constructors
JavaScript functions can act as class constructors to create custom objects. Because instances of these classes are created using the new operator, they can use the this keyword to reference the new object, as does the Function() constructor shown in Listing B. The use of the this keyword in class constructors allows instances of classes to have both methods and properties, as shown in Listing D.

Code Listings

Listing A

function add(x,y) {
       return x + y;
}

Listing B

var add = new Function('x','y','return x + y;');

Listing C

var add = function(x,y) {return x + y;};

Listing D

function myMath() {
                                         //     Properties
       this.result;               //     Result of method

                                         //     Methods
       this.add = myAdd;                 //     Add method

       function myAdd(x,y) {
              this.result = x + y;

              return this.result;
       }
}

var math = new myMath();          //     Create an instance

alert(math.add(2,2));
alert(math.result);