## Javascript functions

### Javascript Functions

Let us assume that you want to calculate and print the area of a rectangle for 5 different sets of length and breadth values. The problem is easy. You can do that by writing the same code again and again for 5 different values as follows

<html> <body> <script type="text/javascript"> <!-- /* ******************************************************** Example Area of Rectangle ******************************************************** */ length1 = 20 ; width1 = 10 ; area1 = length1 * width1; document.write(" Area of rectangle 1 is ", area1,"<p>"); length2 = 30 ; width2 = 20 ; area2 = length2 * width2; document.write(" Area of rectangle 2 is ", area2,"<p>"); length3 = 5 ; width3 = 3 ; area3 = length3 * width3; document.write(" Area of rectangle 3 is ", area3,"<p>"); length4 = 10; width4 = 8 ; area4 = length4 * width4; document.write(" Area of rectangle 4 is ", area4,"<p>"); length5 = 15; width5 = 12; area5 = length4 * width4; document.write(" Area of rectangle 5 is ", area5,"<p>"); //--> </script> </body> </html> |

The program will produce the desired result. It will calculate the area of the rectangle for 5 different sets of values of the length and width.

We can however use function to solve the problem. The example below solves the same problem using functions

<html> <head> <script type="text/javascript"> <!-- /* ******************************************************** Example Area of Rectangle - Using functions ******************************************************** */ function rectangle_area(length, breadth) { var area = length * breadth ; return area; } //--> </script> </head> <body> <script type="text/javascript"> <!-- var length = new Array(); length[0] = 20; length[1] = 30; length[2] = 5; length[3] = 10; length[4] = 15; var width = new Array(); width[0] = 10; width[1] = 20; width[2] = 3; width[3] = 8; width[4] = 12; var i; var find_area ; for ( i = 0; i<=4; i++) { find_area = rectangle_area(length[i], width[i]); document.write(" Area of rectangle ", i+1, " is ", find_area,"<p>"); } //--> </script> </body> </html> |

We have

**defined**a

**function**which will calculate the area of the rectangle. Let us take a look at the fuction again

function rectangle_area(length, breadth)

{

var area = length * breadth ;

return area;

}

**rectangle_area**is the name of the function. The length and breadth are the arguments of the function. The following line calculates the area.

var area = length * breadth ;

And the calculated value is returned by the function in the following line

return area;

The function rectangle_area is

**called**as follows

find_area = rectangle_area(length[i], breadth[i]);

Note that the value returned by the function is assigned to the variable find_area.

You can try this example online at the link below, which will open in a new window.

**Javascript function - Example**

Functions are very useful when the same task need to be done again and again. It can also be used to enhance the "modularity" of the code. So a long script can be broken into small peices and each peice is called where required. The increase the understanding of the code.

### When not to Use Functions

Functions has slight overhead in loading in execution. In most cases the gain because of the smaller size of the code as a result of use of functions outweight the losses due to the overhead. But there may be instances where it may be otherwise and you may not like to use functiuons.