A function is a group of reusable code which can be called anywhere
in your programme. This eliminates the need of writing same code again
and again. This will help programmers to write modular code. You can
divide your big programme in a number of small and manageable functions.
Like any other advance programming language, JavaScript also supports
all the features necessary to write modular code using functions.
You must have seen functions like
alert() and
write() in previous chapters. We are using these function again and again but they have been written in core JavaScript only once.
JavaScript allows us to write our own functions as well. This section
will explain you how to write your own functions in JavaScript.
Function Definition:
Before we use a function we need to define that function. The most
common way to define a function in JavaScript is by using the function
keyword, followed by a unique function name, a list of parameters (that
might be empty), and a statement block surrounded by curly braces. The
basic syntax is shown here:
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
|
Example:
A simple function that takes no parameters called sayHello is defined here:
<script type="text/javascript">
<!--
function sayHello()
{
alert("Hello there");
}
//-->
</script>
|
Calling a Function:
To invoke a function somewhere later in the script, you would simple need to write the name of that function as follows:
<script type="text/javascript">
<!--
sayHello();
//-->
</script>
|
Function Parameters:
Till now we have seen function without a parameters. But there is a
facility to pass different parameters while calling a function. These
passed parameters can be captured inside the function and any
manipulation can be done over those parameters.
A function can take multiple parameters separated by comma.
Example:
Let us do a bit modification in our
sayHello function. This time it will take two parameters:
<script type="text/javascript">
<!--
function sayHello(name, age)
{
alert( name + " is " + age + " years old.");
}
//-->
</script>
|
Note: We are using
+ operator to concatenate string and number all together. JavaScript does not mind in adding numbers into strings.
Now we can call this function as follows:
<script type="text/javascript">
<!--
sayHello('Zara', 7 );
//-->
</script>
|
The return Statement:
A JavaScript function can have an optional
return statement.
This is required if you want to return a value from a function. This
statement should be the last statement in a function.
For example you can pass two numbers in a function and then you can
expect from the function to return their multiplication in your calling
program.
Example:
This function takes two parameters and concatenates them and return resultant in the calling program:
<script type="text/javascript">
<!--
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
//-->
</script>
|
Now we can call this function as follows:
<script type="text/javascript">
<!--
var result;
result = concatenate('Zara', 'Ali');
alert(result );
//-->
</script>
|
Advanced Concepts for Functions:
There is lot to learn about JavaScript functions. But I have put
following important concepts in this tutorial. If you are not in furry
then I would suggest to go through them at least once.