A function is a segment of code grouped into a single entity. The great thing about functions is that you can re-use them. By doing so, you eliminate the need to re-type the same code over and over again. Once you implement a function, you can use its code by calling that function.
This tutorial focuses on:
- Creating functions
- Using parameters
- Calling functions
- Returning values
- Variable scope
To create a function, use the function keyword, followed by the function name, followed by parentheses, followed by an opening brace and a closing brace. The lines of code which make up the function will go in between the braces.
NOTE: Functions should be specified in a script in the head section of an HTML document because a script placed in the head section of a webpage will be executed when it is called, or when certain events are triggered such as the clicking of a button or when a form is submitted.
Parameters are variables placed inside the parentheses of a function which are used by the code inside the function in some way. Parameters are separated by commas.
This function takes a value supplied by its name parameter and prints a message on a webpage.
Once you create a function, how do you actually use it? You have to call the function.
To call a function, refer to the function name and pass the appropriate parameter values to it (if the function has any parameters).
Functions can be used to return values. By doing so, the function simply acts as a value after its code has been executed. This way, a variable can take the value of a function which returns a value.
To return a value from a function, the return keyword is used within the function.
In the above code, the function add(num1, num2) will return the value of the addition of its two parameters. Since this function returns a value, a variable can take its value.
- alert() - Will display a message in an alert box.
- document.write() - Will print some data on a webpage. You can include HTML tags within this function that will be included on a webpage as regular HTML.
- Math.max() - Will return the biggest of two numbers.
- Math.round() - Will round a number to the nearest integer.
The scope of a variable is the area of a script in which the variable can be used. There are local variables and global variables.
Local variables are variables declared inside a function (including parameters of functions as well). These variables have no scope outside of the function they are declared in.
Global variables are variables declared outside of a function. Global variables have scope through out the entire script on a page, as well as any other scripts on the same page, and external scripts.
In the above code, the variable a_variable is a local variable, for this reason it has no scope outside of the function in which it is declared. When you try to access it, you will get no output.
In the above code the variable a_variable is a global variable, for this reason it has global scope and when you try to access it you get its value.