1. JavaScript Function – Introduction
Like many programming languages, JavaScript provides functions for code re-usability. Even though JavaScript is not strongly typed, the function receives and sends parameters in type less fashion. In this JavaScript example, we will learn how to create function and call them passing arguments and use the return values.
2. Simple JavaScript Function
Have a look at the simple function below which prints a sample line of text in the document.
1) The
function keyword, which marks the next coming piece of code as a JavaScript function definition.
2) It denotes the function name and argument list. The empty parenthesis denotes that the function does not take any parameters. In our case, the function name is SimplePrint.
3) This denotes the body of the function. A function body can have one or N number of JavaScript statements. A pair of Curley Braces marks the start and end of the function body. Inside the function body, duty of the function takes place, and, in our case, it is simply printing the line of text to the browser window. Note, we placed the function definition inside the <head> tag of the html so that the function will be available all over the html document. Means, one can use this function anywhere in the html’s body.
4) In the <body> tag, we call the function. This will print a line of text in the html browser window.
5) Shows the output of the function call in the browser window.
3. JavaScript Functions with Parameters
A Function can also accept parameters and based on the passed-in values the duty of the function will be decided. The below JavaScript function adds two numbers and prints the result. The numbers will come in as a parameter.
Below is the code:
1) The function here accepts two parameters. Note, there is no type specified here and hence the parameter can be a string or a number.
2) The body of the function adds the two numbers N1 and N2 and prints the result in the browser’s window via
document.writeln function.
3) This is the calling code. Here, we call the function AddNumbers.
4) We pass two numbers 10, 4 as arguments. The arguments are comma separated list enclosed within the parenthesis.
5) Shows the result of calling function with parameters.
4. JavaScript Function with Return Value
A function can also return a value to the caller. To return a value to the calling code, one should use the returnstatement. Below is the example:
1) Shows a function which takes two numbers as parameters and adds them. The added result is in the variable N3.
2) Here the
return statement is returning the value in the variable N3. Means, it returns the addition of the two input parameters.
3) The calling code is making call to the function SumGet by passing the arguments 3, 3. The variable N1 holds the returned result.
4) We make a call to the AddNumbers, which was written in the previous section. First param is the variable N1.
5) We call SumGet as a second parameter and the SumGet return value is passed as a second parameter to the AddNumbers function.
Executing the code will print the result as 16.
5. Code Reference
|
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 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <title>Functions in JavaScript</title> <script> //Sample 01: Simple Function function SimplePrint() { document.writeln("Hello From a Function </br>"); } //Sample 03: Function with Parameter function AddNumbers(N1, N2) { N3 = N1 + N2; document.writeln("Added Result is : " + N3 + "</br>"); } //Sample 05: Function with Return Value function SumGet(N1, N2) { N3 = N1 + N2; return N3; } </script> </head> <body> <script> //Sample 02: Call the Function document.writeln("Calling Function SimplePrint() </br>"); SimplePrint(); //Sample 04: Add Two Numbers document.writeln("Calling Function AddNumbers(10,4) </br>"); AddNumbers(10, 4); //Sample 06: Add Two Numbers document.writeln("Calling Function with return Value </br>"); N1 = SumGet(3,3); document.writeln("Added Result " + AddNumbers(N1, SumGet(7,3))); </script> </body> </html> |
Categories: JavaScript
Tags: arguments, function, return
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.