Fruitful Functions

You probably have already noticed a difference between the way alert() and prompt() are used:

var user_name = prompt("What is your name?");
alert("Pleased to meet you, " + user_name);

Here, prompt() is used on the right-hand side of an assignment. This makes sense, because we expect prompt() to accept a string input from the user and return it so, for example, it can be stored in a variable. On the other hand, we do not expect alert() to return anything. It is just an announcement. Note: since prompt() returns a string it can be used anywhere that a string is expected. For instance, we could also do:

alert("Pleased to meet you, " + prompt("What is your name?"));

You can divide all functions (and methods, which are functions associated with JavaScript objects, so all the comments we will make about functions apply to methods as well) into two categories: Those that return a value, and those that do not.

1. Functions that return values (often called fruitful functions but we will call them simply functions) are reminiscent of the mathematical functions you learned about in mathematics. If you plug in some argument(s), you get back an answer.

        f(x) = cos(x) + sin(x) 
   

2. Functions that do not return a value, called procedures, are like recipes. They perform a series of operations that have desirable side effects, but they don't produce a value.

document.write()
alert()
today.getMonth()
parseFloat()

How to define a function that returns a value

To define a function that returns a value, simply use the return statement.

Let's say you want to create a feet-to-meters converter called feet2meters(feet) which takes one parameter, feet. Since one multiplies the number of feet by 0.3048 to compute the distance in meters, you could define the function like this:

<SCRIPT type="text/JavaScript">
  /* INPUT:  distance in feet */
  /* OUTPUT: the  distance in meters */
  function feet2meters(feet) 
  {
          var result = feet * 0.3048;
          return result;
  } /* feet2meters() */
</SCRIPT>

In general, it is a good idea to define your functions (and procedures) in the HEAD of the web page. In the BODY you could use feet2meters(feet) as follows:

<SCRIPT type="text/JavaScript">
  var num_feet = prompt("Please enter some distance measured in feet");
  num_feet = parseFloat(num_feet);
  var num_meters = feet2meters(num_feet);
  alert(num_feet + " feet is equivalent to " + num_meters + " meters.");
</SCRIPT>

Or, you could use it as follows

alert("100 feet is equivalent to " + feet2meters(100) + " meters.");

In the last example, the value returned by the function is printed directly inside an alert!

One final, important, comment regarding the return statement. In the above example, the return statement is the final statement in the function but this is not necessarily always the case. Indeed, a return statement may be used anywhere in the body of a fruitful function. A return statement causes a function to immediately return control to the calling statement — that is, to the statement that called the function in the first place. It follows, then, that if the return statement is NOT the last statement in a function, the remainder of the function will NOT be executed.

For example, one common sort of error is illustrated by the following code, in which the function is syntactically correct and seems reasonable, but the alert() statement will never be executes:

function eligible(age) 
{
        if( age >= 35 ) {
                return true;
        } else {
                return false;
        }
        alert("The minimum age to be elected President is 35.");
}    

• Introduction
• Syllabus
• Assignments
• Documentation
• Project

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 24-Jan-2008 14:35:02 EST