Data objects can be manipulated in a number of ways by the large number of operators provided by JavaScript. Operators are symbols, such as +, “, =, >, and <, that produce a result based on some rules. An operator manipulates data objects called operands; for example, 5 and 4 are operands in the expression 5 + 4 . Operators and operands are found in expressions. An expression combines a group of values to make a new value, n = 5 + 4 . And when you terminate an expression with a semicolon, you have a complete statement (e.g., n = 5 + 4; ).
In the numeric expression , 5 + 4 “ 2 , three numbers are combined. The operators are the + and “ signs. The operands for the + sign are 5 and 4 . After that part of the expression is evaluated to 9 , the expression becomes 9 “ 2 . After evaluating the complete expression, the result is 7 . Since the plus and minus operators each manipulate two operands, they are called a binary operators. If there is only one operand, the operator is called a unary operator. If there are three operands, it is called a ternary operator. We'll see examples of these operators later in the chapter. The operands can be either strings, numbers, Booleans, or a combination of these. We have already used some of the operators: the concatenation operator to join two strings together, the typeof operator to determine what data type is being used, and the assignment operator used to assign a value to a variable. Now let's look at a plethora of additional JavaScript operators and see how they manipulate their operands. 5.1.1 AssignmentAn assignment statement evaluates the expression on the righthand side of the equal sign and assigns the result to the variable on the lefthand side of the equal sign. The equal sign is the assignment operator. var total = 5 + 4; var friend = "Tony"; 5.1.2 Precedence and AssociativityWhen an expression contains a number of operators and operands, such as 5 * 4 + 3 / “2.2 , and the order of evaluation is ambiguous, then JavaScript must determine what to do. This is where the precedence and associative rules come in. They tell JavaScript how to evaluate such an expression. Precedence refers to the way in which the operator binds to its operand, such as, should addition be done before division or should assignment come before multplication? The precedence of one operator over another determines what operation is done first. As shown in Table 5.1, the operators are organized as a hierarchy, the operators of highest precedence at the top, similar to a social system where those with the most power (or money) are at the top. In the rules of precedence, the multiplication operator is of higher precedence than the addition operator, technically meaning the operator of higher precedence binds more tightly to its operands. The assignment operators are low in precedence and thus bind loosely to their operand. In the expression sum = 5 + 4 the equal sign is of low precedence, so the expression 5 + 4 is evaluated first and then the result is assigned to sum . Parentheses are of the highest precedence. An expression placed within parentheses is evaluated first; thus, in the expression 2 * (10 “ 4) , the expression within the parentheses is evaluated first and that result is multiplied by 2 . When parentheses are nested, the expression contained within the innermost set of parentheses is evaluated first. Associativity refers to the order in which an operator evaluates its operands: left to right in no specified order, or right to left. When all of the operators in an expression are of equal precedence, normally the association is left to right; in the expression 5 + 4 + 3 , the evaluation is from left to right. In Example 5.1, how is the expression evaluated? Is addition, multiplication, or division done first? And in what order, right to left or left to right? In Table 5.1 the operators on the same line are of equal precedence. The rows are in order of highest to lowest precedence. Table 5.1. Precedence and associativity.
Example 5.1<html><head><title>First JavaScript Sample</title> 1 <script language = "JavaScript"> 2 var result = 5 + 4 * 12 / 4; 3 document.write("<font size='+1'>result = " + result ,"<br>"); 4 </script> </head> <body bgcolor="yellow" text="blue"></body> </html> EXPLANATION
Figure 5.1. Output from Example 5.1.
Example 5.2<html> <head> <title>Precedence and Associativity</title> </head> <body> <script language = "JavaScript"> 1 var x = 5 + 4 * 12 / 4; 2 document.writeln( "<h3>The result is " + x + "<br>"); 3 var x = ( 5 + 4 ) * ( 12 / 4 ); 4 document.writeln("The result is " + x ); </script> </body> </html> EXPLANATION
