JavaScript Function
Functions are used to perform a specific type of operation.
Every function includes some code which is executed whenever the function gets called.
A function can be called many times and can be called from anywhere in the page..
Syntax
function functionName (arg1, arg2)
{
// code to be executed
}
while (condition);
Advantage of Function
- Functions reduces the replication of code within a program, as one function can be called many times.
- Functions makes the code much easier to maintain.
- Functions makes it easier to eliminate the errors.
Defining and Calling a Function
The declaration of a function start with the
function keyword, followed by the name of the function you want
to create, followed by parentheses i.e.
() and finally place your function's code between curly brackets
{}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Function </title>
</head>
<body>
<script>
function sayHello() {
document.write("Hello, JavaScript!");
}
sayHello();
</script>
</body>
</html>
Output
Once a function can be called by typing the name followed by a set of parentheses, like
sayHello() in the example above.
Note : A function name should not start with a number but with an
alphabet or underscore, optionally followed by a number, underscore, etc. Function names are
case sensitive, just like variable names.
Adding Parameters to Functions
Parameters are used to accept input values at run time.
The parameters are given values at the time of invoking at runtime and then the operations are performed on them.
Syntax
function functionName(parameter1, parameter2, parameter3)
{
// code to be executed
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Function Adding Parameters </title>
</head>
<body>
<script>
// Defining function
function displaySum(num1, num2) {
var total = num1 + num2;
document.write(total);
}
// Calling function
displaySum(10, 20); // Prints: 30
document.write("<br>");
displaySum(-10, 20); // Prints: 10
</script>
</body>
</html>
Output
JavaScript Function Adding Parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Function Adding Arguments </title>
</head>
<body>
<script>
function square(number){
alert(number*number);
}
</script>
<form>
Click to check Square of Number<br>
<input type="button" value="Click Here" onclick="square(4)"/>
</form>
</body>
</html>
Output
JavaScript Function Adding Arguments
Function with Return Value
A 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.
The value may be of any type, including arrays and objects.Look at the example below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Function Return </title>
</head>
<body>
<script>
// Defining function
function getSum(num1, num2) {
var total = num1 + num2;
return total;
}
// Displaying returned value
document.write(getSum(10, 20) + "<br>");
document.write(getSum(-5, 15));
</script>
</body>
</html>
Output
JavaScript Function Return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Function Return </title>
</head>
<body>
<script>
function add(x, y){
var z;
z = x + y;
return z;
}
</script>
<script>
var result;
result = add(10,20);
</script>
<form>
<p> Click here to check result: </p>
<input type="button" value="Click Here" onclick="alert(result)"/>
</form>
</body>
</html>
Output
JavaScript Function Return