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
• Boolean Operators

Contents

Assignment 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:

Combined Operator	Equivalent
x += y	x = x + y
x -= y	x = x - y
x /= y	x = x / y
x *= y	x = x * y
x %= y	x = x % y

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)

Arithmetic Operators

As you might expect, arithmetic operators perform mathematical calculations on both values, and the values assigned to variables. JavaScript arithmetic operators consis of a value to the right and left of the operator. For example:

y = 2 + 5;

adds the value of 2 to the value of 5 and assigns the result (7 in this case) 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:

Operator	Description
+	Addition - Adds values on either side of the operator
-	Subtraction - Subtracts right hand value from left hand value
*	Multiplication - Multiplies values on either side of the operator
/	Division - Divides left hand value by right hand value
%	Modulus - Divides left hand value by right hand value and returns remainder

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 fo 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

Comparison Operators

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:

Operator	Description	Example
==	Equal operator - retuns true if both operands are equal.	x == 6 returns true if x is 6
!=	Not-equal operator - returns true if operands are not equal.	x != 6 returns true if x is not 6
<	Less-than operator - returns true if the left hand operand is less than the right hand operand.	x < 6 returns true if x is less than 6
>	Greater-than operator - returns true if the left hand operand is greater than the right.	x > 6 returns true if x is greater than 6
>=	Greater-than or equal operator - returns true if the left hand operand is greater than, or equal to the right.	x >= 6 returns true if x is either 6, or greater than 6
<=	Less-than or equal operator - returns true if the left hand operand is less than, or equal to the right.	x <= 6 returns true if x is either equal to 6, or less than 6