Javascript Functions
The purpose of functions is to execute single or series of statements. Functions are used to organize the script into different tasks. The most important purpose of the functions is reusability. The functions are written once and can be used or called any number of times within the script. In javascript function needs to be declared with a name and the code which forms the body of the function. The functions may have arguments to pass values to the function and may also have return values through the use of return statement. To declare a function, you need to use function keyword, followed by the name of the function and set of parentheses. The function may or may not have arguments. For example:
function funname()
{
}
In the above example funname is the function name and it does not have any arguments. Function name cannot be javascript keywords or reserved words. The curly brackets denotes the body of the function. The body of the function may contain single or multiple statements. The open curly brackets indicate beginning of the function code and closing curly bracket indicates the end of the function code. When the function is called the script code within the body of the function will be executed. For example:
function display_message()
{
document.write(“This is the body of the function”);
}
The function may have one or more arguments to receive values from the function call. The arguments are declared within the parentheses following the function name. For example to declare function with two arguments:
function display_message(variable1, variable2)
{
}
In the above code variable1 and variable2 are the arguments and can be used anywhere within the body of the function. The important thing to notice here is that the arguments declared in the function does not use var keyword. In javascript the arguments are automatically declared when the function is defined. The arguments of the function can be used within the function like any other variables. For example:
function display_message(msg)
{
document.write(“The value of the argument is: ” + msg);
var messg = msg;
document.write(“The value of the argument is: ” + messg);
}
A return statement is used to return value and control to the calling statement. For example:
return variablename or expression;
Let us write a function to add two numbers and return the result. For example:
function addNumbers()
{
var x = 10, b = 20;
var c;
c = a + b;
return c;
}
function addNumbers()
{
var x = 10, b = 20;
return a + b;
}
function addNumbers(a,b)
{
return a + b;
}
The return statement can return a string, numeric, Boolean, null or return nothing.
A call to a function is done through a function name and set of parentheses with or without arguments. The call to a function is also a statement, therefore call must also end with semicolon. For example:
var x = 10;
function display_message()
{
document.write(“This is the body of the function”);
}
display_message();
In JavaScript the function can be declared anywhere in the script and can be called from anywhere in the script. The function can also be called even before it is declared in javascript. Though it is good practice to declare function first and then call them. The javascript interpreter in the web browser parses the entire javascript code for function declarations and any function declarations are moved to the top of the code this is known as function declaration hoisting. For example, below code is perfectly valid:
display_message();
var x = 10;
function display_message()
{
document.write(“This is the body of the function”);
}
In JavaScript functions can be called from another function. When a function call is placed within a function, the function which is called must be declared before it is called.
Global Variable
The variables that are defined outside the function are known as global variables and they can be changed inside or outside the function. For example:
var x = 10;
function display_add()
{
x = 30;
document.write(“Value of x:” + x );
}
document.write(“Value of x:” + x );
The output of above code will display the value of x as 30 and y as 40. This is because variables x and y are declared as global variables and its value can be changed anywhere in the script. It is also observed that the var keyword is not used in the function before x and y variables, hence no new variables are created within the function.
Local Variables
The local variables are declared and can be used only within the function in which they are declared. These variables do not have scope outside the function. The local variables are declared within the function using the var keyword. For example:
var x = 10;
function display_add()
{
var x = 30;
document.write(“Value of x:” + x );
}
document.write(“Value of x:” + x );
In the above code the document.write() statement at line will display 30 and the next document.write() statement at line will display 10, because the variable x declared at line is global variable and the variable x declared at line inside the function is a local variable.
Function Expression
Function expression is another way of declaring function. The function expression is declared using the var keyword and variable name. For example:
var variablename = function(arguments)
{
};
Not that the function declared earlier does not use a semicolon at the end of closing curly brackets. But the function expression needs to have a semicolon at the end of closing curly brackets, this is required to complete the assignment statement. In function expression, the function itself is assigned to a variable and not the return result of the function. Even the function is not called or executed here, it is just assigned.
The differences between function declaration and function expression are:
. Function expression assigns function to a variable whereas in function declaration the function is just declared.
. Function expression uses semicolon at the end of closing curly bracket, whereas function declaration does not use semicolon at the end of closing curly brackets.
. In function expression no function name is assigned and it is considered as anonymous function whereas function declaration must have a function name.
. Since function expression does not have a function name, variable name is used to call the function
. Function declaration hoisting is not used in function expression; therefore, function expression must be defined before it is called.
The code below demonstrates the working of function expression:
var displaymsg = function(first_text,second_text)
{
document.write(first_text + second_text);
};
displaymsg(“This is “ + “sample content”);
Function Constructor
The functions can also be defined using function constructor. The function constructor creates a function object in the same way a new instance of an object is created. For example:
var functionname = new Function(arguments, code for function);
The functions created using the function constructor work the same way as any other functions. The main disadvantage is that it has poor performance. Therefore, it is recommended to use the above two methods for creating functions.