Programmers write methods, also known as functions, to automate tasks that may need to be performed many times. To take advantage of this pre-written code, there are several things that we need to know:
The name of the method
What information, if any, does the method need sent into it(parameters)?
What information, if any, does the method return?
These three items together make up what is known as a method's signature. Notice, that as users of the method, we need not understand how it accomplishes its task. This concept is called information hiding. Thus, if a programmer finds a more efficient way to perform a task, they can re-write the method and not effect any calls to the method as long as they do not alter the method's signature. When calling a method that takes parameters, the parameters must be in the same order as the methods signature.
When a method returns information, that data needs to either be output or stored in a variable.
Basic Methods
In a web page, JavaScript code written in <script> tags executes automatically when the page loads it. For example, a page that has some text, JavaScript alert code and two images (in that order), will load the text, pop up the alert, and will only show the images AFTER the alert has been dismissed. In order to keep the alert from happening until we want it to, we need to put the JavaScript code in a function (also known as a method). A function is defined as a type of procedure or routine. The idea is that we encapsulate several lines of code that may need to be called often into a function so that they can be called with a single line. In JavaScript, a function is written using the following code:
function functionName() {
//lines of code go here
}
Where "functionName" is any valid identifier name. Like with variables, the name should be indicative of what the function does. If the function is designed to calculate a persons pay, we may call it calculatePay. Regardless of the name, it should always be followed by a set of parenthesis () and curly braces {}. All of the code for the method goes in the curly braces.
function alertHello(){
window.alert("Hello");
}
Any JavaScript code can be placed in a function. We can write functions that would draw shapes on a canvas, ask users for information and perform calculations, etc. The main difference at this point, is that the code in a function WILL NOT EXECUTE until we call it, whereas all other JavaScript on the page will execute as it is loaded.
Parameters
Variables declared in a method are local to that method. In other words, they have no value oustide of the method. So, if we declare some variables in a method, and want to use their values in another method, we send them into the other method as parameters.
Say we have taken user input on the coordinates of two points in our main method as int x1, y1, x2, y2. The input assigns them a value. If we want to write a method that will find the midpoint of these two points, we need to send the values of the point in. So, in our main we see:
let x1, y1, x2, y1;
x1=//code for input
y1=//code for input
x2=//code for input
y2=//code for input
showMidpoint(x1, y1, x2, y2);
}//end main method
In the call to showMidpoint, x1, y1, x2, and y2 are what we call the actual parameters. In other words, these are the original values that I wanted to work with.
When we declare the showMidpoint method, we need to prepare it to receive information. We do this by declaring local method variables, called formal parameters, in the parenthesis of the method signature. The signature will look like this:
function showMidpoint(a1, b1, a2, b2){
// a1 will take on a copy of the value of x1.
// b1 will take on a copy of the value of y1, and so on.
}
Because they are taking on copies of the values, altering the formal parameters will have no effect on the actual parameters.
So, our finished method looks like this:
function showMidpoint(a1, b1, a2, b2)
{
let midX = (a1+a2)/2;
let midY = (b1+b2)/2;
document.getElementById('output').innerHTML="The midpoint of the points is: ("+midX+", "+midY+")";
}
Returns
As previously discussed, the scope of a variable is important to how a function processes information. Values from the main method get sent into a function through parameters, so it only makes sense that we should be able to send information back to the main from the function. Sending information from a method to the caller is accomplished through a return.
The important thing to note is that while a function can take multiple pieces of information in as parameters, it can only return ONE VALUE. That value can be a number, boolean, string, array, etc., but only one thing can be returned.
We will alter the getMidpoint formula to only take x's or y's. This way, the values are individually returned to the main either for use in calculations or output.
let x1, y1, x2, y1;
x1=//code for input
y1=//code for input
x2=//code for input
y2=//code for input
let midPointX=getMidpoint(x1, x2);
let midPointY=getMidpoint(y1, y2);
console.log("("+midPointX+", "+midPointY+")");
}//end main method
Notice that when we call a method that returns something, we need to store it in a variable for future use. Otherwise, it is like asking someone what time it is and not listening to their response.
We now alter our method to return the mid point instead of printing it...
function getMidpoint(a1, a2)
{
let mid = (a1+a2)/2;
return mid;
}