Understanding Operator Precedence
| Now that we've covered the JavaScript operators, another issue becomes important: How does JavaScript handle multiple operators in the same statement? Take a look at this code, for example: <HTML> <HEAD> <TITLE> Operator Precedence </TITLE> </HEAD> <BODY> <H1>Working With the Conditional Operator</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- var result = 5 + 3 * 2 document.write("5 + 3 * 2 = " + result) // --> </SCRIPT> </BODY> </HTML> The question here is, how does JavaScript evaluate the expression 5 + 3 * 2 ? Does it add 5 to 3 (giving 8) and then multiply by 2 (giving a total of 16)? Or does it multiply 3 by 2 (giving 6) and then add 5 to the result (giving a total of 11)? You can see the answer in Figure 2.12. JavaScript did the multiplication first, and then the addition, giving a result of 11. Figure 2.12. Checking operator precedence. The reason for this is that the multiplication operator, * , has higher precedence than the addition operator, + , which means that multiplication operations are performed before addition operations. You can find the precedence of JavaScript operators in Table 2.9, from top (highest precedence) to bottom ( lowest precedence). For example, you can see that * has higher precedence than + , so multiplication operations are performed before addition operations. If a number of operators appear on the same line, they all have the same precedence, and JavaScript evaluates expressions with such operators from left to right. It's a bit much asking JavaScript programmers to memorize the operator precedence rules you see in Table 2.8, so it's good to know there's a shortcut: You can use parentheses to change the precedence of expressions to what you want. Expressions in parentheses are always evaluated before the rest of the expression. If you really want to do the addition first in the example expression you just saw (5 + 3 * 2, for example), you could just write it this way: (5 + 3) * 2, which will evaluate to 16. That's all it takes. When in doubt, use parentheses to make it clear which part of an expression you want evaluated first. Table 2.9. Operator Precedence in JavaScript (top to bottom)
Tip You also can nest parentheses, like this: ((2 + 3) + (3 * (8 + (1)))) * 2 . This enables you to specify the order in which you want your expressions evaluated completely. Note that here, I'm even enclosing the number 1 in parentheses, which is legalin JavaScript, numbers such as 1 are themselves expressions. That completes our the look at operators for this chapter. Now it's time to take the next step up: branching statements .  |
