JavaScript comes with operators for various operations. This section discusses those operators.
These are probably the most often used operators. I’ll use examples to explan them. Here is the first example.
var result; var a = 5; var b = 17; var c = "some string"; var d = "another string"; result = a + b; // Addition document.write("The result of addition is " + result); result = a - b; // Substraction document.write("<br/>The result of subtraction is " + result); result = a * b; // Multiplication document.write("<br/>The result of multiplication is " + result); result = b / a; // Division document.write("<br/>The result of division is " + result); result = b % a; // Modulus document.write("<br/>The division remainder is " + result); // Increment document.write("<br/>The incremented value of a is " + ++a); // Another way to increment a value document.write("<br/>The value of a is " + a++); document.write("<br/>And now it is " + a); /* And two ways to decrement a value (this also demonstrates a different kind of comment)*/ document.write("<br/>Decremented b: " + --b); document.write("<br/>Another way, b = " + b--); document.write("<br/>And now b is " + b); // Concatenating strings document.write("<br/>Concatenating strings: " + c + d); document.write("<br/>Same with an integer: " + b + c);
Here is the result you should see on your browser:
The result of addition is 22 The result of subtraction is -12 The result of multiplication is 85 The result of division is 3.4 The division remainder is 2 The incremented value of a is 6 The value of a is 6 And now it is 7 Decremented b: 16 Another way, b = 16 And now b is 15 Concatenating strings: some stringanother string Same with an integer: 15some string
Everything is simple with addition, subtraction, multiplication and division. The modulus operator is also straightforward if you know what it does. It produces a remainder of division.
The increment and decrement operators are a little bit tricky because they can be used in two ways. If you put the operator before the variable, as in ++aand --b, the variable is first incremented or decremented, and then used in the expression (in our case it is displayed on the web page).
But if you put the operator after the variable, like this: a++, b--, then the variable’s value first used in the expression and only after that it is incremented or decremented. To understand how it works, have a look at the code examples and their results.
If the addition operator is used for strings, these strings are joined together (concatenated). And, even if only one of the operands is a string, all the other operands are also treated as strings. In fact, we were using this concatenation operator in many of our examples, like this:
document.write("myVar is an integer: " + myVar);
Two types of comment are also shown in this example. One of them, double slash, makes a comment everything which goes on the right of it in the same line.
Another way to write a comment, most useful for multiline comments, is the combination of /* and */ symbols. Everything which goes in between them is a comment.
The basic assignment operator is very simple, it evaluates the expression on the right hand side and assigns the resulting value to the variable on the left hand side. For example, in this statement:
a = 3 + 4;
the expression on the right hand side is evaluated, which produces 7, and then this result is stored in variable a.
The other versions of the assignment operator look a little strange, but are really convenient in many cases. It is easier to explain how they work with an example:
a += b is the same as a = a + b a -= b is the same as a = a – b a *= b is the same as a = a * b; a /= b is the same as a = a / b; a %= b is the same as a = a % b
Comparison operators are used to compare two values and returns a boolean value, i.e. true or false. As you will see it shortly, they are normally used in looping and conditional constructs in JavaScript.
To see how these operators work, run the following script:
// Equality document.write("5 == 5 returns " + (5 == 5)); document.write("<br/> 7 == 3 returns " + (7 == 3)); document.write("<br/> '5' == 5 returns " + ('5' == 5)); // Strict equality document.write("<br/> 5 === 5 returns " + (5 === 5)); document.write("<br/> 7 === 3 returns " + (7 === 3)); document.write("<br/> '5' === 5 returns " + ('5' === 5)); // Not equal document.write("<br/> 10 != 1 returns " + (10 != 1)); document.write("<br/> 5 != 5 returns " + (5 != 5)); // Greater than and less than document.write("<br/> 10 > 1 returns " + (10 > 1)); document.write("<br/> 10 < 1 returns " + (10 < 1)); // Greater than or equal, less than or equal document.write("<br/> 10 >= 10 returns " + (10 >= 1)); document.write("<br/> 10 <= 11 returns " + (10 <= 11));
Here is the result.
5 == 5 returns true 7 == 3 returns false '5' == 5 returns true 5 === 5 returns true 7 === 3 returns false '5' === 5 returns false 10 != 1 returns true 5 != 5 returns false 10 > 1 returns true 10 < 1 returns false 10 >= 10 returns true 10 <= 11 returns true
Everything should be pretty obvious here, except for the === (strict equality) operator, which checks the equality of both the value and the type. Two strings can be equal to each other, as can two numbers. But a string and a number cannot be equal, with this operator.
There are only three of them, && (logical AND), | | (logical OR) and ! (logical NOT). Again, it will be easier to just demonstrate how they work with an example. Try the following code in your browser:
// && operator which means AND // Returns true if both conditions are true document.write("(5 > 3) && (7 > 1) returns " + ((5 > 3) && (7 > 1))); document.write("<br/> (5 > 3) && (7 < 1) returns " + ((5 > 3) && (7 < 1))); // || operator which means OR // Returns true if at leas one of the conditions is true document.write("<br/> (5 > 3) || (7 > 1) returns " + ((5 > 3) || (7 > 1))); document.write("<br/> (5 > 3) || (7 < 1) returns " + ((5 > 3) || (7 < 1))); document.write("<br/> (5 < 3) || (7 < 1) returns " + ((5 < 3) || (7 < 1))); // ! operator which means NOT // Changes true to false and vice versa document.write("<br/> !(7 > 1) returns " + !(7 > 1)); document.write("<br/> !(7 < 1) returns " + !(7 < 1));
The result should look like this:
(5 > 3) && (7 > 1) returns true (5 > 3) && (7 < 1) returns false (5 > 3) || (7 > 1) returns true (5 > 3) || (7 < 1) returns true (5 < 3) || (7 < 1) returns false !(7 > 1) returns false !(7 < 1) returns true
The syntax of the conditional operator is as follows.
aVariable = (condition)? value1: value2
If condition is true then value1 is assigned to aVariable. Otherwise, value2 is assigned to aVariable.
Now, try this.
var t = -5; var weather; weather = (t > 10)? "warm": (t >= 0)? "cold" : "freezing!"; document.write(weather);