Operators
JavaScript comes with operators for various operations. This section discusses those operators.
Arithmetic 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.
Assignment Operators
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
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.
Logical Operators
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
Conditional Operator
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);