[Contents] [Previous] [Next] [Index]

## Chapter 9 Expressions and Operators

This chapter describes JavaScript expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, and special operators. It also describes regular expressions.

## Expressions

An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value; the value can be a number, a string, or a logical value.

The special keyword `null` denotes a null value. In contrast, variables that have not been assigned a value are undefined and cause a runtime error if used as numbers or as numeric variables. Array elements that have not been assigned a value, however, evaluate to false. For example, the following code executes the function `myFunction` because the array element is not defined:

`myArray=new Array()if (!myArray["notThere"])   myFunction()`

## Operators

JavaScript has assignment, comparison, arithmetic, bitwise, logical, string, and special operators. This section describes the operators and contains information about operator precedence.

`operand1 operator operand2`
For example, `3+4` or `x*y`.

`operator operand`
or

`operand operator`
For example, `x++` or `++x`.

### Assignment Operators

An assignment operator assigns a value to its left operand based on the value of its right operand. The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x.

### Comparison Operators

A comparison operator compares its operands and returns a logical value based on whether the comparison is true or not. The operands can be numerical or string values. When used on string values, the comparisons are based on the standard lexicographical ordering. They are described in Table 9.2.

### Arithmetic Operators

Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/). These operators work as they do in other programming languages.

### Bitwise Operators

Bitwise operators treat their operands as a set of bits (zeros and ones), rather than as decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript numerical values.

#### Bitwise Logical Operators

Conceptually, the bitwise logical operators work as follows:

For example, the binary representation of nine is 1001, and the binary representation of fifteen is 1111. So, when the bitwise operators are applied to these values, the results are as follows:

#### Bitwise Shift Operators

The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.

### Logical Operators

Logical operators take Boolean (logical) values as operands and return a Boolean value. They are described in Table 9.6.

#### Short-Circuit Evaluation

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

The rules of logic guarantee that these evaluations are always correct. Note that the anything part of the above expressions is not evaluated, so any side effects of doing so do not take effect.

### String Operators

In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings. For example, `"my " + "string"` returns the string `"my string"`.

### Special Operators

#### conditional operator

The conditional operator is the only JavaScript operator that takes 3 operands. The operator can have one of two values based on a condition. The syntax is

`(condition) ? val1 : val2`
If `condition` is true, the operator has the value of `val1`. Otherwise it has the value of `val2`. You can use the conditional operator anywhere you would use a standard operator.

`status = (age >= 18) ? "adult" : "minor"`
This statement assigns the value "adult" to the variable `status` if `age` is eighteen or more. Otherwise, it assigns the value "minor" to `status`.

#### comma operator

The comma operator (`,`) simply evaluates both of its operands and returns the value of the second operand. This operator is primarily used inside a `for` loop, to allow multiple variables to be updated each time through the loop.

`for (var i=0, j=10; i <= 10; i++, j--)   document.writeln("a["+i+","+j+"]= " + a[i,j]) `

#### delete

The `delete` operator deletes an object's property or an element at a specified index in an array. Its syntax is:

`delete objectName.propertydelete objectname[index]delete property`
where `objectName` is the name of an object, `property` is an existing property, and `index` is an integer representing the location of an element in an array

#### new

You can use the `new` operator to create an instance of a user-defined object type or of one of the predefined object types `Array`, `Boolean`, `Date`, `Function`, `Image`, `Number`, `Object`, `Option`, `RegExp`, or `String`. On the server, you can also use it with `DbPool`, `Lock`, `File`, or `SendMail`. Use `new` as follows:

`objectName = new objectType ( param1 [,param2] ...[,paramN] )`
For more information, see `new` in the JavaScript Reference.

#### typeof

The `typeof` operator is used in either of the following ways:

`1. typeof operand2. typeof (operand)`
The `typeof` operator returns a string indicating the type of the unevaluated operand. `operand` is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.

`var myFun = new Function("5+2")var shape="round"var size=1var today=new Date()`
The `typeof` operator returns the following results for these variables:

`typeof myFun is objecttypeof shape is stringtypeof size is numbertypeof today is objecttypeof dontExist is undefined`
For the keywords `true` and `null`, the `typeof` operator returns the following results:

`typeof true is booleantypeof null is object`
For a number or string, the `typeof` operator returns the following results:

`typeof 62 is numbertypeof 'Hello world' is string`
For property values, the `typeof` operator returns the type of value the property contains:

`typeof document.lastModified is stringtypeof window.length is numbertypeof Math.LN2 is number`
For methods and functions, the `typeof` operator returns results as follows:

`typeof blur is functiontypeof eval is functiontypeof parseInt is functiontypeof shape.split is function`
For predefined objects, the `typeof` operator returns results as follows:

`typeof Date is functiontypeof Function is functiontypeof Math is functiontypeof Option is functiontypeof String is function`

#### void

The void operator is used in either of the following ways:

`1. javascript:void (expression)2. javascript:void expression`
The void operator specifies an expression to be evaluated without returning a value. `expression` is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.

`<A HREF="javascript:void(0)">Click here to do nothing</A>`
The following code creates a hypertext link that submits a form when the user clicks it.

`<A HREF="javascript:void(document.form.submit())">Click here to submit</A>`

### Operator Precedence

The precedence of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.

Table 9.7 describes the precedence of operators, from lowest to highest.

## Regular Expressions

JavaScript 1.2, available in Navigator 4.0, adds regular expressions to the language. Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. For example, to search for all occurrences of 'the' in a string, you create a pattern consisting of 'the' and use the pattern to search for its match in a string. Regular expression patterns can be constructed using either object initializers (for example, `/abc/`) or the `RegExp` constructor function (for example, `re = new RegExp("abc")`). Object initializers are discussed in "Using Object Initializers".

### Creating a Regular Expression

You construct a regular expression in one of two ways:

### Writing a Regular Expression Pattern

A regular expression pattern is composed of simple characters, such as `/abc/`, or a combination of simple and special characters, such as `/ab*c/` or `/Chapter (\d+)\.\d*/`. The last example includes parentheses which are used as a memory device. The match made with this part of the pattern is remembered for later use, as described in "Using Parenthesized Substring Matches".

#### Using Simple Patterns

Simple patterns are constructed of characters for which you want to find a direct match. For example, the pattern `/abc/` matches character combinations in strings only when exactly the characters 'abc' occur together and in that order. Such a match would succeed in the strings "Hi, do you know your abc's?" and "The latest airplane designs evolved from slabcraft." In both cases the match is with the substring 'abc'. There is no match in the string "Grab crab" because it does not contain the substring 'abc'.

#### Using Special Characters

When the search for a match requires something more than a direct match, such as finding one or more b's, or finding whitespace, the pattern includes special characters. For example, the pattern `/ab*c/` matches any character combination in which a single 'a' is followed by zero or more 'b's (`*` means 0 or more occurrences of the preceding character) and then immediately followed by 'c'. In the string "cbbabbbbcdebc," the pattern matches the substring 'abbbbc'.

Table 9.8 provides a complete list and description of the special characters that can be used in regular expressions.

#### Using Parentheses

Parentheses around any part of the regular expression pattern cause that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in "Using Parenthesized Substring Matches".

### Working With Regular Expressions

Regular expressions are used with the regular expression methods `test` and `exec` and with the `String` methods `match`, `replace`, `search`, and `split`. These methods are explained in detail in the JavaScript Reference.

`<SCRIPT LANGUAGE="JavaScript1.2">myRe=/d(b+)d/g;myArray = myRe.exec("cdbbdbsbz");</SCRIPT>`
If you do not need to access the properties of the regular expression, an alternative way of creating `myArray` is with this script:

`<SCRIPT LANGUAGE="JavaScript1.2">myArray = /d(b+)d/g.exec("cdbbdbsbz");</SCRIPT>`
If you want to be able to recompile the regular expression, yet another alternative is this script:

`<SCRIPT LANGUAGE="JavaScript1.2">myRe= new RegExp ("d(b+)d", "g:);myArray = myRe.exec("cdbbdbsbz");</SCRIPT>`
With these scripts, the match succeeds and returns the array and updates the properties shown in Table 9.9.

`myArray.input.substring(0, myArray.index) `
and `RegExp.rightContext` is equivalent to:

`myArray.input.substring(myArray.index + myArray.length)`
As shown in the second form of this example, you can use the a regular expression created with an object initializer without assigning it to a variable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script:

`<SCRIPT LANGUAGE="JavaScript1.2">myRe=/d(b+)d/g;myArray = myRe.exec("cdbbdbsbz");document.writeln("The value of lastIndex is " + myRe.lastIndex);</SCRIPT>`
This script displays:

The value of lastIndex is 5
However, if you have this script:

`<SCRIPT LANGUAGE="JavaScript1.2">myArray = /d(b+)d/g.exec("cdbbdbsbz");document.writeln("The value of lastIndex is " + /d(b+)d/g.lastIndex);</SCRIPT>`
It displays:

The value of lastIndex is 0
The occurrences of `/d(b+)d/g` in the two statements are different regular expression objects and hence have different values for their `lastIndex` property. If you need to access the properties of a regular expression created with an object initalizer, you should first assign it to a variable.

#### Using Parenthesized Substring Matches

Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, `/a(b)c/` matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the `RegExp` properties `\$1`, ..., `\$9` or the `Array` elements ``, ..., `[n]`.

`<SCRIPT LANGUAGE="JavaScript1.2">re = /(\w+)\s(\w+)/;str = "John Smith";newstr = str.replace(re, "\$2, \$1");document.write(newstr)</SCRIPT>`
This prints "Smith, John".

`<HTML>`
`<SCRIPT LANGUAGE="JavaScript1.2">function getInfo(){   re = /(\w+)\s(\d+)/   re.exec();   window.alert(RegExp.\$1 + ", your age is " + RegExp.\$2);}</SCRIPT>`
`Enter your first name and your age, and then press Enter.`
`<FORM><INPUT TYPE="text" NAME="NameAge" onChange="getInfo(this);"></FORM>`
`</HTML>`
Example 3. : The following example is similar to Example 2. Instead of using the `RegExp.\$1` and `RegExp.\$2`, this example creates an array and uses `a` and `a`. It also uses the shortcut notation for using the `exec` method.

`<HTML>`
`<SCRIPT LANGUAGE="JavaScript1.2">function getInfo(){   a = /(\w+)\s(\d+)/();   window.alert(a + ", your age is " + a);}</SCRIPT>`
`Enter your first name and your age, and then press Enter.`
`<FORM><INPUT TYPE="text" NAME="NameAge" onChange="getInfo(this);"></FORM>`
`</HTML> `

#### Executing a Global Search and Ignoring Case

Regular expressions have two optional flags that allow for global and case insensitive searching. To indicate a global search, use the `g` flag. To indicate a case insensitive search, use the `i` flag. These flags can be used separately or together in either order, and are included as part of the regular expression.

`re = /pattern/[g|i|gi]re = new RegExp("pattern", ['g'|'i'|'gi'])`
Note that the flags, `i` and `g`, are an integral part of a regular expression. They cannot be added or removed later.

`<SCRIPT LANGUAGE="JavaScript1.2">re = /\w+\s/g;str = "fee fi fo fum";myArray = str.match(re);document.write(myArray);</SCRIPT>`
This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:

`re = /\w+\s/g;`
with:

`re = new RegExp("\\w+\\s", "g");`
and get the same result.

### Examples

#### Changing the Order in an Input String

The following example illustrates the formation of regular expressions and the use of `string.split()` and `string.replace()`.

`<SCRIPT LANGUAGE="JavaScript1.2">`
`// The name string contains multiple spaces and tabs,// and may have multiple spaces between first and last names.names = new String ( "Harry Trump ;Fred Barney; Helen Rigby ;\       Bill Abel ;Chris Hand ")`
`document.write ("---------- Original String" + "<BR>" + "<BR>")document.write (names + "<BR>" + "<BR>")`
`// Prepare two regular expression patterns and array storage.// Split the string into array elements.`
`// pattern: possible white space then semicolon then possible white spacepattern = /\s*;\s*/`
`// Break the string into pieces separated by the pattern above and// and store the pieces in an array called nameListnameList = names.split (pattern)`
`// new pattern: one or more characters then spaces then characters.// Use parentheses to "memorize" portions of the pattern.// The memorized portions are referred to later.pattern = /(\w+)\s+(\w+)/`
`// New array for holding names being processed.bySurnameList = new Array;`
`// Display the name array and populate the new array// with comma-separated names, last first.//// The replace method removes anything matching the pattern// and replaces it with the memorized string--second memorized portion// followed by comma space followed by first memorized portion.// // The variables \$1 and \$2 refer to the portions// memorized while matching the pattern.`
`document.write ("---------- After Split by Regular Expression" + "<BR>")for ( i = 0; i < nameList.length; i++) {   document.write (nameList[i] + "<BR>")   bySurnameList[i] = nameList[i].replace (pattern, "\$2, \$1")}`
`// Display the new array.document.write ("---------- Names Reversed" + "<BR>")for ( i = 0; i < bySurnameList.length; i++) {   document.write (bySurnameList[i] + "<BR>")}`
`// Sort by last name, then display the sorted array.bySurnameList.sort()document.write ("---------- Sorted" + "<BR>")for ( i = 0; i < bySurnameList.length; i++) {   document.write (bySurnameList[i] + "<BR>")}`
`document.write ("---------- End" + "<BR>")`
`</SCRIPT> `

#### Using Special Characters to Verify Input

In the following example, a user enters a phone number. When the user presses Enter, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script posts a window thanking the user and confirming the number. If the number is invalid, the script posts a window telling the user that the phone number isn't valid.

`<HTML><SCRIPT LANGUAGE = "JavaScript1.2">`
`re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/`
`function testInfo() {   OK = re.exec()   if (!OK)      window.alert (RegExp.input +          " isn't a phone number with area code!")   else      window.alert ("Thanks, your phone number is " + OK)}`
`</SCRIPT>`
`Enter your phone number (with area code) and then press Enter.<FORM> <INPUT TYPE="text" NAME="Phone" onChange="testInfo(this);"></FORM>`
`</HTML>`

[Contents] [Previous] [Next] [Index]

Last Updated: 11/26/97 09:25:49