Javascript Operators Tutorial
In this Javascript tutorial we learn about operators. Symbols that have a special meaning to the translator and are able to perform various operations on our code.
We cover operands, lvalues and rvalues. We also cover arithmetic, assignment, relational (comparison), logical, incremental and decremental operators.
Finally we take a brief look at the ternary conditional operator ( ? : ) and the typeof operator.
What is an operator
An operator is one or more symbols that have a special meaning, in certain contexts, to the Javascript translator.
For example, the + symbol is the addition operator and will perform addition arithmetic on two numeric values.
The following types of operators are available in Javascript.
- Arithmetic operators
- Assignment operators
- Relational (Comparison) operators
- Logical operators
- Ternary conditional operator
- Other operators
You don’t need to memorize the following operators, we will cover most of them throughout the course. It’s sufficient to only know what they’re for, for the moment.
Operands, Lvalues & Rvalues
There are two kinds of expressions in Javascript, Lvalues and Rvalues. Lvalues and Rvalues are also known as the left operand and the right operand respectively, or operands in general.
An lvalue is the operand that can have a value assigned to it. It’s allowed to appear on either the left or the right side of an assignment.
// lvalue (num1) may be
// on the left of the =
var num1 = 10;
// lvalue may also be on
// the right of the =
var num2 = num1;An rvalue is the operand that cannot be assigned a value. It may only appear on the right side of an assignment.
// rvalue (10) may only
// be on the right of the =
var num1 = 10;
// an rvalue cannot be
// on the left of the =
10 = 10Arithmetic operators
Arithmetic operators allow basic mathematical arithmetic to be performed on operands.
The following table lists the arithmetic operators available in Javascript.
| Operator | Description |
|---|---|
| + | Add the right operand to the left operand. |
| * | Multiply the left operand with the right operand. |
| / | Divide the left operand by the right operand. |
| % | Modulo. Divide the left operand by the right operand and return the remainder of the division. |
Assignment operators
An assignment operator is used to assign the operand on the right, to the operand on the left.
The following table lists the assignment operators available in Javascript.
| Operator | Description | Example | Same as |
|---|---|---|---|
| = | Assign | a = b | a = b |
| += | Add and assign | a += b | a = a+b |
| -= | Subtract and assign | a -= b | a = a-b |
| *= | Multiply and assign | a *= b | a = a* b |
| /= | Divide and assign | a /= b | a = a/b |
| %= | Modulo and assign | a %= b | a = a%b |
Relational (comparison) operators
Relational operators evaluate the relationship between operands and are primarily used in conditional and iteration control flow.
The following table lists the relational operators available in Javascript.
| Operator | Description | Example |
|---|---|---|
| == | Equal to | 1 == 1 is true |
| === | Equal to value and type | "one" === 1 is false |
| > | Greater than | 2 > 1 is true |
| < | Less than | 3 < 1 is false |
| != | Not equal to | 2 != 3 is true |
| !=== | Not equal to value and type | "two" !== 2 is true |
| >= | Greater than or equal to | 2 >= 1 is true |
| <= | Less than or equal to | 5 <= 5 is true |
Logical operators
Logical operators are used to combine conditional evaluations. The result is either true or false.
The following table lists the logical operators available in Javascript.
| Operator | Name | Description |
|---|---|---|
| && | And | Returns true if both expressions evaluate to true. |
| || | Or | Returns true if one or the other expression evaluate to true. |
| ! | Not | Returns true if the expression immediately following it not true. |
Increment (unary) operators
Incremental operators are used to increase a value incrementally, and decremental operators are used to decrease a value. These operators are what is known as unary operators and as such only require one operand.
The following table lists incremental and decremental operators available in Javascript.
| Operator | Name | Description |
|---|---|---|
| ++a | Pre-increment | Increment by one, then return a. |
| a++ | Post-increment | Return a, then increment by one. |
| --a | Pre-decrement | Decrement by one, then return a. |
| a-- | Post-decrement | Return a, then decrement by one. |
TypeOf (unary) operator
The typeof operator is another unary operator that evaluates if a value is of a certain data type. The typeof operator is placed before an operand and the result will be a string indicating the type.
Here is a list of the return values for the typeof operator in Javascript.
| Type | String returned |
|---|---|
| Number | "number" |
| String | "string" |
| Boolean | "boolean" |
| Object | "object" |
| Function | "function" |
| Undefined | "undefined" |
| Null | "object" |
<script>
var br = "<br>";
var num = 10;
var str = "Hello World";
var auth = true;
document.write("num = ", typeof num);
document.write(br);
document.write("str = ", typeof str);
document.write(br);
document.write("auth = ", typeof auth);
</script>Ternary conditional operator (? :)
The ternary operator is a conditional operator that functions as a replacement for a conditional if/else expression with only single execution statements.
| Operator | Description |
|---|---|
| ? : | Replaces a simple conditional if/else statement. |
var num = 10;
if (num > 5) {
document.write(num, " > 5");
} else {
document.write(num, " < 5");
}The normal if/else statement in the example above, will become the following expression when converted to a ternary.
var num = 10;
num > 5 ? document.write(num, " > 5") : document.write(num, " < 5");We look at the ternary operator again in the lesson on conditional control with if/else statements.
Summary: Points to remember
- There are two types of expressions in Javascript, lvalues and rvalues.
- An lvalue may be placed on both sides of the assignment operator.
- An rvalue may only be placed on the right side of the assignment operator.