Illustrations of JavaScript Functions



Navigation Aids -- This Page        Navigation Aids -- This Topic        Navigation Aids -- This Site










Illustration Summary

Our illustrations will proceed from the simple concepts to the more difficult. Each step will be illustrated with code examples and an explanation. We provide links to supporting topics. A outline of each step follows:

  1. The Function Statement Declaration
  2. The Function Literal Statement
  3. The Function Class
  4. Invoking a Function with the Call Statement
  5. Using the apply( ) Method
  6. Using the call( ) Method



A Step By Step Approach



1. The Function Statement Declaration


function priceIt(itemPrice, quantity) { var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate); }

Four parts of the FSD (Function Statement Declaration)

  1. the function keyword: function
  2. the function name: priceIt
  3. the function parameters: (itemPrice, quantity)
  4. the function body: enclosed in curly braces

Illustration Explanation: the FSD is the most common approach for declaring a function. By itself, this declaration does nothing. This function must be invoked with the JavaScript call statement before its code can be executed. See step 4 for the illustration of the invoking call statement. The "priceIt" function requires two parameters. These parameters as specified in the FSD are referred to as formal parameters. The invoking call statement will supply the actual values to the formal parameters. The "priceIt" function also contains two local variables, "taxRate" and "totAmt". The "priceIt" function will return a value to the caller. The returned value is the result of the expression as specified in the return statement.




2. The Function Literal Statement


var priceIt = function(itemPrice, quantity) { var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate); }

Three parts of the function literal statement:

  1. the function keyword: function
  2. the function parameters: (itemPrice, quantity)
  3. the function body: enclosed in curly braces

Illustration Explanation: the function literal is much like the FSD except that it is used as an expression instead of as a statement and the function defined is unnamed. In our illustration we used the function literal expression along with an assignment statement where we assigned a name to the function literal. The associated assignment statement is responsible for:

  1. the function name: priceIt
  2. the assignment operator: =



3. The Function Class


var priceIt = new Function("itemPrice", "quantity", "var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate);");

Five parts of the Function Class declaration:

  1. the object name: priceIt
  2. the assignment operator: =
  3. the new operator: new
  4. the Function Constructor: Function( )
  5. the constructor arguments:
    • the function parameters: "itemPrice", "quantity"
    • the function body: "var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate);"

Illustration Explanation: the above statement accomplishes two tasks. The function declaration is accomplished with: Function("itemPrice", "quantity", "var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate);"); However, the anonymous function is basically useless without an access name. Therefore, the declared function requires the new operator to instantiate an object by assigning the function declaration to an object instance named "priceIt". This new object can then be invoked with the function call statement.




4. Invoking a Function with the Call Statement

See our page entitled, "JavaScript Call Statement" for more details on the function call statement.


var aPrice = priceIt(10.00, 5);//5 items for $10.00 each ... next sequential statement ...

The parts of the function call statement:

  1. the expression statement: the function call statement takes the form of an expression statement. Recall that an expression statement always causes a side effect but may or may not return a value. A function call expression will do both:
    • side effect: a call to a function will alter program logic flow. You jump out of sequential processing and come back after the function has completed it's task. Our illustration jumps to the function named "priceIt" and control is returned to the next sequential instruction once "priceIt" is done executing.
    • return a value: the function "priceIt" will return a value. Given the actual parameters our illustration uses to pass to "priceIt", "priceIt" will return a value of "52.50". This value is assign to the variable "aPrice".
  2. the function name: priceIt
  3. the parentheses operator: ( )
  4. the actual parameters of the argument operand: (10.00, 5)



5. Using The apply( ) Method

Take this link to review the function.apply( ) method.

The syntax of the apply( ) method is shown here:

functionName.apply(thisobject, args)

To illustrate the apply( ) method, we will:

  1. define a function; the name of this function will replace functionName in the above syntax statement.
  2. define a constructor function for the boat object
  3. instantiate an object using the above constructor; this object will replace thisobject in the above syntax statement.
  4. invoke the function the traditional way
  5. invoke the function using apply( ) method

a. define a function; our function is: showboat

// showboat will be invoked from the "herBoat" object function showboat( ) { document.write(this.make + ", " + this.motor + ", " + this.color); }

b. define a constructor function for the boat object

function boat(make, motor, color) { this.make = make; this.motor = motor; this.color = color; this.show = showboat;//assign the showboat method to show }

c. instantiate a boat object

var herBoat = new boat("StingRay", "Volvo", "White");

d. invoke the function the traditional way

herBoat.show( );// returns: StingRay, Volvo, White

e. invoke the function using the apply( ) method

showboat.apply(herBoat);// returns: StingRay, Volvo, White

Comments: the apply( ) method applied the "showboat" function to the "herBoat" object.

Comments: the apply( ) method does not need the instance property "show"; the above apply( ) statement works fine if the constructor for boat looks like:

function boat(make, motor, color) { this.make = make; this.motor = motor; this.color = color; }

Comments: there are no arguments for showboat, so the second parameter of the apply( ) methods is not required.




6. Using The call( ) Method

Take this link to review the function.call( ) method.

The syntax of the call( ) method is shown here:

functionName.call(thisobject, args)

To illustrate the call( ) method, we will:

  1. define a function; the name of this function will replace functionName in the above syntax statement.
  2. define a constructor function for the boat object
  3. instantiate an object using the above constructor; this object will replace thisobject in the above syntax statement.
  4. invoke the function using call( ) method

a. define a function; our function is: showboat

// showboat will be invoked from the "herBoat" object function showboat(type, year) { document.write("Be safe in your " + year + " " + this.color + " " + this.make + " " + type) }

b. define a constructor function for the boat object

function boat(make, color) { this.make = make; this.color = color; this.show = showboat;//assign the showboat method to show }

c. instantiate a boat object

var herBoat = new boat("BayLiner", "Green");

d. invoke the function using the call( ) method

showboat.call(herBoat, "boat", "2007"); // returns: Be safe in your 2007 Green BayLiner boat

Comments: the call( ) method invokes the "showboat" function on behalf of the "herBoat" object.

Comments: the call( ) method does not need the instance property "show"; the above call( ) statement works fine if the constructor for boat looks like:

function boat(make, motor, color) { this.make = make; this.color = color; }

Comments: the showboat function takes two formal parameters. The actual corresponding parameters are specified with the call( ) method. These two parameters are specified as strings, separated by commas and conform to a list format.




Top            

Rx4AJAX        About Us | Topic Index | Contact Us | Privacy Policy | 2008 This Site Built By PPThompson