Learn Modern Unobtrusive JavaScript - Passing Parameters and Returning Values

Learn Modern Unobtrusive JavaScript

Passing Parameters and Returning Values

While the processing that we want to have run each time we call a function is the same, the information we want to pass through that processing need not be. One thing we haven't looked at so far is how to pass different fields into a function so that it can work with different fields when we call the same function multiple times.

The first thing we need to do is to insert some placeholders into the function to represent the different fields we want the function to use. These placeholders are called the arguments of the function. Arguments are defined between the parenthesis in the function definition as a comma separated list. So if we want to be able to pass two values into a function we could name these placeholder fields as x and y by defining the function in one of the following ways.

function myfunc(x,y) {...}
obj.prototype.myfunc = function(x,y) {...}

Once the arguments are defined like that they can then be used in place of whatever values we will pass to the function in the code within the function. The fields passed to the function as parameters will then be substituted into the function everywhere the corresponding arguments appear.

So the next thing we need to be able to do is to pass some parameters into the function. We do this by specifying the fields we want to use as a comma separated parameter list between the parentheses in the statement that actually calls the function. For example to pass the fields a and b into the function we would use one of the following calls which will substitute a for x and b for y in the code within the function itself.

myfunc(a,b)
myobj.myfunc(a,b)

Now that we have a way to pass different values into a function, the next thing to look at is how to get values back from the function. While wa can pass any number of parameters into a function we can only return one value from the function from the function. This doesn't really cause any real limitation on what can be passed back as the one value returned can be an object holding as many values as we need.

Within the function itself we can return values from as many spots in the code as we need to. The processing of the code within the function will terminate at the first return statement reached and so generally you will only have more than one return statement if you have if or switch statements providing different processing paths within the function. A return statement consists of the keyword return followed by the value that is to be returned.

The way that the value returned is accessed from the calling code is straightforward. Basically the value returned is substituted for the function call itself within the statement. Let's set the value of myvar to the value returned from myfunc.

myvar = myfunc();

Notice the similarity between this statement and some of the ones we used earlier to assign a function to an event handler. The difference is the parentheses following the function name. Without the parentheses we are assigning a reference to the function itself. With the parentheses we are first running the function and then assigning the value returned from the function.

A reason why we need our second way of defining a function is that we can't assign the function itself using the fiirst method if we want to define arguments that the function is to process. We can't do:

function myfunc(a) {...}
myobj.mymeth = myfunc;
myobj.mymeth(z);

That code does not provide us with any way of specifying a parameter to substitute for the argument when the function is finally run. We would need to use the following code instead.

function myfunc(a) {...}
myobj.mymeth = function(b) {myfunc(b);};
myobj.mymeth(z);

That code demonstrates both of the ways we have looked at so far for defining functions as well as including calls to both of them.

The final thing I want to cover in this tutorial on parameters and return values is best illustated by the following example.:

window.onload = function(a) {....}(4);

Here we are again actually running the function and assigning the result rather than assigning the function itself and so since an event handler expects to have a function assigned to it our function here presumably returns a function as its return value. The reason that this function runs straight away is again the parentheses on the end which in this example passes one parameter with a value of 4 into the function where it is substituted whereever the "a" argument appears. You wouldn't normally use this type of statement since you are effectively both defining the function and running it straight away without having provided any way of referring back to the function so as to run it a second time. It does however serve to help illustrate the difference between the code to run a function and the code to reference a function without running it.