JavaScript Operators
An operator is a symbol that is reserved for special tasks or operations. Operators are used to performing operations on the operands. The operands can be variables, numeric literals, or string literals. An operator can work on one or more than one operand.
Operators are useful for modifying data by performing operations on it. For example, if there are two variables a and b and we want to add the values of both of these variables, to do so we can use the arithmetic operator + to perform the addition operation.
JavaScript supports a rich set of operators. These operators perform a specific task and every operator has different properties. The list of operators is given below:
-
Arithmetic Operators
-
Relational Operators
-
Assignment Operators
-
Bitwise Operators
-
Logical Operators
-
String Operators
-
Ternary Operator
Let's cover each one of these types one by one and see the different operators supported in JavaScript.
JavaScript Arithmetic Operators
Arithmetic operators in JavaScript are used to perform arithmetic operations or mathematical operations like addition, subtraction, multiplication, etc. All the arithmetic operators have been listed in the table below.
| Operator |
Description |
+ |
The + operator is used to add two numeric values.
let x = 45
let y = 20
console.log(x+y) // 65
|
- |
The - operator is used to subtract numeric values.
It is also used to represent a negative number.
let x = 45
let y = -20
console.log(x-y) // 65
|
* |
The * operator is used to multiply two numeric values.
let x = 4
let y = 2
console.log(x*y) // 8
|
/ |
The / operator is used to divide two numeric values.
let x = 4
let y = 2
console.log(x/y) // 2
|
% |
The % operator is used to divide two numeric values and return the remainder of the division operation.
let x = 45
let y = 20
console.log(x%y) // 5
|
++ |
This operator is the increment operator. It is a unary operator which means it is used with a single operand. Using this operator you can add 1 to the existing value.
let a = 10
a++; // output will be 11
|
-- |
This operator is the decrement operator. It is a unary operator which means it is used with a single operand. Using this operator you can subtract 1 from the existing value.
let x = 9
x--; // output will be 8
|
JavaScript Relational Operators
These operators are used to perform comparisons between two operands. These operators return a boolean value as a result. We will use these operators when we will cover JavaScript if else statements.
Relational operators are also called Comparison operators as they are used to compare two values.
| Operator |
Description |
== |
It is the equality operator. It returns true if both operands are equal, otherwise returns false.
let x = 9;
let y = 10;
console.log(x == y) // false
|
!= |
It is the "not equal to" operator. It returns true if both operands are not equal, otherwise returns false.
let x = 9;
let y = 10;
console.log(x != y) // true
|
=== |
It is the strict equality operator.
If operands are strictly equal(same value and same data type) with type conversion then it returns true otherwise false.
let x = 9;
let y = "9";
console.log(x == y) // true
console.log(x === y) // false
The first console.log will print true because the basic equality operator (==) only compares the values, but the strict equality operator (===) checks for the data type also, hence it will return false because one value is a number and the other value is a string.
|
|
!==
|
It returns true if operands on both sides of this operator are not equal/not of the same type.
let x = 9;
let y = "9";
console.log(x != y) // false
console.log(x !== y) // true
The basic not equal to operator will treat the values of x and y as equal, hence it will return false as the result. Whereas the strict not equal to operator will return false.
|
> |
It returns true if the left-hand side value is greater than the right-hand side value, otherwise false.
let x = 9;
let y = 18;
console.log(x > y) // false
|
>= |
It returns true if the left-hand side value is greater than or equal to the right-hand side value otherwise it returns false.
let x = 9;
let y = 18;
console.log(x >= y) // false
|
< |
It returns true if the left-hand side value is less than the right-hand side value, otherwise it returns false.
let x = 9;
let y = 18;
console.log(x < y) // true
|
<= |
It returns true if the left-hand side value is less than or equal to the right-hand side value, otherwise, it returns false.
let x = 9;
let y = 18;
console.log(x <= y) // true
|
JavaScript Assignment Operators
These are the operators used while assigning the values to the variables in JavaScript.
Apart from the main assignment operator =, there are several other compound assignment operators using which you can perform some operation on the variable before assigning the value to it.
| Operator |
Description |
= |
It assigns the value to the left-hand side variable.
let x = 9; // assignment
let y = 18; // assignment
|
+= |
It adds the right-hand side operand to the left-hand side operand and then assigns the result to the left-hand side operand.
let x = 9; // assignment
x += 2;
console.log(x) // 11
|
|
-=
|
It subtracts the right-hand side operand from the left-hand side operand and then assigns the result to the left-hand side operand.
let x = 9; // assignment
x -= 2;
console.log(x) // 7
|
*= |
It multiplies the right-hand side operand with the left-hand side operand and then assigns the result to the left-hand side operand.
let x = 9; // assignment
x *= 2;
console.log(x) // 18
|
/= |
It divides the left-hand side operand by the right-hand side operand and assigns the result to the left-hand side operand.
let x = 9; // assignment
x /= 3;
console.log(x) // 3
|
%= |
It divides the left-hand side operand by the right-hand side operand and then assigns the remainder to the left-hand side operand.
let x = 9; // assignment
x %= 2;
console.log(x) // 1
|
JavaScript Bitwise Operators
JavaScript supports the bitwise operators to perform bitwise operations on operands represented in the binary form. When you use the bitwise operators, the values are first converted into binary, and then the bitwise operator performs the operation on them.
Let's see the available bitwise operators in JavaScript.
| Operator |
Description |
& (AND) |
Sets each bit to 1 if both bits are 1, for everything else it will set the bit to 0.
let result = 5 & 3; // 0101 & 0011 = 0001
console.log(result); // Output: 1
In the above code, on the bits of 0101 and 0011, the & operator is applied.
|
|
| (OR)
|
Sets the bit to 1 if one of the two bits is 1.
So 0 | 1 will give 1, 1 | 0 will give 1, and 1 | 1 will also give 1, only 0 | 0 will give 0.
let result = 5 | 3; // 0101 | 0011 = 0111
console.log(result); // Output: 7
You can do the math now, for the above code.
|
^ (XOR) |
XOR stands for exclusive OR. It sets each bit to 1 if and only if one of two bits is 1.
If both bits are 1 or both bits are 0, then you get 0 bits.
let result = 5 ^ 3; // 0101 ^ 0011 = 0110
console.log(result); // Output: 6
In the above code, the last bit in both operands is 1, for which the ^ operator returned 0.
|
~ (NOT) |
This operator inverts all the bits, which means 1 will be converted to 0, and 0 to 1.
It works with a single operand.
let result = ~5; // ~0101 = 1010
console.log(result); // Output: -6
In the code example above, each bit of 5, is converted into its opposite.
|
<< (Zero Fill Left Shift) |
This operator shifts the bits to the left by a number of places specified by the second operator.
It adds zeros in from the right end, letting the leftmost bit fall off.
let result = 5 << 1; // 0101 << 1 = 1010
console.log(result); // Output: 10
It's like pushing off the left bits and adding more 0's from the right side.
|
>> (Signed fill right shift) |
This operator shifts the bits right by pushing copies of the leftmost bit in from the left and lets the rightmost bit fall off.
The leftmost bit is the sign bit, which is 0 for positive, and 1 for negative.
let result = 10 >> 2; // 1010 >> 2 = 0010
console.log(result); // Output: 2
Two bits are removed from the right side, and two bits with value 0 are added from the left.
|
>>> (Zero fill right shift) |
This operator shifts the bits right by the number of places specified by the second operator and adds zeroes from the left, letting the rightmost bit fall off.
let result = 5 >>> 1; // 0101 >>> 1 = 0010
console.log(result); // Output: 2
One bit is shifted to the right, the rightmost bit falls off, and one 0 bit is added from the left.
|
Bitwise operators can be used for various use cases in JavaScript, like:
-
You can represent user permissions in your web application as a combination of bits and can use bitwise operators to manage and check the permission. For example, if 0010 is a permission set indicator, in which 0's represents No permission, whereas 1's represents permission available, is a good way to manage permissions.
-
Bitwise operators can also be used for hashing and encoding data.
These are just two examples, there are many different use cases where bitwise operators can be used.
JavaScript Logical Operators
The logical operators in JavaScript are used to combine two or more boolean values or expressions using relational operators.
These operators are used in Flow control - if else conditional statements in JS.
| Operator |
Description |
&& (AND) |
It returns true only if both the operands are true otherwise it will return false.
let x = 10;
let y = 4;
console.log((x>y) && (x!=y)) // true
The first expression x>y is true, and the second one x!=y is also true, hence the final result will also be true.
|
|| (OR) |
It returns true if either of the operands is true. It returns false when both operands are false.
let x = 10;
let y = 4;
console.log((x>y) || (x==y)) // true
The first expression x>y is true, and the second one x==y is false, hence the final result will be true.
|
! (NOT) |
It negates the operand, returns true if the operand is false, and vice-versa.
This operator is used with a single operand.
let x = 10;
let y = 4;
console.log(!(x>y)); // false
The expression x>y is true, therefore the negation of it will be false.
|
JavaScript String Operators
The main operator here is the concatenation operator or the + operator. This is not the arithmetic operator. The + operator is used to join one or more string values together and is called the concatenation operator.
Let's see an example,
let app = "Studytonight";
let msg = "Welcomes you.";
console.log(x + y);
StudytonightWelcomes you.
You can further improve the output by adding a space or a hyphen between the two strings, using one more + operator like this,
let app = "Studytonight";
let msg = "Welcomes you.";
console.log(x + " - " + y);
Studytonight - Welcomes you.
You can also use the concatenation operator to join a string and a non-string value. JavaScript parses will automatically convert the non-string value into string and join the two values. Let's see an example,
let a = "1"; // string
let b = 1; // number
console.log(a + b); // 11
11
This is a very popular example in JavaScript. Here, one value is a string and the other one is a number, so the number value is converted into a string, and then both the strings are joined together.
JavaScript Ternary Operator (?:)
The ternary operator is used to implement conditional checks in JavaScript. You can say that it is a shorthand style of if-else conditions.
The syntax to use this operator is:
(CONDITION) ? <EXECUTE IF TRUE> : <EXECUTE IF FALSE>
So you use a condition or an expression that can return true or false value. If the value returned is true then the code statement before the : (colon) gets executed, otherwise the code statement after the : (colon) gets executed.
Let's see an example,
let a = 10;
let b = 11;
(a > b) ? console.log("A is greater than B") : console.log("A is less than B")
A is less than B
You can only add a single line code statement on both sides of the colon (:).
JavaScript Operator Precedence and Associativity
Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first. For example, the expression (3+4*5), returns 23, because of the multiplication operator(*) having higher precedence than addition(+). Thus * must be evaluated first.
Operator associativity determines the order in which the operators of the same precedence are processed. For example, assignment operators are right-associative, so you can write a=b=5, and with this statement, a and b are assigned the value 5.
The following table shows the precedence and associativity of operators in JavaScript. In this table, precedence is from bottom to top i.e. items at the bottom have low precedence, and precedence increases as we move to the top of the table.
| Operator type |
Operator (Symbol) |
Associativity |
| Member |
.
[]
|
left-to-right |
| Create new object |
new |
right-to-left |
| Function call |
() |
left-to-right |
| Increment |
++ |
|
| Decrement |
-- |
|
| Logical NOT |
! |
right-to-left |
| Bitwise NOT |
~ |
right-to-left |
| Unary + |
+ |
right-to-left |
| Unary negation |
- |
right-to-left |
| typeof |
typeof |
right-to-left |
| void |
void |
right-to-left |
| Delete |
delete |
right-to-left |
| Multiplication |
* |
left to right |
| Division |
/ |
left to right |
| Modulus |
% |
left to right |
| Addition |
+ |
left to right |
| Subtraction |
- |
left to right |
| Bitwise Shift |
<<
>>
>>>
|
left to right |
| Relational |
<
<=
>
>=
|
left to right |
| in |
in |
left to right |
| instanceof |
instanceof |
left to right |
| Equality |
==
!=
===
!==
|
left to right |
| Bitwise AND |
& |
left to right |
| Bitwise XOR |
^ |
left to right |
| Bitwise OR |
| |
left to right |
| Logical AND |
&& |
left to right |
| Logical OR |
|| |
left to right |
| Ternary operator |
?: |
right to left |
| Assignment |
=
+=
-=
*=
/=
%=
<<=
>>=
>>>=
&=
^=
|=
|
right to left |
| Comma |
, |
left to right |
So that's it about operators in JavaScript. We have covered all the categories of operators and all the operators in JavaScript in this tutorial. Now it is your time to practice all of them.
