Advertisement

Advertisement


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:










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.