JavaScript supports the following types of operators:
- Arithmetic
- Assignment
- Comparison
- Logical
- Bitwise
- Ternary
- typeof, instanceof
Arithmetic operator list:
| Operator | Type | Description |
| + | Arithmetic | Addition |
| – | Arithmetic | Subtraction |
| * | Arithmetic | Multiplication |
| / | Arithmetic | Division |
| % | Arithmetic | Modulus |
| ++ | Arithmetic | Increment |
| — | Arithmetic | Decrement |
below is the sample code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 10; let y = 5; let addition = x + y; console.log("Addition: " + addition); // Output: Addition: 15 let subtraction = x - y; console.log("Subtraction: " + subtraction); // Output: Subtraction: 5 let multiplication = x * y; console.log("Multiplication: " + multiplication); // Output: Multiplication: 50 let division = x / y; console.log("Division: " + division); // Output: Division: 2 let modulus = x % y; console.log("Modulus: " + modulus); // Output: Modulus: 0 x++; console.log("Increment: " + x); // Output: Increment: 11 y--; console.log("Decrement: " + y); // Output: Decrement: 4 </script> </body> </html> |
Output:
Assignment operator List:
| Operator | Type | Description | |
| = | Assignment | Assignment | |
| += | Assignment | Addition Assignment | |
| -= | Assignment | Subtraction Assignment | |
| *= | Assignment | Multiplication Assignment | |
| /= | Assignment | Division Assignment | |
| %= | Assignment | Modulus Assignment |
example code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 10; let y = 20; x += y; console.log(x); // 30 x -= y; console.log(x); // 10 x *= y; console.log(x); // 200 x /= y; console.log(x); // 10 x %= y; console.log(x); // 10 </script> </body> </html> |
Console Output:
Comparison operator List:
| Operator | Type | Description |
| == | Comparison | Equal to |
| === | Comparison | Strict Equal to |
| != | Comparison | Not Equal to |
| !== | Comparison | Strict Not Equal to |
| > | Comparison | Greater Than |
| < | Comparison | Less Than |
| >= | Comparison | Greater Than or Equal to |
| <= | Comparison | Less Than or Equal to |
example code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 10; let y = 20; console.log(x == y); // false console.log(x === y); // false console.log(x != y); // true console.log(x !== y); // true console.log(x > y); // false console.log(x < y); // true console.log(x >= y); // false console.log(x <= y); // true </script> </body> </html> |
output would be as mentioned in code comments.
Note: check console log for output
Logical operator List
| Operator | Type | Description |
| && | Logical | Logical And |
| ||
| ! | Logical | Logical Not |
example code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 10; let y = 20; console.log(x > 0 && y > 0); // true console.log(x > 0 || y > 0); // true console.log(!(x > 0)); // false </script> </body> </html> |
Output: In the above code, the && operator returns true if both operands are true, otherwise it returns false. The || operator returns true if either operand is true, otherwise it returns false. The ! operator returns true if the operand is false, and false if the operand is true.
Note: check console log for output
Bitwise operator List
| Operator | Type | Description |
| & | Bitwise | Bitwise And |
| Bitwise | |
| ^ | Bitwise | Bitwise Xor |
| ~ | Bitwise | Bitwise Not |
Example Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 5; let y = 3; console.log(x & y); // 1 console.log(x | y); // 7 console.log(x ^ y); // 6 console.log(~x); // -6 </script> </body> </html> |
In the above code:
- The & operator performs a bitwise AND operation.
- The | operator performs a bitwise OR operation.
- The ^ operator performs a bitwise XOR operation.
- The ~ operator performs a bitwise NOT operation.
Note: check console log for output
Ternary operator list
| Operator | Type | Description |
| ? | Ternary | Ternary operator |
| : | Ternary | Ternary operator |
Example Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 10; let y = 20; let result = x > y ? "x is greater" : "y is greater"; console.log(result); // "y is greater" </script> </body> </html> |
In the above code, the Ternary operator ? : is used to assign a value to result based on the comparison between x and y. If x > y is true, result is assigned the value of “x is greater”.
If x > y is false, result is assigned the value of “y is greater”.
Note: check console log for output
typeof, instanceof operator List
| Operator | Type | Description |
| typeof | Unary | Type of operator |
| instanceof | Relational | Instanceof operator |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> let x = 10; let y = "hello world"; let z = [1, 2, 3]; console.log(typeof x); // "number" console.log(typeof y); // "string" console.log(typeof z); // "object" console.log(z instanceof Array); // true console.log(y instanceof Array); // false </script> </body> </html> |
In the above code, the typeof operator returns a string indicating the type of the operand.
The instanceof operator returns true if the object on the left is an instance of the type specified on the right.
In the code above, z is an instance of the Array type, so z instanceof Array returns true. On the other han
Note: check console log for output