Signup/Sign In

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)

-
  • Subtracts two numbers

  • Represents a negative number

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.



About the author:
I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight