JavaScript Functions

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>