Getting Good with JavaScript - Andrew Burgess [12]
Example 3.2
function getGreeting(hour) {
var msg;
if (hour < 12) {
msg = "Good Morning!";
} else if (hour < 17) {
msg = "Good Afternoon!";
} else {
msg = "Good Evening!";
}
return msg;
}
var message = getGreeting( 16 ); // 4 PM
alert(message); // Good Afternoon!
If you've been following along carefully, there should be only one thing above that you're not sure about: return msg. What's up with that? To return a value is to pass it back to the code that called the function. That way, we can assign the calling of a function to a variable (as we do above), and it will be whatever value was returned from getGreeting.
Here are two more things I'd like to do to this function, to make it better. First, there's really no need for the msg variable, because we only ever do one thing to it. Try this:
Example 3.3
function getGreeting(hour) {
if (hour < 12) {
return "Good Morning!";
} else if (hour < 17) {
return "Good Afternoon!";
} else {
return "Good Evening!";
}
}
alert( getGreeting( 3 ) ); // Good Morning!
This makes it clear that we can have more than one return. Once we figure out which value we must return, we'll do so right away. I should note that a return statement will be the last line to be executed in a function; once the function returns, it's done; nothing else is executed. Therefore, unless your return statement is inside a conditional statement, you usually won't have any code after the return line in your function.
One more thing: When writing functions, you want them to be user-friendly. Let's do this: if the user doesn't pass in a parameter, we'll provide a reasonable default.
Example 3.4
function getGreeting(hour) {
hour = hour || new Date().getHours();
if (hour < 12) {
return "Good Morning!";
} else if (hour < 17) {
return "Good Afternoon!";
} else {
return "Good Evening!";
}
}
alert( getGreeting( new Date().getHours() ) );
What's going on here? We're using a logical OR operator; remember what this does: if the first side is true, it will use that; otherwise, it will use the second side. In this case, we're saying that we want to set the hour parameter to either the value of the hour parameter (if the user passed one in), or the current hour. We're using the getHours function of a current Date object; we'll see more about this in a page or so. If the user didn't pass a parameter, hour will be undefined, which is false. Therefore, the function will assign the current hour to hour. And yes, you can assign new values to parameters like this.
ROCKSTAR TIP
This is the best way to provide default values for parameters. It's a pretty advanced JavaScript tip, but I think you can handle it. Don't feel bad if it's a bit complex, though. Come back to it later and you should have no troubles.
Well, that's out first function. Let's wrap up with discussion on functions with a few important points.
Arguments
We've been calling the values that you pass to a function parameters. There's another common term, and that's arguments. In fact, JavaScript itself calls the them arguments. Many other programming languages have error-detection features related to the arguments of a function: they make sure that when calling a function you pass in the right number and type of arguments. JavaScript doesn't offer any of this. These are all perfectly valid ways of calling our getGreeting function above:
var msg1 = getGreeting(10),
msg2 = getGreeting(1,2,3,4,5,6, "and on"),
msg3 = getGreeting(),
msg4 = getGreeting("five o'clock");
And there are many more, of course. Out of all these situations, we've only written our function to work with options 1 and 3. However, it will work with option 2: hour will be set to 1, but all the following arguments will be lost. Option 4 is a good example of why some error checking is necessary: to guard against string parameters in our function, we should use the typeof operator to make sure it's a number (after we assert that they did indeed give us a parameter). If it's not a number, we should provide the default: