This chapter is from the book
This chapter is from the book
This chapter is from the book
Functions
Functions in any programming language are ways to write code that can be used later. At its most basic form, this is also true for JavaScript. You can write a chunk of custom code and not only execute it at will, but you can also execute it over and over, which can help streamline your application by increasing its maintainability (declaring a chunk of code one time and referencing it, rather than rewriting what it does). It’s like keeping all your CSS in the same file or why you keep all JavaScript in the same file—you know exactly where it is when you need to change or add something.
You’ve been using functions already in earlier chapters when you pass data into an alert(). “Alert” is technically called a method but for all intents and purposes, it’s the same as a function.
Basic Functions
The chance of creating a JavaScript application without having to write your own functions is pretty low. It’s something that you’ll be doing on every project, and it’s very easy to do using the function keyword (remember the reserved words list? This is what function is for).
Using the function keyword is like saying, “Hey, I’m building something over here that should be treated as a function.” Listing 6.2 shows a basic function declaration.
Listing 6.2. Writing a Basic Function
function sayHello() {
alert("hey there! ");
}
Calling a Function
Calling a function is very simple. You type out the name, and then parentheses and the function will be executed. The parentheses tell the browser that you want to execute the function and to use any data (arguments) contained within the parentheses within the function. Listing 6.2.1 shows how to call the function we declared in Listing 6.2. It should alert the text, “hey there!”
Listing 6.2.1. Calling a Basic Function
sayHello(); // hey there
Arguments
Arguments are a way to pass information or data into a function. As previously mentioned, up to this point you’ve been using the alert() method. We’ve also been passing it arguments. The alert method is designed in native JavaScript to take arguments and display them in the form of a pop-up box in the browser.
Functions can take any number of arguments. They can be any type of information; strings, variables, large data sets, and anything else you can think of can be passed into a function through an argument. As you’re defining your functions, you will be assigning names to the arguments, sort of like the way you assign names to a variable. After that argument is named in the function, it becomes a variable you’ll be using inside that function.
In Listing 6.2.2 you can see that the sayHello() function now has a single argument called “message.” Inside, the function “message” is used as a variable that gets passed into the JavaScript alert() method.
Listing 6.2.2. Passing a Function Variable Through Arguments
/* declare the function */
function sayHello(message){
alert(message); // "message" is also an argument in the "alert" method
}
/* call it a couple times with different messages */
sayHello("Hey there, you stink!");
sayHello("I feel bad I just said that.");
When this function is called, we’re setting the string argument to “Hey there, you stink!” and then quickly apologizing with another alert, because frankly it was kind of rude. This is a very real-life way arguments are used in functions. The string can either be declared upon calling the function (like we’re doing in Listing 6.2.2) or it can be declared immediately in the function declaration. (Instead of using the message variable, you could insert the string.) Calling it the way we did is much more common in the real world, though.
Anonymous Functions
Anonymous functions are functions that have no name (obviously—they’re anonymous). They execute immediately and can contain any number of other functions. The syntax for declaring an anonymous function is a little different. They are dynamic in nature because they are executed at runtime rather than waiting to be called.
Anonymous functions perform very well in the browser because there is no reference to them in another part of the document. This comes with pluses and minuses. So as you write your JavaScript, it is always good to note that if you have to rewrite an anonymous function over and over, it’s probably best to pull it out into a normal function to cut down on maintenance and repetitive code.
There is often a little confusion as to the purpose of anonymous functions. If you want something to execute at runtime, why wouldn’t you just dump the code right into your JavaScript file? Why even bother wrapping it in an anonymous function? Well, this is a good place to bring up a term you may hear a lot: scope.