News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

JavaScript Tutorial – 04 – Operators

JavaScript tutorials

JavaScript basically has five kinds of numerical operators.

Arithmetic operators

First, there are the four basic arithmetic operations, together with modulus to gets the division remainder.

x = 4+2; // 6 // addition
x = 4-2; // 2 // subtraction
x = 4*2; // 8 // multiplication
x = 4/2; // 2 // division
x = 4%2; // 0 // modulus (division remainder)

Assignment operators

Second, there are the assignment operators. Most importantly, the equal sign itself which assigns a value to a variable.

Combined assignment operators

The combined assignment operators perform arithmetic operations on the same variable that they assign to.

x += 5; // add and assign
x -= 5; // subtract and assign
x *= 5; // multiply and assign
x /= 5; // divide and assign
x %= 5; // modulus and assign

Increment and decrement operators

The increment and decrement operators increase or decrease a variable by one.

x++; // x += 1;
x--; // x -= 1;

They can be used either before or after a variable.

++x; // pre-increment
--x; // pre-decrement     
x++; // post-increment
x--; // post-decrement

The post and pre versions of the operators have the same effect on the variable. The difference is that the post-operator returns the original value before it changes the variable, while the pre-operator changes the variable first and then returns it.

x = 5; y = x++; // y=5, x=6
x = 5; y = ++x; // y=6, x=6

Comparison operators

The third group is the comparison operators, which compares two values and return either true or false. They are mostly used for creating conditions in flow control statements. Notice the “identical” and “not identical” operators for comparing both type and value. These are necessary because with the regular “equal to” operator will automatically perform a type conversion before it compares.

x = (2==3);  // false // equal to
x = (2===3); // false // identical (same type and value)
x = (2!==3); // true  // not identical
x = (2!=3);  // true  // not equal to
x = (2>3);   // false // greater than
x = (2<3);   // true  // less than
x = (2>=3);  // false // greater than or equal to
x = (2<=3);  // true  // less than or equal to

Logical operators

The fourth group is the logical or boolean operators. These are usually used together with the comparison operators. Logical and returns true if the expressions on both sides are true. Logical or returns true if the left or right sides are true. Logical not simply inverts a boolean value. Note that logical and/or will not evaluate what is on the right side if the result is already decided by the left side.

x = (true && false);  // false // logical and
x = (true || false);  // true  // logical or
x = !(true);          // false // logical not

Bitwise operators

The fifth and last group is the bitwise operators which work on the binary representation of numbers. Notice that there are two right shift operators. The first one (>>) leaves the sign bit untouched, while the second one (>>>) shifts is to the right as with the other bits. Both operators evaluate the same for positive numbers.

x = 5 & 4;  // 4 (101 & 100 = 100) // and
x = 5 | 4;  // 5 (101 | 100 = 101) // or 
x = 5 ^ 4;  // 1 (101 ^ 100 = 001) // xor (exclusive or)
x = 4 << 1; // 8 (100 << 1  =1000) // shift left
x = 4 >> 1; // 2 (100 >> 1  = 010) // shift right (!sign)
x = 4 >>> 1;// 2 (100 >>> 1 = 010) // shift right     
x = ~4;     //-5 (~00000100 = 11111011) // invert

The bitwise operators also have their own combined assignment operators.

x  &= 5; // AND and assign
x  |= 5; // OR and assign
x  ^= 5; // XOR and assign
x <<= 5; // left shift and assign
x >>= 5; // right shift and assign (keeps sign bit)
x>>>= 5; // right shift and assign

String operators

There are only two operators that work on strings. First, the addition operator which can combine two strings together. Second, the combined assignment operator for addition can append one string to the end of a string variable.

x = "Hello";      // assignment
x = x + " World"; // concatenation
x += " World";    // concatenate and assign

Another usage for the addition operator is to convert strings into numbers. This is done by putting the addition sign just before the string.

document.write( "5" + 5); // 55
document.write(+"5" + 5); // 10

Operator precedence

In JavaScript, expressions are normally evaluated from left to right. However, different operators have different precedents. For example, multiplication binds harder than addition and is therefore evaluated first.

x = 2 + 1 * 2; // 4

To avoid ambiguous expressions, like the one above, parenthesis can be used to decide the order of evaluation. The parenthesis has the highest precedence of all operators.

x = (2 + 1) * 2; // 6
Recommended additional reading:
Sams - Teach Yourself JavaScript in 24 Hours