A JavaScript function is a group of codes, designed to perform a particular task. It can be called anywhere in the program. This substitutes the writing same code again and again.
Syntax of Javascript Function: A JavaScript function is defined with function keyword, followed by a function name (it can be letters, digits, underscore and dollar sign), followed by parentheses (). A parentheses contain parameter names separated by comma. Like (parameter1, parameter2, parameter3, etc) and finally followed by code to be executed inside curly braces{}.
For example:
function name(parameter1, parameter2){
// code to be executed
}
Function parameters are listed inside the parentheses() in function program. Function arguments are the values recieved by the parameters, when function is invoked or called. Thus parameters behave like a variable inside that program, to hold the values given.
For example:
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Parameters A and B behave like variables, to hold the values</p>
<p id="demo"></p>
<script>
function myFunction(A, B) {
return A * B;
}
var result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
| Output |
Here variables A and B are parameters, behaving like variables and storing the value given here 4 and 3 respectively.
Use of a function in JavaScript: Uses of the functions are
i. We can write the codes, can be used many times.
ii. With functions we can reuse the codes.
iii.We can use the same code with different arguments, to produce different results.
Invocation of a function: The code inside the function will execute, when "something" invokes the function. It is done, When
i. An event occurs or a user clicks a button.
ii. It is invoked from JavaScript code.
iii. Automatically (self invoked).
i. When user clicks a button: In this method, a button is used to call a function. This button is given the name of the function 'myFunction', in its 'onclick' stage. Name of the button is 'Click Me!'.
<button type="button" onclick="myFunction()">Click Me!</button>
When a user clicks this, the function will performed.
For example:
<html>
<body>
<h2>JavaScript's function invocation, when clicked button by a user</h2>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="test"></p>
<script>
function myFunction() {
document.getElementById("test").innerHTML = "Hello World!" + "<br>" + "I am your new friend";
}
</script>
</body>
</html>
| Output |
ii. Invoked by Javascript code: In this method, a function name 'myFunction' having two parameters x and y. Whenever the value of x and y will be given inside program, will return the value 'x + y'.
For example:
<html>
<body>
<h1>JavaScript Functions</h1>
<p>JavaScript invocation by JS code</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
return x + y;
}
var result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
When JavaScript reaches a 'return' statement, the function will stop executing. If the function was invoked from a statement, JavaScript will return to execute the code after the invoking statement. Function often compute a return value.
| Output |
iii. Javascript code invoked automatically(self invoked): It can be written directly without any function name and parameters.
For example:
<html>
<body>
<p>Self-Invoking Functions</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hi! I am calling myself";
})();
</script>
</body>
</html>
| Output |
| Output |
If we are not assigning any value in 'var value = interest( )' the parameter will be incorrect and returns an incorrect answer.
| Output |
Try this
| Output |
| Output |