Functions in JavaScript
Functions are one of the fundamental building blocks in JavaScript.
- A function is a JavaScript procedure—a set of statements that performs a task or calculates a value.
- A JavaScript function is a block of code designed to perform a particular task.
- A JavaScript function is executed when “something” invokes it (calls it).
JavaScript Function Syntax –
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas:
(parameter1, parameter2, …)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) { code to be executed }
- Function parameters are listed inside the parentheses () in the function definition.
- Function arguments are the values received by the function when it is invoked.
- Inside the function, the arguments (the parameters) behave as local variables.
Function Invocation –
The code inside the function will execute when “something” invokes (calls) the function:
- When an event occurs (when a user clicks a button)
- When it is invoked (called) from JavaScript code
- Automatically (self invoked)
Function Return –
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. Functions often compute a return value. The return value is “returned” back to the “caller”:
var x = myFunction(4, 3); // Function is called, return value will end up in x function myFunction(a, b) { return a * b; // Function returns the product of a and b }
Output –
12
Program Example 2 –
<html> <head> <title>Functions in JS</title> <script type="text/javascript"> /*Q1) write a function to add 2 numbers and print the result */ function addNumber(a , b) { var total = a+b; return total; } var output = addNumber(4,2); // function call document.write("<h1>The total is : "+output+"</h1>"); </script> </head> <body> </body> </html>
Output –
The total is : 6
Why Functions?
- You can reuse code: Define the code once, and use it many times.
- You can use the same code many times with different arguments, to produce different results.