You are previewing JavaScript: The Definitive Guide, 6th Edition.

JavaScript: The Definitive Guide, 6th Edition

Cover of JavaScript: The Definitive Guide, 6th Edition by David Flanagan Published by O'Reilly Media, Inc.
  1. JavaScript: The Definitive Guide
  2. Dedication
  3. A Note Regarding Supplemental Files
  4. Preface
    1. Conventions Used in This Book
    2. Example Code
    3. Errata and How to Contact Us
    4. Acknowledgments
  5. 1. Introduction to JavaScript
    1. Core JavaScript
    2. Client-Side JavaScript
      1. Example: A JavaScript Loan Calculator
  6. I. Core JavaScript
    1. 2. Lexical Structure
      1. Character Set
      2. Comments
      3. Literals
      4. Identifiers and Reserved Words
      5. Optional Semicolons
    2. 3. Types, Values, and Variables
      1. Numbers
      2. Text
      3. Boolean Values
      4. null and undefined
      5. The Global Object
      6. Wrapper Objects
      7. Immutable Primitive Values and Mutable Object References
      8. Type Conversions
      9. Variable Declaration
      10. Variable Scope
    3. 4. Expressions and Operators
      1. Primary Expressions
      2. Object and Array Initializers
      3. Function Definition Expressions
      4. Property Access Expressions
      5. Invocation Expressions
      6. Object Creation Expressions
      7. Operator Overview
      8. Arithmetic Expressions
      9. Relational Expressions
      10. Logical Expressions
      11. Assignment Expressions
      12. Evaluation Expressions
      13. Miscellaneous Operators
    4. 5. Statements
      1. Expression Statements
      2. Compound and Empty Statements
      3. Declaration Statements
      4. Conditionals
      5. Loops
      6. Jumps
      7. Miscellaneous Statements
      8. Summary of JavaScript Statements
    5. 6. Objects
      1. Creating Objects
      2. Querying and Setting Properties
      3. Deleting Properties
      4. Testing Properties
      5. Enumerating Properties
      6. Property Getters and Setters
      7. Property Attributes
      8. Object Attributes
      9. Serializing Objects
      10. Object Methods
    6. 7. Arrays
      1. Creating Arrays
      2. Reading and Writing Array Elements
      3. Sparse Arrays
      4. Array Length
      5. Adding and Deleting Array Elements
      6. Iterating Arrays
      7. Multidimensional Arrays
      8. Array Methods
      9. ECMAScript 5 Array Methods
      10. Array Type
      11. Array-Like Objects
      12. Strings As Arrays
    7. 8. Functions
      1. Defining Functions
      2. Invoking Functions
      3. Function Arguments and Parameters
      4. Functions As Values
      5. Functions As Namespaces
      6. Closures
      7. Function Properties, Methods, and Constructor
      8. Functional Programming
    8. 9. Classes and Modules
      1. Classes and Prototypes
      2. Classes and Constructors
      3. Java-Style Classes in JavaScript
      4. Augmenting Classes
      5. Classes and Types
      6. Object-Oriented Techniques in JavaScript
      7. Subclasses
      8. Classes in ECMAScript 5
      9. Modules
    9. 10. Pattern Matching with Regular Expressions
      1. Defining Regular Expressions
      2. String Methods for Pattern Matching
      3. The RegExp Object
    10. 11. JavaScript Subsets and Extensions
      1. JavaScript Subsets
      2. Constants and Scoped Variables
      3. Destructuring Assignment
      4. Iteration
      5. Shorthand Functions
      6. Multiple Catch Clauses
      7. E4X: ECMAScript for XML
    11. 12. Server-Side JavaScript
      1. Scripting Java with Rhino
      2. Asynchronous I/O with Node
  7. II. Client-Side JavaScript
    1. 13. JavaScript in Web Browsers
      1. Client-Side JavaScript
      2. Embedding JavaScript in HTML
      3. Execution of JavaScript Programs
      4. Compatibility and Interoperability
      5. Accessibility
      6. Security
      7. Client-Side Frameworks
    2. 14. The Window Object
      1. Timers
      2. Browser Location and Navigation
      3. Browsing History
      4. Browser and Screen Information
      5. Dialog Boxes
      6. Error Handling
      7. Document Elements As Window Properties
      8. Multiple Windows and Frames
    3. 15. Scripting Documents
      1. Overview of the DOM
      2. Selecting Document Elements
      3. Document Structure and Traversal
      4. Attributes
      5. Element Content
      6. Creating, Inserting, and Deleting Nodes
      7. Example: Generating a Table of Contents
      8. Document and Element Geometry and Scrolling
      9. HTML Forms
      10. Other Document Features
    4. 16. Scripting CSS
      1. Overview of CSS
      2. Important CSS Properties
      3. Scripting Inline Styles
      4. Querying Computed Styles
      5. Scripting CSS Classes
      6. Scripting Stylesheets
    5. 17. Handling Events
      1. Types of Events
      2. Registering Event Handlers
      3. Event Handler Invocation
      4. Document Load Events
      5. Mouse Events
      6. Mousewheel Events
      7. Drag and Drop Events
      8. Text Events
      9. Keyboard Events
    6. 18. Scripted HTTP
      1. Using XMLHttpRequest
      2. HTTP by <script>: JSONP
      3. Comet with Server-Sent Events
    7. 19. The jQuery Library
      1. jQuery Basics
      2. jQuery Getters and Setters
      3. Altering Document Structure
      4. Handling Events with jQuery
      5. Animated Effects
      6. Ajax with jQuery
      7. Utility Functions
      8. jQuery Selectors and Selection Methods
      9. Extending jQuery with Plug-ins
      10. The jQuery UI Library
    8. 20. Client-Side Storage
      1. localStorage and sessionStorage
      2. Cookies
      3. IE userData Persistence
      4. Application Storage and Offline Webapps
    9. 21. Scripted Media and Graphics
      1. Scripting Images
      2. Scripting Audio and Video
      3. SVG: Scalable Vector Graphics
      4. Graphics in a <canvas>
    10. 22. HTML5 APIs
      1. Geolocation
      2. History Management
      3. Cross-Origin Messaging
      4. Web Workers
      5. Typed Arrays and ArrayBuffers
      6. Blobs
      7. The Filesystem API
      8. Client-Side Databases
      9. Web Sockets
  8. III. Core JavaScript Reference
    1. I. Core JavaScript Reference
      1. arguments[ ]
      2. Arguments
      3. Arguments.callee
      4. Arguments.length
      5. Array
      6. Array.concat()
      7. Array.every()
      8. Array.filter()
      9. Array.forEach()
      10. Array.indexOf()
      11. Array.join()
      12. Array.lastIndexOf()
      13. Array.length
      14. Array.map()
      15. Array.pop()
      16. Array.push()
      17. Array.reduce()
      18. Array.reduceRight()
      19. Array.reverse()
      20. Array.shift()
      21. Array.slice()
      22. Array.some()
      23. Array.sort()
      24. Array.splice()
      25. Array.toLocaleString()
      26. Array.toString()
      27. Array.unshift()
      28. Boolean
      29. Boolean.toString()
      30. Boolean.valueOf()
      31. Date
      32. Date.getDate()
      33. Date.getDay()
      34. Date.getFullYear()
      35. Date.getHours()
      36. Date.getMilliseconds()
      37. Date.getMinutes()
      38. Date.getMonth()
      39. Date.getSeconds()
      40. Date.getTime()
      41. Date.getTimezoneOffset()
      42. Date.getUTCDate()
      43. Date.getUTCDay()
      44. Date.getUTCFullYear()
      45. Date.getUTCHours()
      46. Date.getUTCMilliseconds()
      47. Date.getUTCMinutes()
      48. Date.getUTCMonth()
      49. Date.getUTCSeconds()
      50. Date.getYear()
      51. Date.now()
      52. Date.parse()
      53. Date.setDate()
      54. Date.setFullYear()
      55. Date.setHours()
      56. Date.setMilliseconds()
      57. Date.setMinutes()
      58. Date.setMonth()
      59. Date.setSeconds()
      60. Date.setTime()
      61. Date.setUTCDate()
      62. Date.setUTCFullYear()
      63. Date.setUTCHours()
      64. Date.setUTCMilliseconds()
      65. Date.setUTCMinutes()
      66. Date.setUTCMonth()
      67. Date.setUTCSeconds()
      68. Date.setYear()
      69. Date.toDateString()
      70. Date.toGMTString()
      71. Date.toISOString()
      72. Date.toJSON
      73. Date.toLocaleDateString()
      74. Date.toLocaleString()
      75. Date.toLocaleTimeString()
      76. Date.toString()
      77. Date.toTimeString()
      78. Date.toUTCString()
      79. Date.UTC()
      80. Date.valueOf()
      81. decodeURI()
      82. decodeURIComponent()
      83. encodeURI()
      84. encodeURIComponent()
      85. Error
      86. Error.message
      87. Error.name
      88. Error.toString()
      89. escape()
      90. eval()
      91. EvalError
      92. Function
      93. Function.apply()
      94. Function.arguments[]
      95. Function.bind()
      96. Function.call()
      97. Function.caller
      98. Function.length
      99. Function.prototype
      100. Function.toString()
      101. Global
      102. Infinity
      103. isFinite()
      104. isNaN()
      105. JSON
      106. JSON.parse()
      107. JSON.stringify()
      108. Math
      109. Math.abs()
      110. Math.acos()
      111. Math.asin()
      112. Math.atan()
      113. Math.atan2()
      114. Math.ceil()
      115. Math.cos()
      116. Math.E
      117. Math.exp()
      118. Math.floor()
      119. Math.LN10
      120. Math.LN2
      121. Math.log()
      122. Math.LOG10E
      123. Math.LOG2E
      124. Math.max()
      125. Math.min()
      126. Math.PI
      127. Math.pow()
      128. Math.random()
      129. Math.round()
      130. Math.sin()
      131. Math.sqrt()
      132. Math.SQRT1_2
      133. Math.SQRT2
      134. Math.tan()
      135. NaN
      136. Number
      137. Number.MAX_VALUE
      138. Number.MIN_VALUE
      139. Number.NaN
      140. Number.NEGATIVE_INFINITY
      141. Number.POSITIVE_INFINITY
      142. Number.toExponential()
      143. Number.toFixed()
      144. Number.toLocaleString()
      145. Number.toPrecision()
      146. Number.toString()
      147. Number.valueOf()
      148. Object
      149. Object.constructor
      150. Object.create()
      151. Object.defineProperties()
      152. Object.defineProperty()
      153. Object.freeze()
      154. Object.getOwnPropertyDescriptor()
      155. Object.getOwnPropertyNames()
      156. Object.getPrototypeOf()
      157. Object.hasOwnProperty()
      158. Object.isExtensible()
      159. Object.isFrozen()
      160. Object.isPrototypeOf()
      161. Object.isSealed()
      162. Object.keys()
      163. Object.preventExtensions()
      164. Object.propertyIsEnumerable()
      165. Object.seal()
      166. Object.toLocaleString()
      167. Object.toString()
      168. Object.valueOf()
      169. parseFloat()
      170. parseInt()
      171. RangeError
      172. ReferenceError
      173. RegExp
      174. RegExp.exec()
      175. RegExp.global
      176. RegExp.ignoreCase
      177. RegExp.lastIndex
      178. RegExp.source
      179. RegExp.test()
      180. RegExp.toString()
      181. String
      182. String.charAt()
      183. String.charCodeAt()
      184. String.concat()
      185. String.fromCharCode()
      186. String.indexOf()
      187. String.lastIndexOf()
      188. String.length
      189. String.localeCompare()
      190. String.match()
      191. String.replace()
      192. String.search()
      193. String.slice()
      194. String.split()
      195. String.substr()
      196. String.substring()
      197. String.toLocaleLowerCase()
      198. String.toLocaleUpperCase()
      199. String.toLowerCase()
      200. String.toString()
      201. String.toUpperCase()
      202. String.trim()
      203. String.valueOf()
      204. SyntaxError
      205. TypeError
      206. undefined
      207. unescape()
      208. URIError
  9. IV. Client-Side JavaScript Reference
    1. II. Client-Side JavaScript Reference
      1. ApplicationCache
      2. ArrayBuffer
      3. ArrayBufferView
      4. Attr
      5. Audio
      6. BeforeUnloadEvent
      7. Blob
      8. BlobBuilder
      9. Button
      10. Canvas
      11. CanvasGradient
      12. CanvasPattern
      13. CanvasRenderingContext2D
      14. ClientRect
      15. CloseEvent
      16. Comment
      17. Console
      18. ConsoleCommandLine
      19. CSS2Properties
      20. CSSRule
      21. CSSStyleDeclaration
      22. CSSStyleSheet
      23. DataTransfer
      24. DataView
      25. Document
      26. DocumentFragment
      27. DocumentType
      28. DOMException
      29. DOMImplementation
      30. DOMSettableTokenList
      31. DOMTokenList
      32. Element
      33. ErrorEvent
      34. Event
      35. EventSource
      36. EventTarget
      37. FieldSet
      38. File
      39. FileError
      40. FileReader
      41. FileReaderSync
      42. Form
      43. FormControl
      44. FormData
      45. FormValidity
      46. Geocoordinates
      47. Geolocation
      48. GeolocationError
      49. Geoposition
      50. HashChangeEvent
      51. History
      52. HTMLCollection
      53. HTMLDocument
      54. HTMLElement
      55. HTMLFormControlsCollection
      56. HTMLOptionsCollection
      57. IFrame
      58. Image
      59. ImageData
      60. Input
      61. jQuery
      62. KeyEvent
      63. Label
      64. Link
      65. Location
      66. MediaElement
      67. MediaError
      68. MessageChannel
      69. MessageEvent
      70. MessagePort
      71. Meter
      72. MouseEvent
      73. Navigator
      74. Node
      75. NodeList
      76. Option
      77. Output
      78. PageTransitionEvent
      79. PopStateEvent
      80. ProcessingInstruction
      81. Progress
      82. ProgressEvent
      83. Screen
      84. Script
      85. Select
      86. Storage
      87. StorageEvent
      88. Style
      89. Table
      90. TableCell
      91. TableRow
      92. TableSection
      93. Text
      94. TextArea
      95. TextMetrics
      96. TimeRanges
      97. TypedArray
      98. URL
      99. Video
      100. WebSocket
      101. Window
      102. Worker
      103. WorkerGlobalScope
      104. WorkerLocation
      105. WorkerNavigator
      106. XMLHttpRequest
      107. XMLHttpRequestUpload
  10. Index
  11. About the Author
  12. Colophon
  13. Copyright
O'Reilly logo

Arithmetic Expressions

This section covers the operators that perform arithmetic or other numerical manipulations on their operands. The multiplication, division, and subtraction operators are straightforward and are covered first. The addition operator gets a subsection of its own because it can also perform string concatenation and has some unusual type conversion rules. The unary operators and the bitwise operators are also covered in subsections of their own.

The basic arithmetic operators are * (multiplication), / (division), % (modulo: remainder after division), + (addition), and - (subtraction). As noted, we’ll discuss the + operator in a section of its own. The other basic four operators simply evaluate their operands, convert the values to numbers if necessary, and then compute the product, quotient, remainder, or difference between the values. Non-numeric operands that cannot convert to numbers convert to the NaN value. If either operand is (or converts to) NaN, the result of the operation is also NaN.

The / operator divides its first operand by its second. If you are used to programming languages that distinguish between integer and floating-point numbers, you might expect to get an integer result when you divide one integer by another. In JavaScript, however, all numbers are floating-point, so all division operations have floating-point results: 5/2 evaluates to 2.5, not 2. Division by zero yields positive or negative infinity, while 0/0 evaluates to NaN: neither of these cases raises an error.

The % operator computes the first operand modulo the second operand. In other words, it returns the remainder after whole-number division of the first operand by the second operand. The sign of the result is the same as the sign of the first operand. For example, 5 % 2 evaluates to 1 and -5 % 2 evaluates to -1.

While the modulo operator is typically used with integer operands, it also works for floating-point values. For example, 6.5 % 2.1 evaluates to 0.2.

The + Operator

The binary + operator adds numeric operands or concatenates string operands:

1 + 2                        // => 3
"hello" + " " + "there"      // => "hello there"
"1" + "2"                    // => "12"

When the values of both operands are numbers, or are both strings, then it is obvious what the + operator does. In any other case, however, type conversion is necessary, and the operation to be performed depends on the conversion performed. The conversions rules for + give priority to string concatenation: if either of the operands is a string or an object that converts to a string, the other operand is converted to a string and concatenation is performed. Addition is performed only if neither operand is string-like.

Technically, the + operator behaves like this:

  • If either of its operand values is an object, it converts it to a primitive using the object-to-primitive algorithm described in Object to Primitive Conversions: Date objects are converted by their toString() method, and all other objects are converted via valueOf(), if that method returns a primitive value. Most objects do not have a useful valueOf() method, however, so they are converted via toString() as well.

  • After object-to-primitive conversion, if either operand is a string, the other is converted to a string and concatenation is performed.

  • Otherwise, both operands are converted to numbers (or to NaN) and addition is performed.

Here are some examples:

1 + 2         // => 3: addition
"1" + "2"     // => "12": concatenation
"1" + 2       // => "12": concatenation after number-to-string
1 + {}        // => "1[object Object]": concatenation after object-to-string
true + true   // => 2: addition after boolean-to-number
2 + null      // => 2: addition after null converts to 0
2 + undefined // => NaN: addition after undefined converts to NaN

Finally, it is important to note that when the + operator is used with strings and numbers, it may not be associative. That is, the result may depend on the order in which operations are performed. For example:

1 + 2 + " blind mice";    // => "3 blind mice"
1 + (2 + " blind mice");  // => "12 blind mice"

The first line has no parentheses, and the + operator has left-to-right associativity, so the two numbers are added first, and their sum is concatenated with the string. In the second line, parentheses alter this order of operations: the number 2 is concatenated with the string to produce a new string. Then the number 1 is concatenated with the new string to produce the final result.

Unary Arithmetic Operators

Unary operators modify the value of a single operand to produce a new value. In JavaScript, the unary operators all have high precedence and are all right-associative. The arithmetic unary operators described in this section (+, -, ++, and --) all convert their single operand to a number, if necessary. Note that the punctuation characters + and - are used as both unary and binary operators.

The unary arithmetic operators are the following:

Unary plus (+)

The unary plus operator converts its operand to a number (or to NaN) and returns that converted value. When used with an operand that is already a number, it doesn’t do anything.

Unary minus (-)

When - is used as a unary operator, it converts its operand to a number, if necessary, and then changes the sign of the result.

Increment (++)

The ++ operator increments (i.e., adds 1 to) its single operand, which must be an lvalue (a variable, an element of an array, or a property of an object). The operator converts its operand to a number, adds 1 to that number, and assigns the incremented value back into the variable, element, or property.

The return value of the ++ operator depends on its position 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. Consider the difference between these two lines of code:

var i = 1, j = ++i;    // i and j are both 2
var i = 1, j = i++;    // i is 2, j is 1

Note that the expression ++x is not always the same as x=x+1. The ++ operator never performs string concatenation: it always converts its operand to a number and increments it. If x is the string “1”, ++x is the number 2, but x+1 is the string “11”.

Also note that, because of JavaScript’s automatic semicolon insertion, you cannot insert a line break between the post-increment operator and the operand that precedes it. If you do so, JavaScript will treat the operand as a complete statement by itself and insert a semicolon before it.

This operator, in both its pre- and post-increment forms, is most commonly used to increment a counter that controls a for loop (for).

Decrement (--)

The -- operator expects an lvalue operand. It converts the value of the operand to a number, subtracts 1, and assigns the decremented value back to the operand. Like the ++ operator, the return value of -- depends on its position relative to the operand. When used before the operand, it decrements and returns the decremented value. When used after the operand, it decrements the operand but returns the undecremented value. When used after its operand, no line break is allowed between the operand and the operator.

Bitwise Operators

The bitwise operators perform low-level manipulation of the bits in the binary representation of numbers. Although they do not perform traditional arithmetic operations, they are categorized as arithmetic operators here because they operate on numeric operands and return a numeric value. These operators are not commonly used in JavaScript programming, and if you are not familiar with the binary representation of decimal integers, you can probably skip this section. Four of these operators perform Boolean algebra on the individual bits of the operands, behaving as if each bit in each operand were a boolean value (1=true, 0=false). The other three bitwise operators are used to shift bits left and right.

The bitwise operators expect integer operands and behave as if those values were represented as 32-bit integers rather than 64-bit floating-point values. These operators convert their operands to numbers, if necessary, and then coerce the numeric values to 32-bit integers by dropping any fractional part and any bits beyond the 32nd. The shift operators require a right-side operand between 0 and 31. After converting this operand to an unsigned 32-bit integer, they drop any bits beyond the 5th, which yields a number in the appropriate range. Surprisingly, NaN, Infinity, and -Infinity all convert to 0 when used as operands of these bitwise operators.

Bitwise AND (&)

The & operator performs a Boolean AND operation on each bit of its integer arguments. A bit is set in the result only if the corresponding bit is set in both operands. For example, 0x1234 & 0x00FF evaluates to 0x0034.

Bitwise OR (|)

The | operator performs a Boolean OR operation on each bit of its integer arguments. A bit is set in the result if the corresponding bit is set in one or both of the operands. For example, 0x1234 | 0x00FF evaluates to 0x12FF.

Bitwise XOR (^)

The ^ operator performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both. A bit is set in this operation’s result if a corresponding bit is set in one (but not both) of the two operands. For example, 0xFF00 ^ 0xF0F0 evaluates to 0x0FF0.

Bitwise NOT (~)

The ~ operator is a unary operator that appears before its single integer operand. It operates by reversing all bits in the operand. Because of the way signed integers are represented in JavaScript, applying the ~ operator to a value is equivalent to changing its sign and subtracting 1. For example ~0x0F evaluates to 0xFFFFFFF0, or −16.

Shift left (<<)

The << operator moves all bits in its first operand to the left by the number of places specified in the second operand, which should be an integer between 0 and 31. For example, in the operation a << 1, the first bit (the ones bit) of a becomes the second bit (the twos bit), the second bit of a becomes the third, etc. A zero is used for the new first bit, and the value of the 32nd bit is lost. Shifting a value left by one position is equivalent to multiplying by 2, shifting two positions is equivalent to multiplying by 4, and so on. For example, 7 << 2 evaluates to 28.

Shift right with sign (>>)

The >> operator moves all bits in its first operand to the right by the number of places specified in the second operand (an integer between 0 and 31). Bits that are shifted off the right are lost. The bits filled in on the left depend on the sign bit of the original operand, in order to preserve the sign of the result. If the first operand is positive, the result has zeros placed in the high bits; if the first operand is negative, the result has ones placed in the high bits. Shifting a value right one place is equivalent to dividing by 2 (discarding the remainder), shifting right two places is equivalent to integer division by 4, and so on. For example, 7 >> 1 evaluates to 3, and −7 >> 1 evaluates to −4.

Shift right with zero fill (>>>)

The >>> operator is just like the >> operator, except that the bits shifted in on the left are always zero, regardless of the sign of the first operand. For example, −1 >> 4 evaluates to −1, but −1 >>> 4 evaluates to 0x0FFFFFFF.

The best content for your career. Discover unlimited learning on demand for around $1/day.