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

JavaScript Function

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

Click here to check result:





Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements