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.