- What Is a Function?
- Creating a Function That Takes Arguments
- Creating a Function That Returns Data
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Function That Takes Arguments
Like I mentioned earlier, the previous sayHello example was quite simple:
function sayHello() {
alert("hello!");
}
You call a function, and the function does something. That simplification by itself is not out of the ordinary. All functions work just like that. There are differences, however, in the details on how functions get invoked, where they get their data from, and so on. The first such detail we are going to look at involves functions that take arguments.
Let’s start with a simple example:
alert("my argument");
What we have here is your alert function. You’ve probably seen it a few (or a few dozen) times already. As you know, this function simply displays some text that you tell it to show (see Figure 3.3).
)
Figure 3.3 The text “my argument” is displayed as a result of the alert function.
Let’s look at this a little closer. Between your opening and closing parentheses when calling the alert function, you specify the stuff that needs to be displayed. This “stuff” is more formally known as an argument. The alert function is just one of many functions that take arguments, and many functions you create will take arguments as well.
To stay local, within this chapter itself, another function that we briefly looked at that takes arguments is our showDistance function:
function showDistance(speed, time) {
alert(speed * time);
}
So, you can tell when a function takes arguments by looking at the function declaration itself:
function showDistance(speed, time) {
...
}
Functions that don’t take arguments are easy to identify. They typically show up with empty parentheses following their name. Functions that take arguments aren’t like that. Following their name and between the parentheses, these functions will contain some information about the quantity of arguments they need, along with some hints about what values your arguments will take.
For showDistance, you can infer that this function takes two arguments: the first corresponds to the speed and the second corresponds to the time.
You specify your arguments to the function as part of the function call:
function showDistance(speed, time) {
alert(speed * time);
}
showDistance(10, 5);
In our case, we call showDistance and specify the values we want to pass to the function inside the parentheses.
showDistance(10, 5);
Functions that take arguments, however, contain some information about the quantity of arguments they need in the parentheses following their name, along with some hints about what values your arguments will take. To emphasize this, let’s look at Figure 3.4.
)
Figure 3.4 Order matters.
When the showDistance function gets called, the 10 corresponds to the speed argument, and the 5 corresponds to the distance argument. That mapping is entirely based on order.
Once the values you pass in as arguments reach your function, the names you specified for the arguments are treated just like variable names (see Figure 3.5).
)
Figure 3.5 The names of the arguments are treated as variable names.
You can use these variable names to easily reference the values stored by the arguments inside your function.
NOTE
If a function happens to take arguments and you don’t provide any arguments as part of your function call, provide too few arguments, or provide too many arguments, things can still work. You can code your function defensively against these cases.
In general, to make the code you are writing clear, just provide the required number of arguments for the function you are calling. Don’t complicate things unnecessarily.