JavaScript The Complete Reference (2012)

---

NOTE Because of JavaScript’s ambivalence to whitespace and most Web users’ frustration with slow download times, some JavaScript programmers choose to “compress” their scripts by removing excess whitespace characters. This practice is generally a part of minification, discussed inChapter 18.

The spacing between tokens can be omitted if the meaning is unambiguous. For example:

contains no spaces but is acceptable because its meaning is clear. However, most operations other than simple arithmetic functions will require a space to indicate the desired meaning. Consider the following:

The first statement invokes the typeof operator on a variable x and places the result in s. The second copies the value of a variable called typeofx into s. One space changes the entire meaning of the statement.

As a rule, JavaScript ignores extra whitespace—but there are exceptions. One is in strings. Whitespace will be preserved in any string enclosed in single or double quotes:

Experienced programmers might wonder what happens if you include a linebreak directly in a string. The answer involves another of the subtleties of whitespace and JavaScript: implicit semicolons.

Statements

Statements are the essence of a language like JavaScript. They are instructions to the interpreter to carry out specific actions. For example, one of the most common statements is an assignment. Assignment uses the = operator and places the value on the right-hand side into the variable on the left. For example:

adds 10 to y and places the value in x. The assignment operator should not be confused with the “is equal to” comparison operator ==, which is used in conditional expressions (discussed later in the chapter). One key issue with statements in a programming language is indicating how they are terminated and grouped.

Semicolons

A semicolon indicates the end of a JavaScript statement. For example, you can group multiple statements on one line by separating them with semicolons:

You can also include more complicated or even empty statements on one line:

This example increments x, skips past two empty statements, sets x to zero if x is greater than 10, and finally decrements y. As you can see, including multiple statements on one line is rather unwieldy if worked on directly and as such should be avoided. However, code condensing like this via white space reduction and other techniques is the standard result of minification, which is useful for reducing script size for optimal delivery online.

Although statements should be followed by semicolons, they can be omitted if your statements are separated by a line break. For example:

is treated as:

Of course, if you wish to include two statements on one line, a semicolon must be included to separate them:

The formal rules for implicit semicolon insertion are a bit more complex than the preceding description would lead you to believe. In theory, tokens of a single statement can be separated by a line break without causing an error. However, if the tokens on a line without a semicolon comprise a complete JavaScript statement, a semicolon is inserted even if the next line could plausibly be treated as an extension of the first. The classic example is the return statement. Because the argument to return is optional, placing return and its argument on separate lines causes the return to execute without the argument. For example:

is treated as:

rather than what was probably intended:

Relying on implicit semicolon insertion is a bad idea, and poor programming style to boot. This practice should be avoided.

Blocks

Curly braces “{ }” are used to group a list of statements together. For example, the statements that make up the body of a function are enclosed in curly braces:

If more than one statement is to be executed as the result of a conditional or in a loop, the statements are similarly grouped:

Regardless of whether they are used singularly or within groups, statements generally need to modify data, which is often in the form of a variable.

Variables

A variable stores data. Every variable has a name, called its identifier. Variables are declared in JavaScript using var, a keyword that allocates storage space for new data and indicates to the interpreter that a new identifier is in use. Declaring a variable is simple:

This statement tells the interpreter that a new variable x is about to be used. Variables can be assigned initial values when they are declared:

In addition, multiple variables can be declared with one var statement if the variables are separated by commas:

You should not use variables without first declaring them, although it is possible to do so in many cases. In JavaScript, variables are either in the global scope or the local scope. Variables declared within a function belong strictly to that function and cannot be accessed outside of that scope. Variables declared outside of a function are global to the application. However, if a variable is used without a var declaration, even inside of a function, that variable will belong to the global scope. We advise you to always declare variables first so that there is no confusion to the variables scope.

Experienced programmers will notice that, unlike C, C++, and Java, that type of information is missing in JavaScript during declaration. This foreshadows that JavaScript’s treatment of variable data types is fundamentally different from these languages.

Basic Data Types

Every variable has a data type that indicates what kind of data the variable holds. There are five basic data types in JavaScript, and they are shown in Table 2-2.

Table 2-2 JavaScript’s Primitive Data Types

All these data types as well as the details of special characters are discussed in Chapter 3. However, one aspect of JavaScript data types should be briefly mentioned in this overview: weak typing.

Weak Typing

A major difference between JavaScript and other languages you might be familiar with is that JavaScript is weakly typed. Every JavaScript variable has a data type, but the type is inferred from the variable’s content. For example, a variable that is assigned a string value assumes the string data type. A consequence of JavaScript’s automatic type inference is that a variable’s type can change dynamically. For example, a variable can hold a string at one point and then later be assigned a Boolean. Its type changes according to the data it holds. This explains why there is only one way to declare variables in JavaScript: there is no need to indicate type in variable declarations.

Being weakly typed is both a blessing and a curse for JavaScript. While weak typing appears to free the programmer from having to declare types ahead of time, it does so at the expense of introducing subtle typing errors. For example, given the following script that manipulates various string and number values, we will see type conversion cause potential ambiguities:

The output of this example when included in an HTML document is shown here:

Notice in particular how, in the case of addition, the result was a string “55” rather than a number 10, while in the other examples the string was converted to a number before output. The reason the addition didn’t work is that the plus sign is an overloaded operator that serves two meanings, both as addition and as string concatenation.

Type Conversion

Type conversion is automatically carried out in JavaScript. Table 2-3 shows the common conversion rules when data is automatically converted to one type or another. Automatic conversion happens very often when using relational operators discussed later in the section. Type conversion and its subtleties are discussed in more detail in Chapter 3.

Table 2-3 Type Conversions in JavaScript

Fortunately, there are many ways to convert data predictably in JavaScript using methods like parseInt() and parseFloat() amongst other schemes. These methods are shown in Table 2-4.

Table 2-4 Type Conversion Methods

Given that it may be unclear what the type of a given value is, you may need to employ the typeof operator.

Also, be aware that implicit type conversion can lead to lots of confusion. For example,

indicates that the two values are equivalent. If you are looking for explicit checking of type and value, you will need to use the === and !== operators, discussed later. Because of the potential for run-time type errors, explicit conversion is simply more appropriate for safe programming.

Composite Types

Composite types are collections of primitive types into some larger structure. In JavaScript, the most generic composite type from which all other composite types are derived is the object.

Objects

In JavaScript, an object is an unordered set of properties that may be accessed using the dot operator:

For example:

might be used to access the name property of an object called myDog. Equivalently, this can be represented in an associative array format:

So the same example in this case would be:

Generally, the two formats are equivalent, but when accessing properties with spaces in them or doing some forms of loop, the associate array format may be easier to work with.

In the case where we are accessing an object’s property and it is a function, more appropriately called a method, it may be invoked as:

For example, myDog might have a method bark() that could be called like so:

Objects are created using the new operator in conjunction with a special constructor function.

For example, here we create a new Date object that is built into ECMAScript:

Constructor functions are, by convention, named in uppercase and can be user defined. This shows an example of creating a simple object Dog with one property and method.

Besides constructing objects with new, it is also possible that an object literal may be used with the following syntax:

For example:

Object literals are quite important in JavaScript today as they are being co-opted to create a namespace-like wrapper around various user-defined variables and functions. For example, given:

you would wrap the values and functions within an object literal, like so:

and avoid polluting the shared global namespace with many identifiers.

Once an instance of an object is created, setting properties is similar to a standard assignment:

and they can be accessed using the standard dot (‘.’) operator. For example, after creating a simple object, we might just add a new property to it:

Despite what some people think, JavaScript is an object-oriented programming language—it just doesn’t use the magic word “class,” at least not in the current 1.x generation of the language. As a prototypical-based OOP language, we can add to constructors on the fly. For example, we can extend Dog to have a sit() method now:

So our created objects now have this feature:

You can use prototypes to create basic inheritance. For example:

Using this idea, it is possible to add prototypes to built-in objects and even overwrite any methods or properties. This is both a powerful but sometimes dangerous aspect of JavaScript.

The this statement refers to the “current” object; that is, the object inside of which this is invoked. Its syntax is:

It is typically used inside of a function (for example, to access the function’s length property) or inside of a constructor in order to access the new instance being created:

Commonly it is used to shortcut object reference paths. For example, in this markup fragment you might use document.getElementById (“field1”) in the onblur handler, but this is much more concise:

Used in the global context, this refers to the current Window.

ECMAScript Built-In Objects and Host Objects

Now we can certainly make objects for use in our scripts, but often the value of a language comes from its “library”—in other words, the objects, methods, and so on available to us. The core ECMAScript specification does define a core number of objects, as listed in the overview in Table 2-5 and presented in detail primarily in Chapter 7. These objects are part of the language itself, as opposed to host objects that are provided by the executing environment.

Table 2-5 Native Objects Defined by ECMAScript

What many people consider JavaScript is not actually JavaScript but instead consists of the constructs provided by the environment in which the language is hosted. For example, window, document, and navigator are a number of objects you find in client-side JavaScript in a browser that serves as the host environment. In server-side JavaScript, your host environment might provide objects such as fs, querystring, and url. In this book, we’ll focus generally on client-side JavaScript, but the core language concerns will be transferable regardless of host environment. Chapter 9 and beyond will present most of the information on the host objects of browser-based Web development.

Arrays

JavaScript arrays are quite similar to objects, as we have alluded to a bit already, but they aren’t full types of their own. For example, you won’t be able to do a typeof on a variable that is an array and get confirmation that it is such a structure.

The array literal definition is similar to many languages using the following syntax (the brackets are “real” brackets and do not indicate optional components):

Each elementN is optional, so you can use an array with “holes” in it; for example:

You can also use the Array() constructor:

If only one numeric argument is passed, it is interpreted as the initial value for the length property; however, we stress the word initial. In JavaScript, it is easy to grow arrays simply by adding values. It is not necessary to reallocate memory or redeclare the array.

JavaScript arrays are zero base indexed, so

would set the value at the first index of the array to the string literal “First in.” Access is the same using a numeric index.

To get the defined length of the array, use the length property:

We might use this property to set the final item of the array:

Arrays do not have to be indexed solely numerically. We can also use textual keys. For example:

However, when arrays are utilized in this manner, they perform slightly differently from numerically indexed arrays. In this case, it is not possible to get the length of the array through the length property, and it is not possible to loop through the array with a standard for loop. However, it is possible to loop through the array using the for…in loop.

This reminds us again of the close relationship between arrays and objects in JavaScript. Object properties can be accessed not only as objectName.propertyName but as objectName [“propertyName” ]. However, this does not mean that array elements can be accessed using an object style; arrayName.0 would not access the first element of an array. Arrays are not quite interchangeable with objects in JavaScript.

Arrays will be discussed in depth in Chapters 3 and 7, which will expose the reader to the numerous methods for array manipulation.

Functions as Data Types

Functions end up being classified as composite types as well. Generally, we do not think of them this way, as we usually encounter function literals employing the following syntax:

where args is a comma-separated list of identifiers for the function arguments, and statements is zero or more valid JavaScript statements. Function literals are often found in constructors:

or when binding them to event handlers:

or performing other higher-order programming tasks.

As a composite type like any other, you do not have to create functions solely as literals; for example, you can also use the Function() constructor:

The argNs are the names of the parameters the function accepts, and statements is the body of the function. For example:

In fact, functions like these other data types are first class data objects. We can use them in expressions, as we did above, and even assign them and use them as values:

We will explore functions in depth in Chapter 5.

Regular Expression Literals and Object

Regular expression literals (actually RegExp literals) have the following syntax:

where exp is a valid regular expression and flags is zero or more regular expression modifiers (for example, “gi” for global and case-insensitive).

Although not strictly a literal, you can use the RegExp() constructor inline in JavaScript:

JavaScript regular expressions are quite powerful, and full details on this topic can be found in Chapter 8.

Expressions

Expressions are an important part of JavaScript and are the building blocks of many JavaScript statements. Expressions are groups of tokens that can be evaluated; for example,

is an assignment statement that takes the expression 3+3 and puts the result in the variable x. Literals and variables are the simplest kinds of expressions and can be used with operators to create more complex expressions.

Arithmetic Operators

Arithmetic operators operate solely on numbers, with one exception, +, which is overloaded and provides string concatenation as well. Table 2-6 details the arithmetic operators found in JavaScript.

Table 2-6 Arithmetic Operators

Bitwise Operators

While JavaScript does not allow for standard C-like memory access, it does include bitwise operators. Bitwise operators operate on integers in a bit-by-bit fashion. Most computers store negative numbers using their two’s complement representation, so you should exercise caution when performing bit operations on negative numbers. Most uses of JavaScript rarely involve bitwise operators, but they are presented in Table 2-7 for those so inclined to use them.

Table 2-7 Bitwise Operators

Assignment Operators

Assigning a value to a variable is performed using the = operator. There are a number of shorthand notations in JavaScript that allow you to perform simple arithmetic or bitwise operations and assign the new value at the same time. These operators are shown in Table 2-8.

Table 2-8 Binary and Self-Assignment Bitwise Operators

Logical Operators

Logical operators operate on Boolean values and are used to construct conditional statements. Logical operators are short-circuited in JavaScript, meaning that once a logical condition is guaranteed, none of the other subexpressions in a conditional expression are evaluated. They are evaluated left to right. Table 2-9 summarizes these operators.

Table 2-9 Logical Operators

Conditional Operator

The conditional operator is a ternary operator popular among C programmers. Its syntax is

where expr1 is an expression evaluating to a Boolean and expr2 and expr3 are expressions. If expr1 evaluates true, then the expression takes on the value expr2; otherwise, it takes on the value expr3. The operator has gained some popularity in JavaScript, serving as a compact simple conditional often used in feature detection.

Type Operators

Type operators generally operate on objects or object properties. The most commonly used operators are new and typeof, but JavaScript supports a range of other type operators as well, as summarized in Table 2-10.

Table 2-10 Type-Related Operators

We previously covered the type operators used for property access and remind you that to access a property aProperty of an object object, the following two syntaxes are equivalent:

Note again that the brackets are “real” brackets and do not imply an optional component.

Comma Operator

The comma operator allows multiple statements to be carried out as one. The syntax of the operator is

The comma is commonly used to separate variables in declarations or parameters in function calls. However, while uncommon if this operator is used in an expression, its value is the value of the last statement:

Relational Operators

Relational operators, as detailed in Table 2-11, are binary operators that compare two like types and evaluate to a Boolean, indicating whether the relationship holds. If the two operands are not of the same type, type conversion is carried out so that the comparison can take place. (See the section immediately following for more information.)

Table 2-11 Relational Operators

Type Conversion in Comparisons

A JavaScript implementation should carry out the following steps in order to compare two different types:

1. If both of the operands are strings, compare them lexicographically.

2. Convert both operands to numbers.

3. If either operand is NaN, return undefined (which, in turn, evaluates to false when converted to a Boolean).

4. If either operand is infinite or zero, evaluate the comparison using the rules that +0 and –0 compare false unless the relation includes equality, that Infinity is never less than any value, and that –Infinity is never more than any value.

5. Compare the operands numerically.