6.14 function

The function statement defines a JavaScript function. It has the following syntax:

function funcname([arg1 [,arg2 [..., argn]]]) {
    statements
}

funcname is the name of the function being defined. This must be an identifier, not a string or an expression. The function name is followed by a comma-separated list of argument names in parentheses. These identifiers can be used within the body of the function to refer to the argument values passed when the function is invoked.

The body of the function is composed of any number of JavaScript statements, contained within curly braces. These statements are not executed when the function is defined. Instead, they are compiled and associated with the new function object for execution when the function is invoked with the ( ) function call operator. Note that the curly braces are a required part of the function statement. Unlike statement blocks used with while loops and other statements, a function body requires curly braces, even if the body consists of only a single statement.

A function definition creates a new function object and stores that object in a newly created property named funcname. Here are some example function definitions:

function welcome(  ) { alert("Welcome to my home page!"); }

function print(msg) {
    document.write(msg, "<br>");
}

function hypotenuse(x, y) {
    return Math.sqrt(x*x + y*y);  // return is documented below
}

function factorial(n) {           // A recursive function
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

Function definitions usually appear in top-level JavaScript code. They may also be nested within other function definitions, but only at the "top level" of those functions; that is, function definitions may not appear within if statements, while loops, or any other statements.

Technically speaking, the function statement is not a statement. Statements cause dynamic behavior in a JavaScript program, while function definitions describe the static structure of a program. Statements are executed at runtime, but functions are defined when JavaScript code is parsed, or compiled, before it is actually run. When the JavaScript parser encounters a function definition, it parses and stores (without executing) the statements that comprise the body of the function. Then it defines a property (in the call object if the function definition is nested in another function; otherwise, in the global object) with the same name as the function to hold the function.

The fact that function definitions occur at parse time rather than at runtime causes some surprising effects. Consider the following code:

alert(f(4));     // Displays 16. f(  ) can be called before it is defined.
var f = 0;       // This statement overwrites the property f.
function f(x) {  // This "statement" defines the function f before either
    return x*x;  // of the lines above are executed.
}
alert(f);        // Displays 0. f(  ) has been overwritten by the variable f.

These unusual results occur because function definition occurs at a different time than variable definition. Fortunately, these situations do not arise very often.

We'll learn more about functions in Chapter 7.