The operator can be defined as a symbol that tells the system to implement a particular operation. In JavaScript, there is a rich set of operators, and by using specific operators, you can perform any particular task.

The operators are used in the expressions for evaluating different operands.

An expression is a kind of statement that returns a value. The expression includes:

**Operators:**It is responsible for performing some operations on operands**Operands:**It represents the data.

**For example:** Suppose an expression like** x*y.** In this expression,** x **and **y **are the **operands,** and the asterisk **(*)** symbol is the multiplication operator.

Operators in JavaScript can be classified as:

- Arithmetic Operators
- Relational Operators
- Logical Operators
- Assignment Operators
- Bitwise Operators
- Type Operators
- Miscellaneous Operators

Let us try to elaborate on these operators in detail.

Arithmetic operators are the basic mathematical operators that are available in JavaScript ES6. These operators are responsible for performing all mathematical operations such as addition, subtraction, etc. in JavaScript.

Operators | Functions |
---|---|

+ (Addition) |
It returns the sum of the value of operands |

- (Subtraction) |
It returns the difference between the value of operands |

* (Multiplication) |
It returns the product of operands values. |

/ (Division) |
It is used to perform division, and it returns quotient. |

% (Modulus) |
It also performs division and returns the remainder. |

++ (Increment) |
It increments the value of a variable by one. |

- (Decrement) |
It decrements the value of a variable by one. |

Example

In this example, we are using all arithmetic operators that are listed above:

snippet

var x = 30; var y = 20 ; console.log("Addition: " + (x + y) ); console.log("Subtraction: " + (x - y) ); console.log("Multiplication: " + (x * y) ); console.log("The Division will give you the quotient: " + (x / y) ); console.log("Modulus will give you the Remainder: " + (x % y) ); // pre-increment console.log("Value of x after pre-increment: " + (++x) ); // post-increment console.log("Value of x after post-increment: " + (x++) ); // pre-decrement console.log("Value of y after pre-decrement: " + (--y) ); // post-decrement console.log("Value of y after post-decrement: " + (y--) );

When you execute the above code in the terminal, you will get the following output:

Output

Addition : 50
Subtraction: 10
Multiplication: 600
The division will give you the quotient: 1.5
Modulus will give you the Remainder: 10
Value of x after pre-increment: 31
Value of x after post-increment: 31
Value of y after pre-decrement: 19
Value of y after post-decrement: 19

Relational operators are used for comparing the two values and return either true or false based on the expression. These operators are sometimes called Comparison Operators.

Operator | Function |
---|---|

> (Greater than) |
It returns true if the left operand is greater than right operand else it returns false. |

< (Less than) |
It returns true if the left operand is smaller than right operand else it returns false. |

>= (Greater than or equal to) |
It returns true if the left operand is greater than or equal to right operand else it returns false. |

<= (Less than or equal to) |
It returns true if the left operand is smaller than or equal to right operand else it returns false. |

== (Equality) |
It returns true if the value of both operands is the same else it returns false. |

!= (Not Equal to) |
It returns true if the value of operands is not the same else it returns false. |

Example

In this example, we are using all relational operators that are listed above

snippet

var x = 20; var y = 15; console.log("Value of x: " + x); console.log("Value of y: " + y); var result = x > y; console.log("x is greater than y: " + result); result = x < y; console.log("x is smaller than y: " + result); result = x >= y; console.log("x is greater than or equal to y: " + result); result = x <= y; console.log("x is smaller than or equal to y: " + result); result = x == y; console.log("x is equal to y: " + result); result = x != y; console.log("x not equal to y: " + result);

When you execute this code in the terminal, you will get the following output:

Output

Value of x: 20
Value of y: 15
x is greater than y: true
x is smaller than y: false
x is greater than or equal to y: true
x is smaller than or equal to y: false
x is equal to y: false
x not equal to y: true

Logical operators are generally used for combining two or more relational statements. They also return Boolean values.

Operators | Description |
---|---|

&& (Logical AND) |
This operator returns true if all relational statements that are combined with && are true, else it returns false. |

|| (Logical OR) |
This operator returns true if at least one of the relational statements that are combined with || are true, else it returns false. |

! (Logical NOT) |
It returns the inverse of the statement's result. |

Example

In this example, we are using all logical operators that are listed above.

snippet

var x = 30; var y = 80; console.log("Value of x = " + x ); console.log("Value of y = " + y ); var result = ((x < 40) && (y <= 90)); console.log("(x < 40) && (y <= 90): ", result); var result = ((x == 50) || (y > 80)); console.log("(x == 50) || (y > 80): ", result); var result = !((x > 20) && (y >= 80)); console.log("!((x > 20) && (y >= 80)): ", result);

Output

Value of x = 30
Value of y = 80
(x < 40) && (y <= 90): true
(x == 50) || (y > 80): false
!((x > 20) && (y >= 80)): false

Assignment operators are used for assigning a value to the variable. The operand on the left side of the assignment operator is a variable, and the operand on the right side of the assignment operator is a value.

The right-side value must be of the same data-type of the left-side variable; otherwise, the compiler will raise an error.

Operators | Functions |
---|---|

= (Simple Assignment) |
It simply assigns the value of the right operand to the left operand |

+= (Add and Assignment) |
This operator adds the value of the right operand to the value of the left operand and assigns the result to the left operand. |

-= (Subtract and Assignment) |
This operator subtracts the value of the right operand from the value of the left operand and assigns the result to the left operand. |

*= (Multiply and Assignment) |
This operator multiplies the value of the right operand to the value of the left operand and assigns the result to the left operand. |

/= (Divide and Assignment) |
This operator divides the value of the right operand to the value of the left operand and assigns the result to the left operand. |

Example

In this example, we are using all logical operators that are listed above.

snippet

var x = 20; var y = 40; x = y; console.log("After assignment the value of x is: " + x); x += y; console.log("x+=y: " + x); x -= y; console.log("x-=y: " + x); x *= y; console.log("x*=y: " + x); x /= y; console.log("x/=y: " + x); x %= y; console.log("x%=y: " + x);

Output

After assignment the value of x is: 40
x+=y: 80
x-=y: 40
x*=y: 1600
x/=y: 40
x%=y: 0

Bitwise operators are used for performing the bitwise operations on binary numerals or bit patterns that involve the manipulation of individual bits. Bitwise operators perform the operation on the binary representation of arguments

Generally, bitwise operators are less used and relevant for the applications and hyper-performance programs.

Operator | Description |
---|---|

Bitwise AND (&) |
It compares every bit of the first operand to the corresponding bit of the second operand. If both of the bits are 1, then the result bit will set to 1, else it will set to 0. |

Bitwise OR (|) |
It compares every bit of the first operand to the corresponding bit of the second operand. If both of the bits are 0, then the result bit will set to 0, else it will set to 1. |

Bitwise XOR (^) |
It takes two operands and does XOR on each bit of both operands. It returns 1 if both of the two bits are different and returns 0 in any other case. |

Bitwise NOT (~) |
It flips the bits of its operand, i.e., 0 becomes 1 and 1 becomes 0. |

Left shift (<<) |
It shifts the value of the left operand to the left by the number of bits specified by the right operand. |

Sign-propagating Right shift (>>) |
It shifts the value of the left operand to the right by the number of bits specified by the right operand. This is sign-propagating because the bits that we are adding from the left depends upon the sign of the number (0 represents positive, and 1 represents negative). |

Zero-fill right shift |
It accepts two operands. The first operand specifies the number, and the second operator determines the number of bits to shift. Every bit gets shifted towards the right, and the overflowing bits will be discarded.
Because the 0-bit is added from the left, that's why it is a zero-fill right shift. |

Example

In this example, we are using all logical operators that are listed above.

snippet

var x = 70; /* 70 = 0100 0110 */ var y = 80; /* 80 = 0101 0000 */ var res = 0; console.log("Value of 70 in binary 0100 0110" ); console.log("Value of 80 in binary 0101 0000" ); res = x & y; /* 64 = 0100 0000 */ console.log("Value of x & y = %d\n", res ); res = x | y; /* 86 = 0101 0110 */ console.log("Value of x | y = %d\n", res ); res = x ^ y; /* 22 = 0001 0110 */ console.log("Value of x ^ y = %d\n", res ); res = ~x; /*-71 = -0100 0111 */ console.log("Value of ~ x = %d\n", res ); res = x << 2; /* 280 = 1000 11000 */ console.log("Value of x << 2 = %d\n", res ); res = x >> 2; /* 17 = 0001 0001 */ console.log("Value of x >> 2 = %d\n", res );

Output

Value of 70 in binary 0100 0110
Value of 80 in binary 0101 0000
Value of x & y = 64
Value of x | y = 86
Value of x ^ y = 22
Value of ~ x = -71
Value of x << 2 = 280
Value of x >> 2 = 17

Note

The logic of assignment operators is also applied to Bitwise operators, so they become <<=, >>=, &=, |=, ^=.

These are the operators that perform different operations in different circumstances.

Operators | Description |
---|---|

+ (Concatenation Operator) |
It applies to strings and appends the second string to first. |

- (Negation Operator) |
It changes the sign of the value. |

? (Conditional Operator) |
It is used for representing the conditional expression. It is also called a ternary operator. |

Let us try to understand the miscellaneous operators in detail:

It is used to change the sign of the value.

Example

snippet

var num1 = 80; var num2 = -num1; console.log("Value of num1 = " +num1); // It will give 80 console.log("Value of num2 = " +num2); // It will give -80

Output

Value of num1 = 80
Value of num2 = -80

It applies on strings and appends the second string to first. You can understand it by using the following example:

Example

snippet

var str1 = 'Hello' + 'World'; var str2 = 'Welcome ' + 'Back'; console.log(str1); console.log(str2);

Output

HelloWorld
Welcome Back

The concatenation operator does not add the space between the strings. It concatenates multiple strings in a single statement. If you want to show the space between your strings, then you have to define it manually. In the above example, the string **"HelloWorld" **does not contain any space, but the second string **"Welcome Back" **has space because we have manually added it.

This operator represents the conditional expression. It is also called the **'ternary operator.'**

Syntax

variablename = (condition) ? value1 : value2

Where,

**condition:** It refers to the conditional expression.

**value1:** If the condition is true, then this value will be returned.

**value2:** If the condition is false, then this value will be returned.

Example

snippet

var num1 = 30; var num2 = 20; var res = num1 > num2 ? "Yes 30 is greater than 20" : "No It's not"; console.log(res);

Output

Yes 30 is greater than 20

It is a unary operator that returns the data type of the operand.

Syntax

typeof(operand)

You can see the data types and values in the following table that are returned by the **typeof** operator in JavaScript:

Type | String Returned by typeof |
---|---|

String | "string" |

Boolean | "boolean" |

Number | "number" |

Object | "object" |

Example

snippet

var a = 20; var b = true; var c = 'Hello'; var d = 'true'; var e; console.log("Variable a is " +typeof(a)); console.log("Variable b is " +typeof(b)); console.log("Variable c is a " +typeof(c)); console.log("Variable d is a " +typeof(d)); console.log("Variable e is " +typeof(e));

Output

Variable a is number
Variable b is boolean
Variable c is a string
Variable d is a string
Variable e is undefined

In the above example, the variable **e **is not defined (or not initialized); that's why the **typeof **operator is giving its type **undefined. **

If you take the **Boolean Values **within the quotes, then they will be treated as a **string **as you can see the **variable 'd' **in the above example.

Related Tutorial