JavaScript Operators
In this tutorial, we will learn about JavaScript Operators, various different types of operators in JavaScript and will have a few examples to see their working.
What is an Operator?
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 or numeric literals or string literals. An operator can work on one or more than one operand.
Operators are useful to modify or change data by manipulating the respective variables. For example, 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 arithmetic operator +
to perform addition of these two variables.
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
-
Bitwise Operators
-
Logical Operators
-
Assignment Operators
-
String Operators
Let's cover each one of the above-mentioned operator types one by one and see the different operators that are supported in JavaScript.
JavaScript Arithmetic Operators
JavaScript Arithmetic operators are used to perform arithmetic operations like addition, subtraction, multiplication, etc. All the arithmetic operators have been listed in the below table.
Operator |
Description |
Example |
+ |
-
Adds two numbers
-
Joins two strings
|
45+20 // output 65
"My"+"Name" // MyName
(Can be used for String concatenation too)
|
- |
|
45-20 // output 25
|
* |
Multiplies two numbers
|
20*5 // output 100
|
/ |
Divides two numbers
|
45/10 // output 4.5
|
% |
Divides two numbers and returns the remainder
|
45%10 // output 5
|
++ |
Increments the value by one
|
a = 10
a++; // output will be 11
|
-- |
Decrements the value by one
|
x = 9
x--; // output will be 8
|
JavaScript Relational Operators
These operators are used to perform comparisons between two operands. We will use these operators when we will cover JavaScript if else Flow Control.
Operator |
Description |
Example |
== |
It returns true if both operands are equal, otherwise returns false. |
45==10 // output false
|
!= |
It returns true if both are not equal, otherwise returns false. |
45!=10 // output true
|
=== |
It is a strict equality operator.
If operands are strictly equal(same value and same data type) with type conversion then it returns true otherwise false.
|
3===3 // output true
|
!== |
It returns true if operands on both sides of this operator are not equal/not of the same type. |
3!=='3' // output false
|
> |
It returns true if left-hand side operand is greater than right-hand side operand, otherwise returns false. |
45>10 // output true
|
>= |
It returns true if left-hand side operand is greater than or equal to right-hand side operand otherwise returns false. |
45>=10 // output true
|
< |
It returns true if left-hand side operand is less than right-hand side operand, otherwise returns false. |
10<45 // output true
|
<= |
It returns true if left-hand side operand is less than or equal to right-hand side otherwise returns false. |
45<=10 // output false
|
JavaScript Bitwise Operators
JavaScript supports the following bitwise operators that perform bitwise operations on operands.
Operator |
Description |
Example |
& (AND) |
Sets each bit to 1 if both bits are 1 |
5&1 // returns 1
0101&0001 // returns 1
|
| (OR)
|
Sets each bit to 1 if one of two bits are 1 |
5|1 // returns 5
0101 | 0001 // returns 5 in decimal or 65 in octal
|
^ (XOR) |
sets each bit to 1 if only one of two bits is 1. |
5^1 // returns 4
0101^0001 // returns 4 in decimal or 64 in octal
|
~ (NOT) |
inverts all the bits |
~5 // output 6
~0101 // output 66 in octal
|
<< (Zero Fill Left Shift) |
shift left by pushing zeros in from the right and let the leftmost bit falls off |
5<<1 // returns 10
0101<<1 // returns 10 in decimal and 130 in octal
|
>> (Signed fill right shift) |
shifts right by pushing copies of leftmost bit in from the left, and let rightmost bit falls off. |
5>>1 // returns 2
0101>>1 // returns 2
|
>>> (Zero fill right shift) |
shifts right by pushing zeros in from the left, and let rightmost bit falls off |
5>>>1 // returns 2
0101>>>1 // returns 2
|
JavaScript Logical Operators
The logical gate's functions are used as logical operators in JavaScript. These operators are also used in Flow control.
Operator |
Description |
Example |
&& |
It returns true only if both the operands are true otherwise returns false |
true&&false // returns false
|
|| |
It returns true if either of the operands is true. It returns false when both operands are false |
true||false // returns true
|
! |
negates the operand, returns true if an operand is false and vice-versa |
!true // returns false
|
JavaScript Assignment Operators
These are the operators used while assigning the values to the variables.
Operator |
Description |
Example |
= |
It assigns the value to left-hand side variable. |
x = 90;
|
+= |
It adds the right-hand side operand to left-hand side operand and then assigns the result to left-hand side operand. |
x = 45;
x += 20; // x = 65
|
-= |
It subtracts the right-hand side operand from the left-hand side operand and then assigns the result to left-hand side operand. |
x = 45;
x -= 10; // x = 35
|
*= |
It multiplies the right-hand side operand with the left-hand side operand and then assigns the result to left-hand side operand. |
x = 45;
x *= 10; // x = 450
|
/= |
It divides the left-hand side operand by right-hand side operand and assigns the result to left-hand side operand. |
x = 45;
x /= 10; // x = 4.5
|
%= |
It divides left-hand side operand by right-hand side operand and then assigns the remainder to left-hand side operand. |
x = 45;
x% = 10; // x = 5
|
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 multiplication operator(*
) having higher precedence than addition(+
). Thus *
must be evaluated first.
Operator associativity determines the order in which 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 below table shows the precedence and associativity of operators. In this table, precedence is from bottom to top i.e items at the bottom having low precedence and precedence increases as we move to the top of the table.
Operator type |
Operator (Symbol) |
Associativity |
member |
.
[]
|
left-to-right |
new |
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 |
conditional |
?: |
right to left |
assignment |
=
+=
-=
*=
/=
%=
<<=
>>=
>>>=
&=
^=
|=
|
right to left |
comma |
, |
left to right |
JavaScript Operators Example:
Below we have a live example, where we have used a few of the operators specified above.
In this topic, we explained JavaScript operators and their usage in JavaScript. Operators are a very important component of any programming language as they are required to perform operations, used in conditions, comparison, etc.