Expressions and Operators

Chapter 5. Expressions and n JavaScript. If you are familiar with C, C++, or Java, you'll notice that the expressions and operators in able to skim this chapter quickly. If you are not s, like these: // An object literal [2,3,5,7,11,13,17,19] // An array literal function(x){return x*x;} // A function literal i sum The value of a literal expression is simply the liter tself. The value of a variable ariable contains or refers to. terestin ting) p s can be created by combining simp . F e saw that 7 is an expression and i is an expression. T of this expression is determined by adding the values of the two sim expressions. The + in this example is an operator that is used to com to complex expression. Another ope , which i ion. For example: ) - sum Operators This chapter explains how expressions and operators work i JavaScript are very similar, and you'll be a C, C++, or Java programmer, this chapter tells you everything you need to know about expressions and operators in JavaScript. 5.1 Expressions An expression is a phrase of JavaScript that a JavaScript interpreter can evaluate to produce a value. The simplest expressions are literals or variable name 1.7 // A numeric literal "JavaScript is fun!" // A string literal true // A boolean literal null // The literal null value /java/ // A regular expression literal { x:2, y:2 } // The variable i // The variable sum al value i expression is the value that the v These expressions are not particularly in ex g. More complex (and interes le expressionsression or example, w 1. he following is also an expression: i + 1.7 The value pler bine two expressions in expressions by subtract a more rator is - s used to combine (i + 1.7 This expression uses the - operator to subtract the value of the sum variable from the value of our previous expression, i + 1.7. JavaScript supports a number of other operators besides + and -, as you'll see in the next section. 5.2 Operator Overview If you are a C, C++, or Java programmer, most of the JavaScrip rs should already be familiar to you. Table 5-1 t operato summarizes the operators; you can refer to this table for fe that most operators are represented by punctuation characters such as + and . Some, however, are represented by keywords such as delete . ey tors are regular operators, just hose express are simply expressed using a more readable and less succinct sy In this table, the column labeled "P" gives the operator precedence and the column the operator associativity, w e L (le ciativity, the subsections that le explain these concepts. The operators themselv Table 5-1. JavaScript operators re rence. Note = wo and instanceof ed with punctuation; theyK rd opera like t ntax. labe left). If you do not already understand preceden led "A" gives hich can b ce and asso ft-to-right) or R (right-to- follo following that discussion. w the tab es are documented P A Operator nd type(s) n performed Opera Operatio 15 L . identifier cess object, Property ac L [] array, integer index Array L ( ) function, arguments Function call R new constructor call Create new object 14 R ++ lvalue Pre- or post-increment (unary) R -- lvalue Pre- or post-decrement (unary) R - number ion)Unary minus (negat R + number p)Unary plus (no-o R ~ integer Bitwise complement (unary) R ! boolean Logical complement (unary) Table 5-1. JavaScript operators P A Operator Operand type(s) Operation performed R delete roperty lvalue Undefine a p (unary) R typeof ype (unary) any Return data t R void any Return undefined value (unary) 13 /, % n, division, L *, numbers Multiplicatio remainder 12 ionL +, - numbers Addition, subtract L + strings String concatenation 11 L << integers Left shift L >> integers Right shift with sign- extension L >>> integers Right shift with ze extension ro 10 L <, <= numbers or strings Less than, less than or equal L >, >= numbers or strings Greater than, greater than or equal L object, Check object type instanceof constructor L string, object Check whether property in exists 9 L == any Test for equality L != any Test for inequality L === any Test for identity L !== any Test for non-identity 8 L & integers Bitwise AND 7 L ^ integers Bitwise XOR 6 L | integers Bitwise OR 5 L && booleans Logical AND Table 5-1. JavaScript operators P A Operator Operand type(s) Operation performed 4 L || booleans Logical OR 3 R ?: boolean, any, any Conditional operator ( operands) 3 2 R = lvalue, any Assignment R *=, /=, %=, +=, -=, <<=, >>=, >>>=, &=, ^=, |= lvalue, any Assignment with operation 1 L , any Multiple evaluation ts a number of unary operators, which convert a plex expression. The - operator in the unary operator that performs the operation of negation on the operand ternary operator, the conditional operator ?:, which combines the value of three expressions into a single expression. xpressions, you must pay attention to the data types that are being passed to operators and to the data types that are returned. Different operators is not legal in JavaScript. Note, however, that JavaScript tries to convert expressions to the appropriate ble, so the expression "3" * "5" is legal. Its value is the number 15, ot the string "15". We'll consider JavaScript type conversions in detail in Section 11.1 5.2.1 Number of Operands Operators can be categorized based on the number of operands they expect. Most JavaScript operators, like the + operator we saw earlier, are binary operators that combine two expressions into a single, more complex expression. That is, they operate on two operands. JavaScript also suppor single expression into a single, more com expression -3 is a . Finally, JavaScript supports one 3 5.2.2 Type of Operands When constructing JavaScript e expect their operands' expressions to evaluate to values of a certain data type. For example, it is not possible to multiply strings, so the expression "a" * "b" type whenever possi n . Notice that the assignment operators, as well as a few other operators, expect their lefthand expressions to be lvalues. lvalue is a historical term that means "an expression that can legally appear on the lefthand side of an assignment expression." In JavaScript, Furthermore, some operators behave differently depending on the type of the operands. Most notably, the + operator adds numeric operands but concatenates string operands. Also, if passed one string and one number, it converts the number to a string and concatenates the two resulting strings. For example, "1" + 0 yields the string "10". variables, properties of objects, and elements of arrays are lvalues. The ECMAScript specification allows built-in functions to return lvalues but does not define any built-in an s whether the comparison is true or not. For example, the expression a < 3 returns true if the value of variable a is in fact less than 3. As we'll see, the boolean mparison operators are used in if statements, while loops, and for ops -- JavaScript statements that control the execution of a program based on the results of evaluating expressions that contain comparison operators. Table 5-1 functions that behave that way. Finally, note that operators do not always return the same type as their operands. The comparison operators (less than, equal to, greater than, etc.) take operands of various types, but when comparison expressions are evaluated, they always return a boole result that indicate values returned by co lo 5.2.3 Operator Precedence In , the column labeled "P" specifies the precedence of each operator. Operator erators with higher mbers. ing expression: The multiplication operator * has a higher precedence than the addition operator +, so the erformed before the addition. Furthermore, the assignment operator = the assignment is performed after all the operations on the nd subtraction, and assignment has very low precedence and is almost always performed 5.2.4 In Tabl precedence controls the order in which operations are performed. Op numbers in the "P" column are performed before those with lower nu Consider the follow w = x + y*z; multiplication is p has the lowest precedence, so righthand side are completed. Operator precedence can be overridden with the explicit use of parentheses. To force the addition in the previous example to be performed first, we would write: w = (x + y)*z; In practice, if you are at all unsure about the precedence of your operators, the simplest thing is to use parentheses to make the evaluation order explicit. The only rules that are important to know are these: multiplication and division are performed before addition a last. Operator Associativity e 5-1, the column labeled "A" specifies the associativity of the operator. A valu ecifies left-to-right associativity, and a value of R specifies right-to-left tivity. The associativity of an operator specifies the order in which operations of e of L sp associa the sam precedence are performed. Left-to-right associativity means that operations are eft to right. For example, the addition operator has left-to-right associativity, so: w = x is the s e as: On the other hand, the following (almost nonsensical) expressions: z; q = a?b:c?d:e?f:g; are equ x = ~( w = (x q = a? because the unary, assignment, and ternary conditional operators have right-to-left 5.3 A Having can sta Additio he + operator adds numeric operands or concatenates string operands. If one a string, the other is converted to a string and the two strings are then ed to numbers or strings that can be Subtraction - e performed from l + y + z; am w = ((x + y) + z); x = ~-~y; w = x = y = ivalent to: -(~y)); = (y = z)); b:(c?d:(e?f:g)); associativity. rithmetic Operators explained operator precedence, associativity, and other background material, we rt to discuss the operators themselves. This section details the arithmetic operators: n (+) T operand is concatenated. Object operands are convert added or concatenated. The conversion is performed by the valueOf( ) method and/or the toString( ) method of the object. ( ) When - is used as a binary operator, it subtracts its second operand from its firs operand. If used with non-numeric operands, it attempts to convert them to numbers. t Multiplication (*) Division (/) rator divides its first operand by its second. If used with non-numeric t ating- Modulo lo the second operand. That is, it nds, the modulo operator to convert them to numbers. The sign of the result is the same as the sign erand. For example, 5 % 2 evaluates to 1. While the modulo operator is typically used with integer operands, it also works , -4.3 % 2.1 evaluates to -0.1. Unary When is used as a unary operator, before a single operand, it performs unary o Unary The * operator multiplies its two operands. If used with non-numeric operands, it attempts to convert them to numbers. The / ope operands, it attempts to convert them to numbers. If you are used to programming languages that distinguish between integer and floating-point numbers, you migh expect to get an integer result when you divide one integer by another. In JavaScript, however, all numbers are floating-point, so all divisions have flo point results: 5/2 evaluates to 2.5, not 2. Division by zero yields positive or negative infinity, while 0/0 evaluates to NaN. (%) The % operator computes the first operand modu returns the remainder when the first operand is divided by the second operand an integral number of times. If used with non-numeric opera attempts of the first op for floating-point values. For example minus (-) - negation. In other words, it converts a positive value to an equivalently negative value, and vice versa. If the operand is not a number, this operator attempts t convert it to one. plus (+) For symmetry with the unary minus operator, JavaScript also has a unary plus operator. This operator allows you to explicitly specify the sign of numeric literals, if you feel that this will make your code clearer: var profit = +1000000; In code like this, the + operator does nothing; it simply evaluates to the value of for non-numeric arguments, the + operator has ent to a number. It returns NaN if the argument single operand, which must be a rty of an object. If the value of this ber, the operator first attempts to convert it to one. The precise behavior of this operator depends on its position For example, the following code sets both and to : i = 1; nter insert a line break between the post-increment or post- its argument. Note, however, that the effect of converting the argum cannot be converted. Increment (++) The ++ operator increments (i.e., adds 1 to) its variable, an element of an array, or a prope variable, element, or property is not a num relative to the operand. When used before the operand, where it is known as the pre-increment operator, it increments the operand and evaluates to the incremented value of that operand. When used after the operand, where it is known as the post-increment operator, it increments its operand but evaluates to the unincremented value of that operand. If the value to be incremented is not a number, it is converted to one by this process. i j 2 i = 1; j = ++i; But these lines set i to 2 and j to 1: j = i++; This operator, in both of its forms, is most commonly used to increment a cou that controls a loop. Note that, because of JavaScript's automatic semicolon insertion, you may not decrement operator and the operand that precedes it. If you do so, JavaScript will treat the operand as a complete statement by itself and will insert a semicolon before it. Decrement (--) The -- operator decrements (i.e., subtracts 1 from) its single numeric operand which must be a variable, an element of an array, or a property of an object. If the value of this variable, element, or property is not a number, the operator first attempts to convert it to on , e. Like the ++ operator, the precise behavior of -- depends on its position relative to the operand. When used before the operand, it the operand but returns the undecremented value. 5. E This se operato and tu . As we' decrements and returns the decremented value. When used after the operand, it decrements 4 quality Operators ction describes the JavaScript equality and inequality operators. These are rs that compare two values to determine whether they are the same or different re rn a boolean value (true or false) depending on the result of the comparison ll see in Chapter 6, they are most commonly used in things like if statements and ps, to control the flow of program execution. Equality (==) and Identity (===) and === operators check whether two values are the same, using two different ons of sameness. Both operators accept operands of any type, and both return for loo 5.4.1 The == definiti tru if known as the identity operator, and it check usin a ; it checks that allo The identity operator is s dized by ECMAScript v3 and implemented in JavaScript tors. Be sure you understand the differences between the assignment, ality, and identity operators, and be careful to use the right one when coding! Alt u confusi dentical to" for = In JavaScri is case, two separa values are n ey contain the m exactly the m On the othe h that two variab never equal or that contain ref same object, a e their operands are the same and false if they are different. The === operator is s whether its two operands are "identical" g strict definition of sameness. The == operator is known as the equality operator whether its two operands are "equal" using a more relaxed definition of sameness ws type conversions. tandar 1.3 and later. With the introduction of the identity operator, JavaScript supports =, ==, and === opera equ ho gh it is tempting to call all three operators "equals," it may help to reduce on if you read "gets or is assigned" for =, "is equal to" for ==, and "is i == . pt, numbers, strings, and boolean values are compared by value. In th te values are involved, and the == and === operators check that these two ide tical. This means that two variables are equal or identical only if th sa e value. For example, two strings are equal only if they each contain sa e characters. r and, objects, arrays, and functions are compared by reference. This means les are equal only if they refer to the same object. Two separate arrays are identical, even if they contain equal or identical elements. Two variables erences to objects, arrays, or functions are equal only if they refer to the rray, or function. If you want to test that two distinct objects contain the same propertie have to check the prop or equality or identity. (And, if any of the properties e ve to decide how deep you want the comparison to go.) The following rules are used to determine whether two values are identical according to x If the two values have different types, they are not identical. value x If both values are strings and contain exactly the same characters in the same t g haracter basis, and it assumes that all strings have been converted to a "normalized form" before they are " reference page in the core reference section of this book for another way to compare strings. l. If are used to determine whether two values are equal according to the == operator: x If the two values have the same type, test them for identity. If the values are her is a string, convert the string to a number and try the comparison again, using the converted value. object to a primitive and try the comparison again. An object is converted to a primitive value by either its toString( ) method or its valueOf( ) f core JavaScript attempt valueOf( ) ) conversion, except for the Date class, which performs toString( ) conversion. Objects that are not part of core s or that two distinct arrays contain the same elements, you'll erties or elements individually f or lements are themselves objects or arrays, you'll ha the === operator: x If both values are numbers and have the same value, they are identical, unless either or both values are NaN, in which case they are not identical. The NaN is never identical to any other value, including itself! To check whether a value is NaN, use the global isNaN( ) function. positions, they are identical. If the strings differ in length or content, they are no identical. Note that in some cases, the Unicode standard allows more than one way to encode the same string. For efficiency, however, JavaScript strin comparison compares strictly on a character-by-c compared. See the "String.localeCompare( ) x If both values are the boolean value true or both are the boolean value false, they are identical. x If both values refer to the same object, array, or function, they are identica they refer to different objects (or arrays or functions) they are not identical, even if both objects have identical properties or both arrays have identical elements. x If both values are null or both values are undefined, they are identical. The following rules identical, they are equal; if they are not identical, they are not equal. x If the two values do not have the same type, they may still be equal. Use the following rules and type conversions to check for equality: o If one value is null and the other is undefined, they are equal. o If one value is a number and the ot o If either value is true, convert it to 1 and try the comparison again. If either value is false, convert it to 0 and try the comparison again. o If one value is an object and the other is a number or string, convert the method. The built-in classes o conversion before toString( [...]... expects a lefthand operand that is an object and a righthand operand that is the name of a class of objects The operator evaluates to true if the lefthand object is an instance of the righthand class and evaluates to false otherwise We'll see in Chapter 8 that, in JavaScript, classes of objects are defined by the constructor function that is used to initialize them Thus, the righthand operand of instanceof... left and right In JavaScript 1.0 and JavaScript 1.1, the bitwise operators return NaN if used with operands that are not integers or that are too large to fit in a 32-bit integer representation JavaScript 1.2 and ECMAScript, however, simply coerce the operands to 32-bit integers by dropping any fractional part of the operand or any bits beyond the 32nd The shift operators require a righthand operand... if the righthand operand is an object that is not a constructor function, instanceof returns false On the other hand, it returns a runtime error if the righthand operand is not an object at all 5.6 String Operators As we've discussed in the previous sections, there are several operators that have special effects when their operands are strings The + operator concatenates two string operands That is,... results The == and != operators work on strings, but, as we've seen, these operators work for all data types, and they do not have any special behavior when used with strings The + operator is a special one it gives priority to string operands over numeric operands As noted earlier, if either operand to + is a string (or an object), the other operand is converted to a string (or both operands are converted... Inequality (!=) and Non-Identity (!==) The != and !== operators test for the exact opposite of the == and === operators The != inequality operator returns false if two values are equal to each other and returns true otherwise The !== non-identity operator returns false if two values are identical to each other and returns true otherwise Note that this operator is standardized by ECMAScript v3 and implemented... Chapter 6 5.10.7 Array and Object Access Operators As noted briefly in Chapter 3, you can access elements of an array using square brackets ([]), and you can access elements of an object using a dot (.) Both [] and are treated as operators in JavaScript The operator expects an object as its left operand and an identifier (a property name) as its right operand The right operand should not be a string... expression Most operators allow arbitrary expressions for either operand, as long as the type of the operand is suitable The operator is an exception: the righthand operand must be an identifier Nothing else is allowed The [] operator allows access to array elements It also allows access to object properties without the restrictions that the operator places on the righthand operand If the first operand (which... the lefthand expression Otherwise, it evaluates its second operand, the expression on its right, and returns the value of that expression.[2] [2] In JavaScript 1.0 and JavaScript 1.1, if the lefthand expression could be converted to true, the operator returns true rather than returning the unconverted value of the lefthand expression As with the && operator, you should avoid righthand operands that... evaluates to true if its first operand is greater than or equal to its second operand; otherwise it evaluates to false The operands of these comparison operators may be of any type Comparison can be performed only on numbers and strings, however, so operands that are not numbers or strings are converted Comparison and conversion occur as follows: x x x If both operands are numbers, or if both convert... JavaScript 1.3 and later As we'll see, the ! operator computes the Boolean NOT operation This makes it easy to remember that != stands for "not equal to" and !== stands for "not identical to." See the previous section for details on how equality and identity are defined for different data types 5.5 Relational Operators This section describes the JavaScript relational operators These are operators that . operands, it performs addition and assignment; for string operands, it performs concatenation and assignment. Similar operators include -= , *=, &=, and. ion. For example: ) - sum Operators This chapter explains how expressions and operators work i JavaScript are very similar, and you'll be a C, C++,