Quick Reach
The functions of JavaScript
The function is a way to create a block of code that can be reused in JavaScript programs again and again by simply calling the function. Function in JavaScript may take one or more parameters and may also return value.
- A JS function code will execute only when it is called.
- JavaScript functions are basically objects.
This tutorial explains, how to write functions with parameters. The examples will also show how to call functions. Let us first look at how to define a function.
Syntax to define a JavaScript function
This is how a function is defined in JavaScript:
function function_name() {
//Code of function
}
- Where function keyword is followed by the name of the function.
- The parenthesis contains parameters of the function.
- The code of the function is written inside the curly braces.
See a basic example of writing a function.
A function example
Following is a simple JavaScript function example. We simply wrote a function that will display an alert as you click the button. Click the link or image below to see it online:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Execute JS function</button>
<script type=“text/javascript”>
function showalert(){
alert (“This is a basic function example!”);
}
</script>
</body>
</html>
|
Calling a function
After the function is defined, this must be called in order to invoke/execute its code. You can call a function in events, as shown in above example.
When you clicked on the button, the function was called at the “onclick” event of the button. Similarly, you can call a function at some other part (outside the function) of JavaScript code. The JavaScript function’s call can be done automatically (self-invoke).
A function with parameter
As described in function’s definition, a function may accept one or more parameters. The function’s parameters are given within parenthesis. See the following example of using parameters in the function.
An example with parameters in function
The example will take two parameters (a and b). We will calculate the sum of two and display in an alert. See example by clicking the link:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“sum_func(10,20)”>Execute JS function</button>
<script type=“text/javascript”>
function sum_func(a,b){
var sum;
sum = a + b;
alert (“The sum is: “ + sum);
}
</script>
</body>
</html>
|
As you can see, a function with two parameters is defined. As you click on the button, two values are sent at function call. The sum_func will calculate the sum and the result is shown in an alert.
Javascript return statement in function
As mentioned in the definition, the JavaScript function can also return values. The value is returned by using the return statement inside a function.
As return statement is met in the function, the execution of code inside the function stops. Generally, this should be the last statement in a function. See the following example of using the return statement.
Function with return example
Following is a function with return statement example. A function with name sum_func is created. As you click on the button “Execute JS function” the “showalert” function is called.
The “showalert” will call “sum_func” function with two parameters. Function arguments will be used to get the sum of two and “sum_func” function will return variables’ sum value back to the “showalert” function that will display the sum of two values.
See the example of return statement by clicking the link or image below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Execute JS function</button>
<script type=“text/javascript”>
function sum_func(a,b){
var sum;
sum = a + b;
return sum;
}
function showalert(){
var return_sum = sum_func(10,20);
alert(“The returned sum is: “ + return_sum);
}
</script>
</body>
</html>
|
Read More: JS array | How to create JavaScript alerts
Leave A Comment?