In JavaScript, an operator is a symbol used to perform operations on operands (numbers, values or variables). for example,
2+3; //5
Here + is an operator that perform addition, and 2 and 3 are operands.
JavaScript Operator Types
Here is a list of different operators you will learn in this blog.
- Assignment Operators
- Arithmetic Operators
- Comparison Operators
- Logical Operators
- Bitwise Operators
- String Operators
- Conditional (ternary) Operator
- Comma Operator
- Unary Operator
- Relational Operators
Assignment and Arithmetic Operators
| Operator | Description | Example | Explanation |
|---|---|---|---|
| = | Assignment | x = 5; | Assigns the value 5 to the variable x. |
| += | Addition assignment | x += 3; | Adds 3 to the current value of x and assigns the result back to x. |
| -= | Subtraction assignment | x -= 2; | Subtracts 2 from the current value of x and assigns the result back to x. |
| *= | Multiplication assignment | x *= 4; | Multiplies the current value of x by 4 and assigns the result back to x. |
| /= | Division assignment | x /= 2; | Divides the current value of x by 2 and assigns the result back to x. |
| %= | Modulus (remainder) assignment | x %= 3; | Calculates the remainder when x is divided by 3 and assigns it to x. |
| <<= | Left shift assignment (for binary values) | x <<= 2; | Shifts the binary representation of x two positions to the left. |
| >>= | Right shift assignment (for binary values) | x >>= 1; | Shifts the binary representation of x one position to the right. |
| &= | Bitwise AND assignment | x &= 7; | Performs a bitwise AND operation with x and 7, then assigns the result to x. |
| |= | Bitwise OR assignment | `x | = 4;` |
| ^= | Bitwise XOR assignment | x ^= 6; | Performs a bitwise XOR operation with x and 6, then assigns the result to x. |
- Left shift assignment (`<<=`) in programming shifts the binary representation if a value to the left by a specific number of positions and assigns the result back to the variable, effectively multiplying it by 2 raised to the power.
let x = 5; // Binary representation of 5 is 00000101
x <<= 2; // Left shift x by 2 positions
console.log(x); // Output will be 20
- Right shift assignment (
>>=) in programming shifts the binary representation of a value to the right by a specified number of positions and assigns the result back to the variable, effectively dividing it by 2 raised to that power.
x >>= 2; // Left shift x by 2 positions
console.log(x); // Output will be 5
Comparison Operators
Comparison operators are used in programing to compare two values and determine the relationship between them. these operators return a Boolean value (either true or false) based on whether the comparison is true or false.
Comparison operators are used in programming to compare two values and determine the relationship between them. These operators return a Boolean value (either true or false) based on whether the comparison is true or false.
Here’s a table representation of common comparison operators, along with examples:
| Operator | Description | Example | Result |
|---|---|---|---|
| == | Equal to | 5 == 5 | true |
| != | Not equal to | 5 != 10 | true |
| < | Less than | 7 < 10 | true |
| > | Greater than | 7 > 10 | false |
| <= | Less than or equal to | 7 <= 7 | true |
| >= | Greater than or equal to | 7 >= 10 | false |
Logical Operators
Logical operators are used to combine and manipulate boolean values in JavaScript. They are often used in conditional statements and decision-making to control the flow of the program based on multiple conditions.
| Operator | Description | Example | Result |
|---|---|---|---|
| && | Logical AND | (5 > 3) && (10 < 20) | true |
| || | Logical OR | (5 > 10) || (10 < 20) | true |
| ! | Logical NOT | !(5 > 3) | false |
Bitwise Operators
Bitwise operators are often used for low-level manipulation of binary data, optimization, and in some specific algorithms where bit-level operations are required.
| Operator | Description | Example | Result (in decimal) |
|---|---|---|---|
| & | Bitwise AND | (5 & 3) | 1 |
| | | Bitwise OR | (5 | 3) | 7 |
| ^ | Bitwise XOR | (5 ^ 3) | 6 |
| ~ | Bitwise NOT (One’s Complement) | (~5) | -6 |
| << | Bitwise Left Shift | (5 << 2) | 20 |
| >> | Bitwise Right Shift | (5 >> 2) | 1 |
| >>> | Bitwise Right Shift (unsigned) | (-5 >>> 2) | 1073741822 |
String Operators
In JavaScript, string operators are used for manipulating and combining strings. Here’s a table representation of common string operators in JavaScript, along with examples:
| Operator | Description | Example | Result |
|---|---|---|---|
| + | Concatenation | “Hello, ” + “world!” | “Hello, world!” |
| += | Concatenation Assignment | let greeting = “Hello, “; greeting += “world!”; | greeting = “Hello, world!” |
+= (template literal) | Concatenation Assignment with Template Literal | let name = “John”; let greeting = Hello, ${name}!; | greeting = “Hello, John!” |
| [] | Accessing Characters by Index | let str = “JavaScript”; str[0] | “J” |
| .length | String Length | let str = “Hello, world!”; str.length | 13 |
Conditional (ternary) Operator
The conditional operator, also known as the ternary operator, is a concise way to write conditional expressions in JavaScript. It allows you to evaluate a condition and return one of two values based on whether the condition is true or false. Here’s a table representation of the conditional operator in JavaScript, along with an example:
let age = 25;
let isAdult = (age >= 18) ? "Yes" : "No";
console.log(isAdult); // "Yes" because age is greater than or equal to 18
Comma Operator
The comma operator in JavaScript is used to evaluate multiple expressions in sequence and return the value of the last expression. It is often used in situations where multiple expressions need to be executed, but only the result of the last expression matters. The syntax is as follows:
expression1, expression2, expression3, ...;
Here’s an example of how the comma operator works:
let a = 5, b = 10, c = 15;
let result = (a++, b++, c++);
console.log(result); // 15 (the value of the last expression)
console.log(a, b, c); // 6 11 16 (all variables were incremented)
Unary Operators
Unary operators in JavaScript are operators that perform operations on a single operand. Here’s a table representation of common unary operators in JavaScript, along with examples:
| Operator | Description | Example | Result |
|---|---|---|---|
+ | Unary Plus | let num = +5; | num is 5 |
- | Unary Negation | let negNum = -5; | negNum is -5 |
++ | Increment | let x = 5; x++; | x is 6 |
-- | Decrement | let y = 10; y--; | y is 9 |
! | Logical NOT | let isTrue = true; let isFalse = !isTrue; | isFalse is false |
typeof | Typeof Operator | let dataType = typeof "Hello"; | dataType is "string" |
delete | Delete Operator | let obj = { prop: "value" }; delete obj.prop; | obj.prop is undefined |
Relational Operators:
Relational operators in JavaScript are used to compare two values and return a Boolean result. Here’s a table representation of common relational operators:
| Operator | Description | Example | Result |
|---|---|---|---|
== | Equal to | 5 == “5” | true |
!= | Not equal to | 5 != “10” | true |
=== | Strict equal to | 5 === 5 | true |
!== | Strict not equal to | 5 !== “5” | true |
< | Less than | 5 < 10 | true |
> | Greater than | 10 > 5 | true |
<= | Less than or equal | 5 <= 5 | true |
>= | Greater than or equal | 10 >= 5 | true |