Understanding JavaScript Functions

Previous	Table of Contents	Next
JavaScript Flow Control and Looping		JavaScript Object Basics

eBookFrenzy.com

Purchase and download the full PDF version of this JavaScript eBook for only $8.99

JavaScript functions provide a way to organize scripts and promote re-use. Rather than create long sections of script scattered throughout an HTML page, the script is instead organized into logical groups. JavaScript functions are simple to use, in fact you only need to do two things with a function, declare it and call it.

Declaring and Calling a JavaScript Function

The syntax of a JavaScript function is as follows:


function ''name'' ( ''argument1'', ''argument2'', ''argument3'' ... )
{
           ''statements''
           return ''value''
}

The name specifies how we will refer to this function when we call it. The arguments specify values that are passed through to the function to be processed. The statements section represents the body of the function that performs the processing. The optional return statement allows a value to be returned to the section of scripted which called the function (for example to return a status or the result of a calculation).

The following simple example shows a function defined in the <head> section of an HTML page and a call to this function in the <body>:


<html>
<head>
<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function sayHello()
{
      alert("Hello!");
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
sayHello();
</script>
</body>
</html>

Passing Arguments to a Function

The above example did not pass any arguments through to the function. Commonly a function is designed to perform some task on a number of arguments as in the following example:


<html>
<head>
<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function sayHello( day, month)
{
      alert("Hello! Today is the " + day + " of " + month);
}
</script>
</head>

<script language="JavaScript" type="text/javascript">
sayHello( "24th", "July" );
sayHello ( "1st", "August" );
sayHello ( "24th", "May" );
</script>

</body>
</html>

In this example, the function is called multiple times, passing through arguments that are then used in the function to construct a string to be displayed in the alert dialog. To achieve this without functions it would be necessary to repeat the script in the function 3 times over in the body. Clearly, placing the script in a function and re-using it over and over is a much more efficient approach.

Next we need to look at how a function might return a value.

Returning a Value from a Function

The return statement is used to return a value from a function and the assignment (=) value is used to accept that return value at the point that the function is called.

As an example, we will declare a function that adds together two arguments and returns the result:


<html>
<head>
<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function addValues( value1, value2)
{
      return value1 + value2;
}
</script>
</head>

<script language="JavaScript" type="text/javascript">
var result = addValues( 10, 20)
document.write ( "Result = " + result);
</script>

</body>
</html>

The above example passes 10 and 20 through to the addValues function. The addValues function adds these two values together and returns the result. The assignment operator assigns the result to the variable result which is then used to construct a string which, in turn, is written to the HTML page.

The function call can be made in many different places. For example, we do not need to assign the result to a variable, we can use it directly as an argument to the document.write call:

It is important to note that a function can return one, and only one value.


<html>
<head>
<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function addValues( value1, value2)
{
      return value1 + value2;
}
</script>
</head>

<script language="JavaScript" type="text/javascript">
document.write ( "Result = " + addValues( 10, 20));
</script>

</body>
</html>

Functions can also be used in conditional expressions. For example:



<html>
<head>
<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function addValues( value1, value2)
{
      return value1 + value2;
}
</script>
</head>

<script language="JavaScript" type="text/javascript">

if (addValues( 10, 20) > 20)
{
      document.write ( "Result > 20");
}
else
{
      document.write ( "Result < 20");
}
</script>

</body>
</html>

Where to Place Function Declarations

There are two recommended locations to place function declarations. These are either within the <head> section of the HTML document from which they will be called, or within a .js include file that is included in the <head>. The preferred location is in the .js file since this provides the most flexibility in terms of making the functions available in other pages.

Further, the objective in writing functions is to make them as general as possible in order to maximize re-use. Be sure to take a little time when designing functions to consider how you might make the function useful in the future, not just for the current requirement.