JavaScript Operators

JavaScript contains a wide range of operators many of which are used frequently by the typical web designer and some that are not. The purpose of this chapter is to cover the most common operators that a web designer will need in the day to day work of building dynamic web pages.

The key operators for those looking to learn the essentials of JavaScript fall into six categories as follows:

• Assignment Operators
• Arithmetic Operators
• Comparison Operators
• String Operators
• Conditional Operators
• Logical Operators

In Introducing JavaScript Variables we looked at the '=' assignent operator. This is the most basic of assignment operators and serves to simply assign a value to a variable. For example y = 10 assigns the value of 10 to a variable called y.

The '=' assignment operator does not make any changes to the value before it is assigned to the variable. A number of assignment operators are available, however, that perform arithmetic on the value before assigning it to the variable. These are essentially combined arithmetic and assignment operators. The most common operators of this type, and their "long hand" equivalents are shown below:

These combined operators essentially provide a short way of assigning the results of arithmetic expressions between two variables or a variable and a value and having the result assigned to the first variable. For example:

var x = 10;
x += 5; // Assigns a value of 15 to variable x (the same as x = x + 5)

var y = 20;
y -= 10;  // Assigns a value of 10 to variable y (the same as y = y - 10)

var x = 10;
var y = 5;

x /= y; // Assigns a value of 2 to variable x (the same as x = x / y)

As one might expect, arithmetic operators perform mathematical calculations on values and variables. JavaScript arithmetic is comprised of expressions made up of an operator and values to the right and left of that operator (better known as operands). For example in the expression z = x + y, the + is the arithmetic operator, x and y are the operands and the = is the "assignment operator":

In the following example:

y = 2 + 5;

adds the first operand (2) to the second operand (5) and assigns the result (7) to the variable y.

Arithmetic operatations can also be perform on variables:

y = 10;
x = y + 5;    // Assigns the value 15 to variable x
x = x + y;    // Assigns the value 25 to x (since x now contains the value 15

The key arithmetic operators are:

Unary Operators - Incrementing and Decrementing Variable Values

In JavaScript programming it is extremely common to need to incremement and decrement values assigned to variables. The long handed way of doing this would be:

x = 10;

x = x - 1; // Decreases value of x by 1

x = x + 1; // Increase value of x by 1

A quicker way to perform this is to use the ++ and -- operators - better known as unary operators. The syntax for this is as follows:

--x; // Decreases value of x by 1

++x; // Increase value of x by 1

These operators can also be used increment and decrement a value after an expression as been performed. Suppose you have a varable x which has been assigned a value of 5. You want to add the value of x to a varable called y and then decrement x by 1. One way to do this is as follows:

var x = 5;
var y = 10;

y = y + x; // assigns the value 15 to variable y
++x;       // adds 1 to x to make it 6

By placing the operator after the variable name the variable is automatically incremented or decremented immediately after the expression as been evaluated:

var x = 5;
var y = 10;

y = y + x++; // value of y is now 15, value of x is now 6

// Note that the above exression can be further shortened as follows:

y += x++ // value of y is now 15, value of x is now 6

As the name suggests JavaScript Comparison Operators allow you to construct an expression that compares two values and, given the type of comparison specified, returns a true or false value. For example, if you construct a comparison expression to test if two values are identical the result will be true if they are the same and false if they are different. Comparison operators are most often used in decision making during a script using the if statement which is covered in more detail in JavaScript Flow Control and Looping.

The comparison operators available in JavaScript, toghether with examples, are outlined in the following table:

Once you understand comparison operators the concept of String operators is quite straightforward. The String operators consist of the same comparison operators detailed above. In addition there is one more invaluable operator known as the concatenation operator represented by the + sign. This operator can be used to build strings by joining together multiple strings or strings and other variables.

Let's begin with a simple example using the concatenation operater to build a string from two different strings:

var myString1 = "Hello, ";
var myString2 = "how are you?";

document.write ( myString1 + myString2);

The above example declares and initializes two string variables and then concatenates them in the write statement to create output that reads "Hello, how are you?".

We can take this a step further and use concatenation using not just variables:

var myString1 = "Hello, ";
var myString2 = "how are you?";

document.write ( myString1 + " John, " + myString2);

In this example the output will read "Hello, John, how are you?"

It is also important to understand that concatenation can handle types other than strings. For example when the concatentation operator is used and it encounters a number it will convert that number to a string and join it to the string. For example:

document.write ( "You are visitor number " + 10 );

will output the message "You are visitor number 10". Note, however, that when an expresion contains only one type of operator (i.e only the + operator - see the "Operator Precendence" below for handling expressions with mixed operators) JavaScript evaluates the expression from left to right. So, if it encounters numbers before it encounters a string it will assume that it has found an arithmetic + rather than a string concatenation +. For example:

document.write ( 10 + 5 + " is my lucky number" );

will cause javaScript to add 10 to 5 to get 15, and then concatenate it with the string to provide a string that reads "15 is my lucky number". Once the string has been encountered in the expression all other + operators are converted to strings and concatenated. In the following example once the string has been found the following operands (i.e the 6 and 1 are converted to strings and joined to the end of the string:

document.write ( 10 + 5 + " is my lucky number. So is " + 6 + 1);

The output from the above will read "15 is my lucky number. So is 61". JavaScript also evaluates expressions from the inner parenthesese to outer parentheses. If you need to perform a calculation after a string appears in an expression, therefore, all you need to do is put ( and ) around the arithemtic expression so that it gets evaluated before the string concatenation:

document.write ( 10 + 5 + " is my lucky number. So is " + (6 + 1));

Remembering that JavaScript will evaluate the expression in the inner parenthesese first we see that it will calculate the value of (6 + 1) before the rest of the expression is evaluated. This will be calculated to be 7 and stored. The rest of the expression will then be evaluated, and then the value 7 will be convered to a string (because it appears to the right of the "my lucky number" value) to create a string that reads "15 is my lucky number. So is 7".

JavaScript uses something called a ternary operator to provide a shortcut way of making decisions in a script. The syntax of the ternary operator is as follows:

[condition]?[true expression]:[false expression]

The way this works is that [condition] is replaced with an expression that will return either true or false. If the result is true then the expression that replaces the [true expression] is evaluated. Conversely, if the result was false then the [false expression] is evaluated. Let's see this in action:

var myResult = (x > y) ? x-- : x++;

In the above example if x is greater than y then the value of x will be decreased by 1. If the x is less than y then the value of x will be increased by 1.

Logical Operators are also known as Boolean Operators because they evaluate parts of an expression and return a true or false value.

Perhaps the best way to understand how logical operators work is to construct a sentence rather than to look at a script example right away. Let's assume we want to check some aspect of two variables named x and y. Our sentence might read:

If x is less than 10 AND y is greater than 20 display a message.

Here the logical operator is the "AND" part of the sentence. If we were to express this in JavaScript we would use the comparision operators we covered earlier together with the && logical operator:

if ((x < 10) && (y > 20)
document.write ("Message");

Similarly if our sentence read:

If x is less than 10 OR y is greater than 20 display a message.

Then we would replace the "OR" with the JavaScript equavalent ||:

if ((x < 10) || (y > 20)
document.write ("Message");

The final Logical Operator is the NOT operator which simply inverts the result of an expression. The ! character represents the NOT operatoer and can be used as follows:

(10 > 1)        // returns ''true''

!(10 > 1)       // retruns ''false'' because we have inverted the result with the logical NOT

== Operator Precedence ==

When using expressions that containing a mixture of operators it is important to be aware that the expression is evaluated in a particular order depending on operator priority. This priority order is outlined in the following table which lists operators from highest priority to lowest:

<table border="1">
<tr>
<th>Operator<th>Description<th>Priority</th>
<tr>
<td>* / % <td>Multiplication, Division, Modulus<td>Highest</td>
<tr>
<td>+ - <td>Addition, Subtraction<td></td>
<tr>
<td><< >> >>><td>Bitwise Shift<td></td>
<tr>
<td>< <= > >=<td>Comparison<td></td>
<tr>
<td>== !=<td>Equality<td></td>
<tr>
<td>&&<td>Logical AND<td></td>
<tr>
<td>||<td>Logical OR<td></td>
<tr>
<td>?:<td>Conditional<td></td>
<tr>
<td>= += -= *= /= %=<td>Assignment<td></td>
<tr>
<td>,<td>Comma<td>Lowest</td>
<table>

Given the above table then clearly the following expression will multiply x by before adding the result to z because the multiplication operate has a higher precedence than the addition operator:

<pre>

k = z + x * y;

The use of parentheses can be used to increase the precendence of part of an expression. For example if we put parentheses around the addition in the expression from above that part of the expression will be evaluated first. In the following example:

k = (z + x) * y;

z will be added to x and the result will then be multiplied by y.