Introduction
Till now, statements are executed one by one and the output is obtained. Now, all these statements can be grouped together using JavaScript Functions and used whenever required.
Description
A JavaScript Function is a block of re-usable code that can be used to perform a particular task. The code written in the function can be executed as many times as required. Function can be invoked by an event or a function call.
JavaScript Functions are defined with the function keyword, followed by a name, and parentheses (). The parentheses may include multiple parameters separated by commas: (parameter1, parameter2, ...)
JavaScript Functions Advantages:
- Functions reduce the memory and complexity of the program.
- Functions mainly used for re-usability purpose.
- Functions reduce the bugs and saves the programmer's time.
- Information hiding is possible with functions.
- Once the function execution is completed, it returns to the position from where it was called.
<head> section to assure that it is loaded by the browser before it is called. A function can be placed in this section also.
Syntax
function function_name(argument1,argument2,…..argumentX)
{
//function statements;
}
In the above syntax, function should be followed by parenthesis and function arguments are optional. Description
Arguments are optional while using functions. In the below example, the function displaymessage() is created with an alert message and is called outside of the function parenthesis and the output is displayed even though it does not have any parameters.
HTML code in "functions1.html"
[html]
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8"/>
<title>JavaScript Function</title>
<script src="jscode.js" ></script>
</head>
<body>
</body>
</html>
[/html]
Javascript code in 
If a function missed to give arguments(parameters) while calling the function, then the values are set to undefined.
[html]
<!Doctype html>
<html>
<head>
<script type="text/javascript">
//function with two arguments
function addNumbers(firstNumber,secondNumber)
{
var sum = firstNumber + secondNumber;
document.write("The Sum is ",sum);
}
//Only one argument 10 is passed
addNumbers(10);
</script>
</head>
<body>
</body>
</html>
[/html]
Output
[c]
The Sum is NaN
[/c]
"NaN" is nothing but Not a Number. Value 10 will be assigned to the first argument firstNumber and the second argument secondNumber will be undefined. Hence, the output will be NaN.
jscode.js
[c]
function displaymessage()
{
//all statements go inside curly braces
alert("Hello!! Welcome to SPLessons ");
}
//Calling the function explicitly
displaymessage();
[/c]
Output
Description
Multiple arguments will be allowed in functions with any datatype and can be called whenever required.
[html]
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function addition(str,num)
{
var add = str + num;
alert(add);
}
//Passing a string and a number as arguments to function addition()
addition ("You are very special ",1);
</script>
</head>
<body>
</body>
</html>
[/html]
Output
When too many parameters are passed does not match with the number of parameters specified in the function paranthesis, the extra parameters will be omitted. Consider the same example above and pass the arguments to the function like below.
addition("You are very special",1,2,3);
The output will be the same as the output for above example, because 2 and 3 will be ignored as they are extra parameters.
Description
Once the JavaScript Functions are invoked in a statement, the function stops executing and "return" to the statement that has invoked the function.
Example
[html]
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function multiplyNumbers(a,b)
{
//returns performing multiplication of a and b
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
//Passing arguments 4 and 3 for a and be respectively
document.write("The multiplication value is ",multiplyNumbers(4,3));
</script>
</body>
</html>
[/html]
Output
[c]
The multiplication value is 12
[/c]
If an explicit return is omitted, undefined is returned automatically.
Key Points
- JavaScript Functions can be used for code re-usability.
- Arguments can be passed to a JavaScript Functions.
- If arguments are missed, then the undefined value is assigned.
- return keyword is used to return the values back to the invoked statement.