Is the answer to the following expression 56 or 110?
10 × 5 + 6 It depends:
• If addition is performed before multiplication, then the answer is 110.
• If multiplication is performed before addition, then the answer is 56.
You can imagine the confusion that might arise when you write a JavaScript statement that contains several expressions. You assume that these expressions are evaluated in a cer-tain order, but the browser might evaluate expressions in a different order.
You can avoid confusion by learning the order of operation, a set of rules that specifi es the order in which an expression is evaluated by the browser. These are the same rules that you use in real calculations and that you learned back in your high school math class. Here is the order of operation:
1. Calculations must be performed from left to right.
2. Calculations in parentheses are performed fi rst. When more than one set of parentheses are included, the expression in the inner parentheses is performed fi rst.
3. Multiplication and division operations are performed next. If both operations are in an expression, then calculations are performed left to right.
4. Addition and subtraction are next. If both operations are in an expression, calculations are performed left to right.
Don’t be too concerned if you forget the order of operation, because you can tell the browser to evaluate an expression in a particular order by using parentheses. Portions of an expression that are enclosed within parentheses are evaluated before those portions that are outside of the parentheses.
Let’s say that you write the following expression, and you want addition to be performed before multiplication, but you are unsure about order of operation. By placing parentheses around the addition expression, you force the browser to add those values before performing the multiplication. The value of this expression is 110:
10 * (5 + 6)
ch02.indd 26
ch02.indd 26 5/12/2005 10:46:24 AM5/12/2005 10:46:24 AM
23 % 10 is equal to 3 7 % 10 is equal to 7
Below the modulus operator in Table 2-3 is the increment by 1 operator (++), also called the incremental operator. This operator increases the operand by 1.
Let’s see how this works in the next example:
var a = 5 ++a
The fi rst line of this example should be familiar to you, because it is declaring a vari-able and initializing the varivari-able with the value 5. You’ve seen something similar to this earlier in the chapter. The second line uses the incremental operator to increase the value assigned to the variable by 1. The value of the variable is 6 (see Figure 2-4).
You probably noticed that the incremental operator uses one operand—that is, one value. Other operators that you learned so far in this chapter use two values. An operator that uses one value is called a unary operator.
The following JavaScript shows how to use the incremental operator:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Incremental operator</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
var a = 5 ++a
alert('The value of a is ' + a) -->
</script>
</body>
</html>
Figure 2-4 The incremental operator increases the value by 1.
ch02.indd 27
ch02.indd 27 5/12/2005 10:46:25 AM5/12/2005 10:46:25 AM
The last arithmetic operator that you’ll need to learn is the decremental operator (--). The decremental operator subtracts 1 from the operand. Take a look at this example:
var a = 5 --a
The fi rst line is the same as the previous example. The second line uses the decre-mental operator to subtract 1 from the value of the variable. After this operation is completed, the value of the variable is 4.
The incremental and decremental operators can be tricky to use because of where you position them alongside the variable. If the operator is placed on the left side of the variable, the value of the variable is incremented by 1 and then assigned to the variable. If the operator is placed on the right side of the variable, the value is as-signed fi rst before the value is incremented.
These are subtle differences that can have a dramatic effect on the result of this operation. In the next example, the value of variable a is incremented by 1. The result is then assigned to variable b. The value of b is 6.
var a = 5 var b b = ++a
Take a look at the next example. Notice that the incremental operator is on the left side of variable a. This tells the browser to assign variable b the value of a and then increment variable a by 1. The result is that the value of b is 5 and the value of a is 6 when both operations are completed.
var a = 5 var b b = a++
Following is a JavaScript that illustrates the effect of placing the incremental operator on either side of the operand in an expression. The fi rst time the incremen-tal operator is used, it is placed on the left side of the variable (Figure 2-5); the second time, it is placed on the right side of the variable (Figure 2-6).
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Incremental operator</title>
</head>
ch02.indd 28
ch02.indd 28 5/12/2005 10:46:25 AM5/12/2005 10:46:25 AM
<body>
<script language="Javascript" type="text/javascript">
var a = 5 var b b = ++a
alert('The value of b = ++a is ' + a) a = 5
b = a++
alert('The value of b = a++ is ' + a) -->
</script>
</body>
</html>
Before leaving arithmetical operators, let’s take a look at the addition operator (+). You already know that the addition operator adds the number to the right of the operator to the number to the left of the operator. However, the addition operator is also a shortcut for concatenate words (although other operators are also used for concatenation, which you’ll learn later in this book). Concatenation means that one word is joined with another word.
Figure 2-5 The incremental operator is placed on the left side of variable a.
Figure 2-6 The incremental operator is placed on the right side of variable a.
ch02.indd 29
ch02.indd 29 5/12/2005 10:46:25 AM5/12/2005 10:46:25 AM
Let’s see how this is done in the following example.
var customer = 'Bob ' + 'Smith'
This JavaScript statement declares a variable and initializes the variable. In this case, two words are fi rst joined together (concatenated) by the addition operator and the combined words become the initial value for the customer variable. After this operation is completed, the value of customer is Bob Smith. Look carefully at the fi rst word. Notice that a space appears between the last b and the closing quota-tion mark. The space is a character that is needed to separate the fi rst name from the last name when the words are joined together. This is illustrated in the following JavaScript (Figure 2-7).
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Joining Strings</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
var customer = 'Bob ' + 'Smith' alert('The customer is ' + customer) -->
</script>
</body>
</html>