Understanding Variables in JavaScript

In This Chapter

• What Is a Variable?

• Naming Variables: Rules and Best Practices

• Understanding Literal Data Types

What Is a Variable?

Your JavaScript programs will often need to store temporary values for use later in the script, in some other script, or even within an HTML form. For example, you might ask the user to enter her name when she first loads the page, and you could then use that name to personalize the page. Before you can do that, however, you first need to store the user's name in a safe place for later use. Similarly, if your script performs calculations, you might need to set aside a calculated value to use later. For example, if you're constructing a shopping cart script, you might need to calculate taxes on the order. To do that, you must first calculate the total value of the order, store that value, and then later take a percentage of it to work out the tax.

In programming, the way you save a value for later use is by storing it in a variable. This is a small chunk of computer memory that's set aside for holding program data. The good news is that the specifics of how the data is stored and retrieved from memory happen well behind the scenes, so it isn't something you ever have to worry about. As a scripter, working with variables involves just three things:

1. Creating (or declaring) variables.

2. Assigning values to those variables.

3. Including the variables in other statements in your code.

The next three sections fill in the details.

Declaring a Variable

The process of creating a variable is called declaring in programming terms. All it really means is that you're supplying the variable with a name and telling the browser to set aside a bit of room in memory to hold whatever value you end up storing in the variable. To declare a variable in JavaScript, you use the var keyword, followed by the name of the variable. For example, to declare a variable named interest_rate, you'd use the following statement:

var interest_rate

If you have a number of variables to declare, consider grouping two or more on a single line, like this:

var current_date, current_time

You can declare as many variables as you like on a single line. Just be sure to separate each name with a comma (,).

Variables behave a bit differently depending on whether they're declared inside or outside of a function, see "Understanding Local Versus Global Variables."

Storing a Value in a Variable

After your variable is declared, your next task is to give it a value. Note, however, that this doesn't have to happen immediately after the var statement. You can hold off until later in the script, if that's convenient or makes the script easier to read. In any case, you use the assignment operator—the equals (=) sign—to store a value in a variable, as in this general statement:

variable_name = Value

Here's an example that assigns the value 0.07 to a variable named interest_rate:

interest_rate = 0.07

Note, too, that if you know the initial value of the variable in advance, you can combine the declaration and initial assignment into a single statement, like this:

var interest_rate = 0.07

You can also put multiple declarations and initializations on a single line, as shown in this example:

var interest_rate = 0.07, mortgage_term = 30

It's important to remember that you're free to change a variable's value any time you like. (That's why it's called a variable, because its value can vary.) For example, if the value you assign to the interest_rate variable is an annual rate, later on your code might need to work with a monthly rate, which is the annual rate divided by 12. Rather than calculate that by hand, just put it in your code using the division operator (/):

interest_rate = 0.07 / 12

As a final note about using variable assignment, let's look at a variation that often causes some confusion among new programmers. Specifically, you can set up a statement that assigns a new value to a variable by changing its existing value. Here's an example:

interest_rate = interest_rate / 12

If you've never seen this kind of statement before, it probably looks a bit illogical. How can something equal itself divided by 12? The secret to understanding this kind of statement is to remember that the browser always evaluates the right side of the statement—that is, the expression to the right of the equals sign (=)—first. In other words, it takes the current value of interest_rate, which is 0.07, and divides it by 12. The resulting value is what's stored in interest_rate when all is said and done.

For a more in-depth discussion of operators and expressions, see Chapter 5, "Building JavaScript Expressions."

Using Variables in Statements

With your variable declared and assigned a value, you can then use that variable in other statements. When the browser sees the variable, it goes to the computer's memory, retrieves the current value of the variable, and then substitutes that value into the statement. Listing 3.1 presents a simple example.

All the code listings in this chapter are available online from my Web site at the following address:

http://www.mcfedries.com/UsingJavaScript/

Listing 3.1 Declaring, Initializing, and Using a Variable

<script language="JavaScript" type="text/javascript">
<—
var interest_rate
interest_rate = 0.07
alert(interest_rate)
//—>
</script>

As shown in Figure 3.1, the alert() statement displays the current value of the variable.

Figure 3.1 When you use a variable in a statement, the browser substitutes the current value of that variable.

Listing 3.2 shows a slightly different example.

Listing 3.2 Initializing a Variable by Prompting the User

<script language="JavaScript" type="text/javascript">
<—
var first_name
first_name = prompt("Please tell me your first name:")
alert("Welcome to my Web site, " + first_name)
//—>
</script>

This script uses the prompt() method to ask the user to enter his first name, as shown in the top browser (Netscape) in Figure 3.2. When the user clicks OK, his name is stored in the first_name variable. The script then uses an alert() statement to display a personalized welcome message using the value of the first_name variable, as shown in the bottom browser (Internet Explorer) in Figure 3.2.

Figure 3.2 This script prompts the user for his first name and then uses the name to display a personalized welcome message.

The prompt() method in detail later in the book, see "Getting Input Using the prompt() Method,".