JavaScript Operators
About JavaScript Operators
JavaScript operators are symbols or keywords that are used to perform operations on variables and values (operands).
They are fundamental building blocks in JavaScript for manipulating data, making decisions, and controlling program flow.
Categories of JavaScript operators, based on the types of operations they perform, are as follows:
- Arithmetic Operators
- Assignment Operators
- Comparison Operators
- Logical Operators
- Bitwise Operators
- String Operators
- Ternary Operator (Conditional Expression)
- Type Operators
- Unary Operators
- Spread and Rest Operators (...)
- Nullish Coalescing Operator (??)
- Optional Chaining (?.)
Arithmetic Operators
In JavaScript, arithmetic operators are used to perform mathematical operations on numerical values.
Arithmetic operators are:
- Addition (+): Adds two operands.
- Subtraction (-): Subtracts the second operand from the first.
- Multiplication (*): Multiplies two operands.
- Division (/): Divides the first operand by the second.
- Modulus (%): Returns the remainder of the division of the first operand by the second.
- Exponentiation (**): Raises the first operand to the power of the second operand.
- Increment (++): Increases the value of a variable by 1.
- Decrement (--): Decreases the value of a variable by 1.
Arithmetic operators with examples are shown in the following table:
| Arithmetic operators with examples | |||
|---|---|---|---|
| Operator Symbol | Operator Name | Example | Results |
| + | Addition | 5 + 8 | 13 |
| - | Subtraction | 8 - 5 | 3 |
| * | Multiplication | 8 * 5 | 40 |
| / | Division | 40 / 5 | 8.0 |
| % | Modulus | 11 % 5 | 1 |
| ** | Exponentiation | 5 ** 2 | 25 |
| ++ | Increment | let x = 5; x++; |
6 |
| -- | Decrement | let x = 5; x--; |
4 |
Assignment Operators
In JavaScript, assignment operators are used to assign values to variables.
Assignment operators are:
- Simple Assignment (=): Assigns the value on the right to the variable on the left.
- Addition Assignment (+=): Adds the value on the right to the variable on the left and assigns the result to the variable.
- Subtract Assignment (-=): Subtracts the value on the right from the variable on the left and assigns the result to the variable.
- Multiplication Assignment (*=): Multiplies the variable on the left by the value on the right and assigns the result to the variable.
- Division Assignment (/=): Divides the variable on the left by the value on the right and assigns the result to the variable.
- Modulus/Remainder Assignment (%=): Computes the modulus(remainder) of the variable on the left with the value on the right and assigns the result to the variable.
- Exponentiation Assignment (**=): Raises the variable on the left to the power of the value on the right and assigns the result to the variable.
Assignment operators with examples are shown in the following table:
| Assignment operators with examples | |||
|---|---|---|---|
| Operator Symbol | Operator Name | Example | Equivalent to |
| = | Simple Assignment | x = 5 | x = 5 |
| += | Addition Assignment | x += 3 | x = x + 3 |
| -= | Subtract Assignment | x -= 2 | x = x - 2 |
| *= | Multiplication Assignment | x *= 3 | x = x * 3 |
| /= | Division Assignment | x /= 5 | x = x / 5 |
| %= | Modulus Assignment | x %= 2 | x = x % 2 |
| **= | Exponentiation Assignment | x **= 2 | x = x ** 2 |
Comparison Operators
In JavaScript, comparison operators are used to compare two operands and return a boolean value (true or false).
Comparison operators are:
- Equal to (==): Checks if the values of two operands are equal.
- Strict equal to (===): Checks if the values of two operands are equal in both value and data type.
- Not equal to (!=): Checks if the values of two operands are not equal.
- Strict not equal to (!==): Checks if the values of two operands are not equal in consideration of both the value and the data type.
- Greater than (>): Checks if the value of the left operand is greater than the value of the right operand.
- Less than (<): Checks if the value of the left operand is less than the value of the right operand.
- Greater than or equal to (>=): Checks if the value of the left operand is greater than or equal to the value of the right operand.
- Less than or equal to (<=): Checks if the value of the left operand is less than or equal to the value of the right operand.
Comparison operators with examples are shown in the following table:
| Comparison operators with examples | |||
|---|---|---|---|
| Operator Symbol | Operator Name | Example | Example Result |
| == | Equal to | 5 == 8 | false |
| === | Strict equal to | 5 === "5" | false |
| != | Not equal to | 8 != 5 | true |
| !== | Strict not equal to | "5" !== 5 | true |
| > | Greater than | 8 > 5 | true |
| < | Less than | 8 < 5 | false |
| >= | Greater than or equal to | 8 >= 5 | true |
| <= | Less than or equal to | 5 <= 8 | true |
Logical Operators
In JavaScript, logical operators are used to perform logical operations on boolean values.
Logical operators are:
- Logical and (&&): Returns true if both operands are true, otherwise returns false.
- Logical or (||): Returns true if at least one operand is true, otherwise returns false.
- Logical not (!): Returns true if the operand is false, and false if the operand is true.
Logical operators with examples are shown in the following table:
| Logical operators with examples | |||
|---|---|---|---|
| Operator Symbol | Operator Name | Example | Returns |
| and | Logical and | 8 > 5 && 6 > 5 | true |
| or | Logical or | 5 > 7 || 6 > 9 | false |
| not | Logical not | !true | false |
Bitwise Operators
In JavaScript, bitwise operators are used to perform operations on the binary representation of numbers.
Bitwise operators are:
- Bitwise AND (&): Performs a bitwise AND operation between the corresponding bits of two operands where the result is 1 if both bits are 1; otherwise, it is 0.
- Bitwise OR (|): Performs a bitwise OR operation between the corresponding bits of two operands where the result is 1 if at least one of the bits is 1; otherwise, it is 0.
- Bitwise XOR (^): Performs a bitwise XOR (exclusive OR) operation between the corresponding bits of two operands where the result is 1 if the bits are different; otherwise, it is 0.
- Bitwise NOT (~): Performs a bitwise NOT operation on its single operand, which inverts (flips) all the bits (1 to 0 and 0 to 1).
- Left Shift (<<): Shifts the bits of the left operand to the left by a number of positions specified by the right operand filling with 0s from the right.
- Right Shift (>>): This operator shifts the bits of the left operand to the right by a number of positions specified by the right operand keeping the sign bit.
- Zero-fill Right Shift (>>>): This operator shifts the bits of the left operand to the right by a number of positions specified by the right operand filling with 0s from the left.
Bitwise operators with examples are shown in the following table:
| Bitwise operators with examples | |||
|---|---|---|---|
| Operator Symbol | Operator Name | Example | Returns |
| & | Bitwise AND | 5 & 3 | 1 |
| | | Bitwise OR | 5 | 3 | 7 |
| ^ | Bitwise XOR | 5 ^ 3 | 6 |
| ~ | Bitwise NOT | ~5 | -6 |
| << | Left Shift | 5 << 1 | 10 |
| >> | Right Shift | 5 >> 1 | 2 |
| >>> | Zero-fill Right Shift | -5 >>> 1 | 2147483645 |
String Operators
In JavaScript, string operators are used to perform operations on strings.
String operators are:
- Concatenation (+): Performs concatenation of strings, which means joining two or more strings together.
- Concatenation Assignment (+=): Appends a string to the end of an existing string.
String operators with examples are shown in the following table:
| String operators with examples | |||
|---|---|---|---|
| Operator Symbol | Operator Name | Example | Returns |
| + | Concatenation | "John " + "Donne" | "John Donne" |
| += | Concatenation Assignment | let text = "Hello"; text += " world!"; |
"Hello world!" |
Ternary Operator (Conditional Operator)
In JavaScript, ternary operator is used as the shorthand for if-else statements. It evaluates a condition and returns one of two values based on whether the condition is true or false. If the condition is true, it returns the first value; otherwise, it returns the second value.
Ternary operator is:
- Ternary operator (?): Performs as the shorthand for if-else statements.
Example
Type Operators
In JavaScript, type operators are used to return the type of an operand.
Type operators are:
- typeof: Returns type of a variable.
- instanceof: Checks if an object is an instance of a class.
Example
Unary Operators
In JavaScript, unary operators operate on a single operand.
Type operators are:
- Unary plus (+): Converts a non-number to a number.
- Unary negation (-): Converts a non-number to a number and negates it.
- delete: Deletes a property from an object.
Example
Spread and Rest Operators (...)
Spread and rest operators are:
- Spread (...): Expands elements of an array or object.
- Rest (...): Gathers multiple elements into an array or collects multiple arguments into an array within a function.
Spread Operator Example
Rest Operator Example
Nullish Coalescing Operator (??)
- Nullish Coalescing Operator (??): Returns the right-hand value if the left-hand value is null or undefined.
Example
Optional Chaining (?.)
- Optional Chaining (?.): Prevents errors when accessing properties of null or undefined.
Example
JavaScript Compiler For Live Practice
Practice the above JavaScript code in the following JavaScript Editor. Create more code with JavaScript operators in the following editor and click Execute button to check the output. The output will be displayed in JavaScript Code Output section.
JavaScript Editor