Passing and Returning Information Using Functions

Passing Information. One of the main features used in invoking functions is passing inputs from elsewhere in the code to the function. This is a major part of what gives functions more flexibility and re-usability. The basic syntax for a function definition that makes use of and requires passed arguments is

FunctionName(arg1, arg2, arg3, ...)

This way you can use the same function over and over by just passing different values. For example, if you wanted to take the sum of the first n integers you could write the function to require the n to be passed when called. Thus the same function could be used to take the sum of the 5 integers or 10 or any integer.

Our First Passing Example. This function will be used to convert temperatures given in Fahrenheit to temperatures in Celsius/Centigrade. The general function that converts the degrees in Fahrenheit to Celsius is

You should call the following file FahrenheitToCelsius.html and upload and execute it.

<html>
<head>
<title>Fahrenheit to Celsius</title>

<script language = "JavaScript">
function FtoC(FDegrees)
{
var CDegrees = (FDegrees - 32) * 5 / 9;

alert(FDegrees + " degrees Fahrenheit is " + CDegrees + " degrees Celsius.");

}

</script>

</head>

<body>

<script language = "JavaScript">

var FDegrees = prompt("Please enter the number of degrees Fahrenheit\n you would like to convert to Celsius", "32");

FtoC(FDegrees);

</script>

</body>
</html>

This function relies on alert( ) and prompt( ) boxes to obtain and return information. The computation is quite straightforward. Notice how the FtoC function requires the degrees Fahrenheit to be passed in order to perform the conversion.

When you upload and access the page you should see the prompt( ).

Our First Returning Example. Now we want to modify this function slightly to demonstrate how the results of a function can be returned back to the calling procedure. This is done in a relatively obvious way by using a

return variable_name;

statement. We are going to somewhat rearrange the previous code in a new file called FToCReturn.html. The code follows.

<html>
<head>
<title>Fahrenheit to Celsius</title>

<script language = "JavaScript">
function FtoC(FDegrees)
{
var CDegrees = (FDegrees - 32) * 5 / 9;

return CDegrees;
}

</script>

</head>

<body>

<script language = "JavaScript">

var FDegrees = prompt("Please enter the number of degrees Fahrenheit\n you would like to convert to Celsius","32");

var CDegreesB = FtoC(FDegrees);

alert(FDegrees + " degrees Fahrenheit is " + CDegreesB + " degrees Celsius.");

</script>

</body>
</html>

Notice how you have to call the function FToC(FDegrees) using an assigned variable to contain the returned results. I have used CDegreesB to distinguish it from CDegrees.

You aren't likely to be able to tell any difference between the solutions based on what you see when you execute them, but you can see how the code has changed in the file.