A JavaScript function is a variable object that includes one or more JavaScript statements enclosed by opening and closing curly brackets: { [statments] }

Like other variable objects, a function is assigned a keyname label by the developer and created using the following general syntax:

function function-label([arguments]){
   [statments;]
   }

When "called" by the assigned keyname, the statement(s) enclosed by the brackets will execute in the listed order.

And here is how the function would be "called" by another script or statement in the page:

<script type='text/javascript'>
function-label([arguments])
</script>

Functions provide an important means for channeling the timing and execution of the code as well as a useful tool for recycling complex statements in your code.

5.1 Syntax

A function is declared using the key word function:

function function-label ([arguments]){
   [statments;]
   }

5.1.1 Function-label:

The function-label is like any other JavaScript variable label. It must be unique to the document. It can consist of letter and number characters (a-z A-Z 0-9). The name can include the underscore character but not spaces, punctuation or special characters. The initial character must be a letter.

By convention, but not rule, the initial letter of a function-label is lowercase. All of the following would be acceptable:

function make_list() { }
function makeList () { }
function makelist () { }
function makelist_2() { }

Note that the function-label is followed by a pair of parenthesis whether or not the function takes a named argument (see below)

5.1.2 Statements:

The statements enclosed by the brackets can be any valid JavaScript statements selected by the programmer including calls to other functions.

5.1.3 Arguments:

The [arguments] are one or more parameters which may be passed to the function for use in its operations.

Required arguments are declared as named variables in the parenthesis following the function-label at the time the function is defined

function function-label(arg1, arg2) {
   [statements]
   }

function calc(n,y) {
   var x=(n+y);
   alert(x);
   }

Arguments are passed in a to the function inside the parenthesis () which follow the function-label in the call to function:

function-label(val1, val2);

calc(8,6);

But note that as indicated in the following examples, not every function includes argument values.

5.2.1 Example With No Argument

Here is the Hello World program in the form of a JavaScript function conveniently named "hello_world":

function hello_world(){
   message="Hello World";
   document.write(message);
   }

hello_world();

5.2.2 Example With Argument

Now we'll change the function a little by renaming it "hello_who" and assigning a single argument called "who": And now the value of who will be passed (assigned) by including a value in the call to the function as follows:

function hello_who(who){
   message="<p>Hello " + who;
   document.write(message);
   }

hello_who("World");

hello_who("Web");

5.3 Return Value

JavaScript functions can return a value to the object or function which originally made the call executing the function using the key word return:

function function-label([arguments]){
   [statements]
   return [value];
   }

var variable = function-label([arguments]);

The return value can be a primitive true or false condition. In the example below, the function many() returns the results of a comparison that is true only if the number passed to the function is greater than 3. The script writes a conditional message depending on whether the results of many(n) are true or false:

function many(n){
    return (n>3);
    }

var amount=4;
document.write( ((many(amount))? 'Plenty' : 'Not So Much') + "<br />" );

var amount=3;
document.write( ((many(amount))? 'Plenty' : 'Not So Much') + "<br />" );

In addtion to primitive true/false conditions, the return value can also be the results of one or more operations. Here, for example, is how return would be used to pass the results of formatting operations to a sequence of array listings from a function named make_entry():

var employees = new Array();

employees['Gould']={ f_name : "Glenn", l_name : "Gould", phone : "547" };
employees['Marx']={ f_name : "Allan", l_name : "Marx", phone : "542" };
employees['Peters']={ f_name : "Mary", l_name : "Peters", phone : "544" };
employees['Wilson']={ f_name : "Carl", l_name : "Wilson", phone : "548" };

function make_entry(lname) {
    var record = "<p>";
    var employee = employees[lname];
    record += employee['l_name'] + ", "
    record += employee['f_name'] + " (x " 
    record += employee['phone'] + ")" 
    record += "</p>";
    return record;
    }

for(keys in employees) { document.write(make_entry(keys)) };

Part 5 of 9 | Next Part 6: Custom Objects >