Categories:

JavaScript Kit > JavaScript Reference > Here

Function

Last updated: February 3rd, 2009

Functions in JavaScript let you define code that is called on demand, instead of immediately. There are several ways to define a function:

Standard function Statement:

function getarea(w,h){ //standard function
 var area=w*h
 return area
}

getarea(3,5) //calls function

Function Literal (an anonymous function assigned to a variable):

var getarea=function(w,h){
 var area=w*h
 return area
}

getarea(3,5) //calls function

Function Constructor (creates a function on the fly, which is slower and generally discouraged):

//syntax: new Function(argument1, argument2, ..., argumentY, functionbody) //all parameters must be a string

var getarea=new Function("w", "h", "var area=w*h; return area")
getarea(3,5) //calls function

Related Tutorials

Properties

Properties Description
arguments A local variable that points to the "arguments" object, which contains all of the arguments passed into the function. Use "arguments.length" to determine the number of arguments entered. You can use this property to define functions that accept varying number of parameters. The following function returns the sum of all of the parameters' values entered into it:

function sumof(){
 var total=0
 for (var i=0; i<arguments.length; i++){ //step through each parameter entered
  total+=arguments[i]
 }
 return total
}

//sumof(2,3,4) //returns 9
//sumof(8,7) //returns 15

The arguments object supports two properties- you already saw one of them above, which is "length". Here they are:

Properties of the arguments object
Property Description
callee References the function that is currently being called. Most commonly this property is used when you wish to have an anonymous function call itself, in which there is no function name to refer to it by. The following uses arguments.callee to create a factorial function, that is, one that accepts an integer n and returns the value 1*2*3*...*n. This is done by the function multiplying n * (n-1) and calling itself again until n reaches 1:

function(n){
 if (n<=1)
  return 1
 return n*arguments.callee(n-1)
}

You can also use arguments.callee simple to invoke the calling function when you are not privy to its name in advanced.
length Returns the number of parameters passed into the function by the user.
caller References the function in which the current function is called inside of. If the current function is called at the top level, caller returns null. You can use this property to check the context in which a function is being called. For example:

function calltest(){
 alert(calltest.caller)
}

calltest() //alerts null, as calltest() is being called at the top level

function myresidence(){
 calltest()
}

myresidence() //alerts function myresidence(), the function in which calltest() was called inside
length Returns the number of expected parameters for a function. Contrast that with arguments.length, which returns the actual number of parameters entered. The following function contains a generic check to ensure the user has entered the expected number of parameters into it:

function trianglearea(b,h){
 if (arguments.length!=trianglearea.length)
  alert("Incorrect number of parameters entered. Correct should be " + trianglearea.length)
 else
  alert(0.5*b*h)
}

trianglearea(3,8) //alerts 12
trianglearea(3,8,4) //alerts "Incorrect number of parameters entered. Correct should be 2"
prototype Lets you add custom properties and methods to a function's prototype object, which instantly adds them to all instances of the function initialized using the new operator (also called a constructor function). In the below, I'm adding a getprice() method to the constructor function Car() that is reflected on all instances of new Car():

function Car(baseprice, years_old){
 this.baseprice=baseprice
 this.history=years_old
}

Car.prototype.getprice=function(){ //add method getprice() to all instances of Car (called using new Car())
 this.price=this.baseprice - (this.history * 1000)
 alert(this.price)
}

var mytoyota=new Car(20000, 10)
mytoyota.getprice() //alerts 10,000

var myford=new Car(18000, 5)
myford.getprice() //alerts 13,000

You can also use the prototype object to extend prebuilt JavaScript objects that are initialized using the new operator with custom methods, such as with Date(), Array(), or String(). Lets extend the default String object with a backwards() method that takes a string and returns it backwards (ie: "george" becomes "egroeg"):

String.prototype.backwards=function(){
 var strlen=this.length, reversestr=''
 for (var i=strlen-1; i>-1; i--) //loop through each char within string backwards
  reversestr+=this.charAt(i)
 return reversestr
}

document.write('george'.backwards()) //writes out "egroeg"
   

Methods

Methods Description
funcA.apply(funcB, [argument1, argument2, argumentN]) Lets you call a function (funcA) as if it's a method of another function (funcB). Specifically, the "this" keyword when used inside funcA now returns funcB. Identical to call() below, except any arguments passed into funcA should be wrapped in an array.
funcA.call(funcB, argument1, argument2, argumentN) Lets you call a function (funcA) as if it's a method of another function (funcB). Specifically, the "this" keyword when used inside funcA now returns funcB. The two methods apply() and call() are useful when you wish an object to "borrow" a method from another object and use it within its own context.

The following illustrates this:

function borrowme(name){
 this.bonus=(this.salary * 0.15) + (this.seniority * 500)
 alert(name + ", your bonus for this year is: " + this.bonus)
}

function employee(seniority, salary){
 this.seniority=seniority
 this.salary=salary
}

var employee1=new employee(10, 30000)
borrowme.call(employee1, "Sarah") //returns "Sarah, your bonus for this year is: 9500"

Here the custom object "employee" uses the function "borrowme()" to manipulate a few numbers stored within it. Normally the keyword "this" in borrowme() references just that- the function itself. However, when it''s invoked using call(), the context of "this" changes so it references the object passed into the first parameter of call(), or in this case, "employee1".

apply() and call() are important tools in implementing inheritance in JavaScript.
toString() Returns a string that represents the source code (raw text) of the function. A useful method in debugging, by looking at the source code of a function.
Reference List
Partners
Web Design DHTML Menus Free Domain Name JavaScript Community DHTML Scripts
Right column

CopyRight © 1998-2009 JavaScript Kit. NO PART may be reproduced without author's permission.