Getting Good with JavaScript - Andrew Burgess [11]
Functions
What is a function? A function is really just an encapsulated bunch of code. We've been looking at a bunch of JavaScript syntax: all of that can go inside functions, and often that's what you'll do. When you put code inside a function, it isn't run right away, like "loose" code. You decide when the code runs by calling the function, and you can do that as often as you want to. This is part of the benefit of functions.
But don't forget the encapsulation part: that means that at the time you invoke, or call, a function, you don't have any control (for the most part) of what goes on inside it. You'll hand the function some values to work with, and it will hand a value back; but what goes on inside it is black-boxed. This turns out to be an important thing that we can take advantage of, as we'll see later.
There's two other important things you should know about functions. First off, functions are first-class objects in JavaScript, which means that they are objects, and that they are no different from any other value. Let's take these two points a bit further.
Functions are Objects: We saw how to create a object literal earlier. Now, we can't create a function using that object literal notation, but a function can have properties and methods, because it is an object. You can add your own properties and methods to functions, but we'll look at some of the built in ones soon.
Functions are like other Values: In many programming languages, a function is something very different from primitive values like strings and numbers. However, in JavaScript, that's not the case. You can use functions in most places that you'd use another value, like passing it to another function (which we'll see shortly). Also, you can redefine a function, just like you'd redefine any other variable. This, as you'll see, is very handy.
Now that we understand a bit of function theory, let's look as some syntax.
Function Syntax
As we know, a function is just any number of lines of regular JavaScript. But we need to wrap that in function material. Let's say we have some code that determines an appropriate greeting for our website:
Example 3.1
var hour = 10,
message;
if (hour < 12) {
message = "Good Morning!";
} else if (hour < 17) {
message = "Good Afternoon!";
} else {
message = "Good Evening!";
}
console.log(message); // Good Morning!
We've created an hour variable, with the hypothetical current hour. Then, we use an if statement to figure out in what range our hour is, and assign message accordingly.
So, what do we do to convert this code to a function? Well, first, let's meet the function shell:
function getGreeting () {
// code goes here
}
Start with the keyword function; then, write the name of the function; it can be whatever you want, as long as it follows the rules for variable names (i.e. alphanumeric characters, underscore, and dollar sign, but not starting with a number). Next, parentheses. Then, the lines of code go between curly braces.
Now, you might be tempted to throw all the code we wrote above into a function shell. This isn't wise for two reasons. Firstly, there would be no way to get to the variable message (more on function scope soon). Secondly, with a bit of customization, we can increase the usefulness of the function by tweaking it a bit.
Let's make our function accept a parameter. A parameter is a value that you hand to the function when you ask the function to run. The function can then use the parameters however it needs to. How does this work syntactically?
function getGreeting (hour) {
//code here
}
Here, our getGreeting function accepts one parameter, which we're calling hour. Parameters are like variable that you can only access from within the function. To invoke this function and give it an hour, we would do this:
getGreeting( 10 );
We could store the hour in a variable, but we don't need to, since we won't need it after this.
So, we're passing the current hour to getGreeting. Now we're ready to write the code inside