JavaScript Functions

In addition to having access to dozens of built-in functions (or methods) such as write, which you have already seen being used in document.write, you can easily create your own functions. Whenever you have a more complex piece of code that is likely to be reused, you have a candidate for a function.

Defining a Function

The general syntax for a function is:

function function_name([parameter [, ...]])
{
statements
}

The first line of the syntax indicates that:
• A definition starts with the word function.
• A name follows that must start with a letter or underscore, followed by any number of letters, digits, dollar symbols, or underscores.
• The parentheses are required.
• One or more parameters, separated by commas, are optional (indicated by the square brackets, which are not part of the function syntax).
Function names are case-sensitive, so all of the following strings refer to different functions: getInput, GETINPUT, and getinput.
In JavaScript there is a general naming convention for functions: the first letter of each word in a name is capitalized except for the very first letter, which is lowercase. Therefore, of the previous examples, getInput would be the preferred name used by most programmers. The convention is commonly referred to as bumpyCaps.
 
The opening curly brace starts the statements that will execute when you call the function; a matching curly brace must close it. These statements may include one or more return statements, which force the function to cease execution and return to the calling code. If a value is attached to the return statement, the calling code can retrieve it.

The arguments array

The arguments array is a member of every function. With it, you can determine the number of variables passed to a function and what they are. Take the example of a function called displayItems. Example 16-1 shows one way of writing it. Example 16-1. Defining a function.

<script>
displayItems("Dog", "Cat", "Pony", "Hamster", "Tortoise")
function displayItems(v1, v2, v3, v4, v5)
{
document.write(v1 + "<br />")
document.write(v2 + "<br />")
document.write(v3 + "<br />")
document.write(v4 + "<br />")
document.write(v5 + "<br />")
}
</script>

All of this is fine, but what if you wanted to pass more than five items to the function? Also, reusing the document.write call multiple times instead of employing a loop is wasteful programming. Luckily, the arguments array gives you the flexibility to handle a variable number of arguments. Following example shows how you can use it to rewrite the example in a much more efficient manner.

<script>
function displayItems()
{
for (j = 0 ; j < displayItems.arguments.length ; ++j)
document.write(displayItems.arguments[j] + "<br />")
}
</script>

Note the use of the length property, which you already encountered in the previous tutorials, and also how the array displayItems.arguments is referenced using the variable j as an offset into it. I also chose to keep the function short and sweet by not surrounding the contents of the for loop in curly braces, as it contains only a single statement. Using this technique you now have a function that can take as many (or as few) arguments as you like and act on each argument as you desire.