Performing Operations in JavaScript
JavaScript provides various operators that can be used to perform diferent operations according to our needs.
Arithmetic Operators
Arithmetic Operators are similar to those that are used in mathematics. Following tables lists various operators used in JavaScript:
| Operator | Description | Syntax | Example |
|---|---|---|---|
| + | addition operator | x + y + ... | 2 + 5 outputs 7 |
| - | subtraction operator | a - b - ... | 5 - 6 outputs -1 |
| * | multiplication operator | x * y * ... | 2 * 6 outputs 12 |
| / | division operator | x / y / ... | 27 / 9 outputs 3 |
| % | modulus operator is used for getting the remainder | x % y | 17 % 4 outputs 1 |
| ++ | increment operator is used to increment a value by 1 | x++ | 7++ outputs 8 |
| -- | decrement operator is used to decrement a value by 1 | x-- | 7-- outputs 6 |
Example:
<script>
var a = 10;
var b = 20;
document.write("addition:" + (a+b) + "<br />"); //output: 30
document.write("subtraction:" + (a-b) + "<br />"); //output: -10
document.write("multiplication:" + a*b + "<br />"); //output: 200
document.write("division:" + b/a + "<br />"); //output: 2
document.write("modulus:" + a%b + "<br />"); //output: 10
document.write("increment:" + (++a) + "<br />"); //output: 11
document.write("decrement:" + (--b) + "<br />"); //output: 19
</script>
Assignment Operator
'=' is known as assignment operator and is used to assign values.
Don't take this sign '=' as equality operator. You have been already using this operator.
Example:
<script> var a = 10; </script>
Shorthand Operators
Shorthand Operators are shortcut methods for performing operations and assigning it to a variable. Here is the list of shorthand operators that can be used in JavaScript:
| Operator | Description | Syntax | Output |
|---|---|---|---|
| += | This operator adds two values and assign it to the first one. | a += b | a = a + b |
| -= | This operator subtract two values and assign it to the first one. | a -= b | a = a - b |
| *= | This operator multiplies two values and assign it to the first one. | a *= b | a = a * b |
| /= | This operator divides the two values and assign it to the first one. | a /= b | a = a / b |
Example:
<script> var a = 5; var b = 6; a += b; //outputs 11 </script>
Comparison Operators
Comparison Operators are used for comparing values and is helpful in conditional statements. They always result in true or false. We will discuss conditional statements later. Table below lists the comparison operators in JavaScript:
| Operator | Description | Syntax | Example |
|---|---|---|---|
| < | returns true if first operand is less than second | a < b | 5 < 6 outputs True |
| > | returns true if first operand is greater than second | a > b | 5 > 6 outputs False |
| <= | returns true if first operand is less than or equal to second | a <= b | 5 <= 6 outputs True |
| >= | returns true if first operand is greater than or equal to second | a >= b | 5 >= 6 outputs True |
| === | Equality operator returns true if both operands are equal | a === b | 5 === 5 outputs True |
| !== | Inequality operator returns true if operands are not equal | a !== b | 5 !== 6 outputs True |
Remember that number 0 is treated as False and 1 is treated as True. Actually any number other than 0 is treated as True.
Example:
<script>
var a = 4;
var b = 5;
var c = a < b; //outputs true
document.write(c);
document.write("<br />");
var d = a > b; //outputs false
document.write(d);
document.write("<br />");
var str = "SyntaxPage" === "syntaxpage"; //outputs false
document.write(str);
</script>
Logical Operators
Logical Operators are used with conditional statements and can be used to combine two or more conditions.
| Operator | Description | Syntax | Example |
|---|---|---|---|
| && | Logical AND operator returns true if both the operands are true | a && b | true && true outputs true |
| || | Logical OR operator returns true if any of the operands is true | a || b | true || false outputs true |
| ! | Logical NOT operator works on one operator and returns it compliment. | !a | !true outputs false |
Example:
<script>
var on = true;
var off = false;
document.write(on && on); //outputs true
document.write("<br />");
document.write(on && off); //outputs false
document.write("<br />");
document.write(on || on); //outputs true
document.write("<br />");
document.write(on || off); //outputs true
document.write("<br />");
document.write(off || off); //outputs false
document.write("<br />");
document.write(!on); //outputs false
document.write("<br />");
document.write(!off); //outputs true
</script>
Note: Why don't you just change the value of on=1 and off=0 and see the result.
Bitwise Operators
Bitwise Operators works on bits of the operands and perform bit by bit operation to get the desired result. These operators work on binary representation of a number. For example, binary representation of 2 is 10.
| Operator | Description | Syntax | Example |
|---|---|---|---|
| & | bitwise and (&) operator returns 1 if both the bits of operands are 1 | a & b | 1 & 1 outputs 1 |
| | | bitwise or (|) operator returns 1 if any one bit of the operands is 1 | a | b | 1 | 0 outputs 1 |
| ~ | bitwise not (~) operator is a unary operator(that works on single bit) and returns two's compliment of a bit | ~ a | ~1 outputs -2 |
| ^ | bitwise xor (~) operator returns 1 if both the bits of the operand are different | a ~ b | 1 ~ 0 outputs 1 |
| << | left shift operator shifts the bits of an operand to the left by a specified value. No bits are dropped. | a<<2 | 7<<2 outputs 28 |
| >> | Sign Propagating Right Shift operator shifts the bits of an operand to the right by a specified value. Values shifted right are dropped off. Copies of left bit is propagated to right. Hence sign remains preserved. | a>>2 | 7>>2 outputs 1 |
| >>> | Zero Fill Right Shift operator shifts the bits of an operand to the right by a specified value. Values shifted right are dropped off. Zero is shifted from left. It doesn't preserve the sign of the bits and always return non-negative value. | a>>>2 | 7>>>2 outputs 1 |
Note: For unsigned values, sign propagating right shift and zero fill right shift operator will give the same result. Difference comes when there is a sign.
Lets discuss how bitwise operators work. Everything that computer understands is in form of 0s and 1s. Before performing bitwise operations in javascript, operands are first converted into 32-bits binary values and then comparing bits of both the operands the result is obtained. Suppose we assign a=1 and b=3. Binary value of 1 is 00000000000000000000000000000001 and that of 3 is 00000000000000000000000000000011. Now we apply bitwise AND operator (&) between a and b that is a & b. It will compare leftmost bits of a and b, 1 & 1 which results in 1. After that it will compare rightmost bits of a and b that is, 0 & 1 which results in 0. So final result is 01 that is 1.
a = 0 1 b = 1 1 --------------- output = 0 1 ---------------
Example:
<script>
document.write(1 & 3); //01 & 11 = 01 which outputs 1
document.write("<br />");
/********** 1 & 3 ******************
1 = 00000000000000000000000000000001
3 = 00000000000000000000000000000011
------------------------------------
1 = 00000000000000000000000000000001
------------------------------------
***********************************/
document.write(1 | 3); //01 | 11 = 11 which outputs 3
document.write("<br />");
/********** 1 | 3 ******************
1 = 00000000000000000000000000000001
3 = 00000000000000000000000000000011
------------------------------------
3 = 00000000000000000000000000000011
------------------------------------
***********************************/
document.write(1 ^ 3); //outputs 2
document.write("<br />");
/********** 1 ^ 3 ******************
1 = 00000000000000000000000000000001
3 = 00000000000000000000000000000011
------------------------------------
2 = 00000000000000000000000000000010
------------------------------------
***********************************/
document.write(~1); //outputs -2
document.write("<br />");
/********** 1 & 3 ******************
1 = 00000000000000000000000000000001
~1 = 11111111111111111111111111111110
= -2
***********************************/
document.write(7 << 2); //outputs 28
document.write("<br />");
/********** 7 << 2 ******************
7 = 00000000000000000000000000000111
7<<2 = 00000000000000000000000000011100
= 28
***********************************/
document.write(-7 >> 2); //outputs 28
document.write("<br />");
/********** -7 >> 2 ******************
7 = 00000000000000000000000000000111
-7= 11111111111111111111111111111000 + 1
-7= 11111111111111111111111111111001
-7>>2 = 11111111111111111111111111111110
= -2
***********************************/
document.write(-7 >>> 2); //outputs 1073741822
document.write("<br />");
/********** -7 >>> 2 ******************
-7 = 11111111111111111111111111111001
7>>>2 = 00111111111111111111111111111110
= 1073741822
***********************************/
</script>