Operators supported by javascript fall under below categories.

1. Arithmetic(or Mathematical) operators.

2. Comparison operators.

3. Logical operators.

4. Assignment operators.

5. Type operators.

6. Bitwise operators.

7. Ternary operator

All of the above categories and the operators under each category are explained below.

**1. Arithmetic operators**

These operators are used for performing arithmetic operations over numbers.

Following are the arithmetic operators available in javascript.

Symbol | Description |
---|---|

+ | Addition operator, used for adding two or more values |

– | Subtraction operator, used for subtracting two or more values |

/ | Division operator, used for dividing two numbers |

% | Modulus operator, used for getting the remainder of division |

++ | Increment operator, for adding 1 to a value |

– – | Decrement operator, for subtracting 1 from a value |

** | Exponentiation operator, for raising power to a number |

All of these operators are described in detail below.

**+ (Addition):** Used for adding two or more values and returns the sum of those values.

Values can be direct numbers or variables holding those numbers. **Example**,

let sum = 10 + 20; // adding values let x = 10; let y = 20; let sum = x + y; // adding variables

Addition operator can also be used to concatenate two strings or a string with a number. **Example**,

let x = 10; let lang = 'javascript'; let sum = lang + x; // results in javascript10

**-(Subtraction):** Used for subtracting two or more values and returns the difference. **Example**,

let x = 30; let y = 10; let diff = x - y; // subtract two values, returns 20

**/ (Division):** Divides two numbers and returns the result. **Example**, 16/3 will return 5.333333

**% (Modulus):** Returns the remainder of division of two numbers. **Example**, 16 % 3 returns 1.

**++ (Increment):** This operator when applied after a variable increases its value by 1. **Example**,

let x = 5; x++; // increases value of x by 1 console.log(x); // prints 6

Note that this operator cannot be applied directly to a number, it can be applied only to a variable. Thus, 5++ is invalid.

x++ is translated to x = x + 1 behind the scenes.

**– – (Decrement):** This operator when applied after a variable decreases its value by 1. **Example**,

let x = 5; x--; // decreases value of x by 1 console.log(x); // prints 4

Note that this operator cannot be applied directly to a number, it can be applied only to a variable. Thus, 5– is invalid.

x– is translated to x = x – 1 behind the scenes.

**** (Exponentiation):** This operator is used for raising a number to the power of another number.

When used between two numbers(or variables), then left hand number(or variable) is raised to the power of right hand number(or variable).

**Example**, 5 ** 2 returns 25

This operator is added to javascript in **ECMAScript 2016**.

2. Comparison operators

These operators are used to compare one value(or variable) with another value(or variable) to check if one value is lesser, greater, equal or not equal to other value.

Result of these operators is always a boolean value(`true`

or `false`

).

Following comparison operators are supported by javascript.

Symbol | Description | Syntax |
---|---|---|

> | Greater than operator | x > y |

< | Lesser than operator | x < y |

>= | Greater than or equal to | x >= y |

<= | Lesser than or equal to | x <= y |

== | Equal to operator | x == y |

!= | Not equal to | x != y |

=== | Equal value and type | x === y |

!== | Not equal value or not equal type | x !== y |

All of the above mentioned comparison operators are elaborated below.

**> (greater than):** This operator checks if one value is greater than another.

It returns `true`

if the value at the left is greater than the value to the right of this operator, `false`

otherwise.

Note that you can compare directly values, variables or a value with a variable. **Example**,

const x = 10; const y = 5; // compare variables console.log(x > y); // prints true // compare values console.log(20 > 30); // prints false // compare value with variable console.log(x > 10); // prints false

**< (lesser than):**This operator checks if one value is lesser than another.

It returns

`true`

if the value at the left is lesser than the value to the right of this operator, `false`

otherwise.Note that you can compare directly values, variables or a value with a variable.

**Example**,

const x = 10; const y = 5; // compare variables console.log(x < y); // prints false // compare values console.log(20 < 30); // prints true // compare value with variable console.log(x < 10); // prints false

**>= (greater than or equal to):** This operator is similar to greater than but it also checks if the left value is greater than or equal to the right value.

Thus, 5 > 5 will return `false`

but 5 >= 5 returns `true`

.

**Example**,

const x = 10; const y = 5; // compare variables console.log(x >= y); // prints true // compare values console.log(20 >= 30); // prints false // compare value with variable console.log(x >= 10); // prints true

**<= (lesser than or equal to):** This operator is similar to lesser than(<) but it also checks if the left value is lesser than or equal to the right value.

Thus, 5 < 5 will return `false`

but 5 <= 5 returns `true`

.

**Example**,

const x = 10; const y = 5; // compare variables console.log(x <= y); // prints false // compare values console.log(20 <= 30); // prints true // compare value with variable console.log(x <= 10); // prints true

**==(equal to):** This operator consists of two equal to(`=`

) signs.

It compares the values of left and right operands and returns `true`

only if both are equal, `false`

otherwise.

**Example**,

const x = 10; const y = 20; console.log(x == y); // returns false console.log(x == 10); // returns true

**!= (not equal to):** This operator is the reverse of equal to operator(`==`

) and comprises of an exclamation mark(`!`

) followed by equal to(`=`

) sign.

It compares the values of left and right operands and returns `true`

only if both are not equal, `false`

otherwise.

**Example**,

const x = 10; const y = 20; console.log(x != y); // returns true console.log(x != 10); // returns false

**=== (equal value and type):** Equal to(`==`

) operator compares only values and returns `true`

if the values are equal even if their types are different.

That is, `5 == '5'`

will return `true`

even if they are of different types since their values are same.

When you want to ensure that types of values are also checked besides their values, then this operator should be used.

It will return `true`

when both values and their data types are same.

Thus, `5 === '5'`

will return `false`

and `'5' === '5'`

will be `true`

.

Though `==`

and `===`

work the same way but there is a **difference between both these operators**.

** !== (not equal value or not equal type):** This operator compares the values as well as the data types of its operands and returns

`true`

if any of these do not match.It will return

`false`

when values and types of both the operands are same. **Example,**

console.log('javascript' !== 'javascript'); // will be false console.log(20 !== '20'); // will be true

**3. Logical operators**

These operators are used for defining complex conditions in conditional statements(such as `if`

).

Left and right operands of logical operators returns a boolean value and thus, result of logical operators always returns a boolean value(`true`

or `false`

).

Following comparison operators are provided in javascript.

Symbol | Description | Syntax |
---|---|---|

&& | AND operator | x && y |

|| | OR operator | x || y |

! | NOT operator | !(x == y) |

**&& (AND):** This operator returns `true`

only if both the left and right operands evaluate to `true`

.

If any one of those is `false`

, then overall result of using `&&`

is `false`

.

**Example**,

const x = 5; const lang = 'javascript'; console.log(x == 5 && lang == 'javascript'); // prints true console.log(x > 5 && lang == 'javascript'); // prints false

Remember that `&&`

is a short cut operator.

This means that if the left hand operand(or condition) of `&&`

is `false`

, then right hand condition is not evaluated.

This is because if the first condition is `false`

, then anyway the final result will be `false`

, thus it is not checked.

Second condition is checked only when the first condition is `true`

.

** || (OR):** This operator returns

`true`

if any of the left and right operands evaluate to `true`

.If both the conditions are

`false`

, then overall result of using || is `false`

. **Example,**

const x = 5; const lang = 'javascript'; console.log(x == 5 || lang == 'javascript'); // prints true console.log(x > 5 || lang == 'javascript'); // prints true console.log(x > 5 || lang != 'javascript'); // prints false

Remember that `||`

is a also short cut operator.

This means that if the left hand operand(or condition) of `||`

is `true`

, then right hand condition is not evaluated.

This is because if the first condition is `true`

, then anyway the final result will be `true`

, thus it is not checked. Second condition is checked only when the first condition is `false`

.

**! (NOT) operator:** This operator reverses the boolean output returned by the condition before which it is applied.

Example, `!(x == 5)`

will return `false`

if the value stored in `x`

will be 5.

This is because `x == 5`

will be `true`

and applying ! before it will change the returned value to `false`

.

Note that this operator can be used along with other operators.

Only pre-requisite is that the condition before which it is used should return either `true`

or `false`

.

**4. Assignment operators**

These operators are used to assign values to a variable. Following are the assignment operators in javascript.

Symbol | Description | Syntax | Behind the scenes |
---|---|---|---|

= | Assign operator | x = y | x = y |

+= | Add and assign | x += y | x = x + y |

-= | Subtract and assign | x -= y | x = x – y |

*= | Multiply and assign | x *= y | x = x * y |

/= | Divide and assign | x /= y | x = x / y |

%= | Modulus and assign | x %= y | x = x % y |

**= (assign) operator:** This operator is used to assign a value to a variable. Example, `x = 10`

, `name = 'John'`

etc.

Assigned value may also come from another variable as `x = y`

.

** += (add and assign) operator:** It adds the value to the right to the existing value of the variable at the left.

Note that right side can be a value or a variable but left side should be a variable.

Valid examples are,

x = 19; x+=5; // x becomes 24 y = 32; z = 18; z += y; // z becomes 50

x += 10 is a short-hand for x = x + 10.

** -= (subtract and assign) operator:** Same as += but instead of adding it subtracts.

**Multiplies the value at the right with the existing value of the left hand variable.**

*= (multiply and assign):

*= (multiply and assign):

**Example**,

x = 25; x *= 6; // x becomes 150

**/= (divide and assign) operator:** Divides the value stored in left hand variable with the value given to the right of operator. **Example**,

x = 20; x /= 6; // x becomes 3.3333

**%= (modulus and assign) operator:** Divides the value stored in left hand variable with the value given to the right of operator and assigns the remainder of division to the left hand variable.

**Example**,

x = 20; x %= 6; // x becomes 2

**4. Type operators**

These operators are used to determine the type of value stored in a variable or check the object type at run time.

Following are the two type operators provided by javascript.

**typeof operator:** This operator is used for determining the type of a value. **Example**,

console.log(typeof 'javascript'); // prints string x = 20.5; console.log(typeof x); // prints number obj = {message: 'Hello world'}; console.log(typeof obj); // prints object

This operator can be used to perform some action based on the type of the value stored in a variable. **Example**,

x = 5 // check if value is a number if(typeof x == 'number') { // convert it to a string x = x.toString() } console.log(typeof x); // prints string

**instanceof operator:** This operator is used to check the if the value of a variable belongs to the class name at the right side.

While `typeof`

returns the type of the value, `instanceof`

returns `true`

or `false`

depending on the variable value is of the same type as checked.

**Example**,

message = 'Hello World!'; // check if message contains string value console.log(message instanceof String); // prints true

**5. Bitwise operators**

These operators work on binary digits(0 and 1) of numbers.

Following are the bitwise operators available in javascript.

Symbol | Description | Syntax |
---|---|---|

& | Bitwise AND operator | x & y |

| | Bitwise OR operator | x | y |

~ | NOT operator | x ~ y |

^ | XOR operator | x ^ y |

<< | Left shift operator | x << y |

>> | Right shift operator | x >> y |

**Bitwise & operator:** Performs AND operation over bits of its operands. Following is the result of bitwise AND operation of 0 and 1.

First operand | Second operand | Result |
---|---|---|

0 | 0 | 0 |

0 | 1 | 0 |

1 | 0 | 0 |

1 | 1 | 1 |

Thus, the result will be 1 only if both the operands are 1. This is similar to `&&`

operator where the result is `true`

only if both the operands are `true`

.

**Example** of Bitwise AND operator is,

const x = 7 & 6; console.log(x); // prints 6

7 when converted to binary is 0111. 6 converted to binary is 0110. When `&`

is applied to these values, the result as per the above table is 0110 which evaluates to 6.

**Bitwise | operator:** Performs OR operation over bits of its operands. Represented by a single pipe(`|`

).

Following is the result of bitwise OR operation of 0 and 1.

First operand | Second operand | Result |
---|---|---|

0 | 0 | 0 |

0 | 1 | 1 |

1 | 0 | 1 |

1 | 1 | 1 |

Thus, the result will be 1 if any of the two operands is 1. This is similar to `||`

operator where the result is `true`

if any operand is `true`

.

**Example** of Bitwise OR operator is,

const x = 7 | 6; console.log(x); // prints 7

7 when converted to binary is 0111. 6 converted to binary is 0110. When `|`

is applied to these values, the result as per the above table is 0111 which evaluates to 7.

** ~ (NOT) operator:** This operator when applied to a value reverses the digits in its binary representation.

That is, converts 1 to 0 and vice-versa.

**Example**,

`~7`

will return 8 since 7 in binary is 0111. Reversing its binary digits converts it to 1000 which is 8.**Performs XOR operation over the binary digits of its operands.**

^ (XOR) operator:

^ (XOR) operator:

An XOR operation over two binary digits produces a 1 if either of the digits is 1 and produces 0 if both digits are 0 or 1. XOR operation can be represented by following table.

First operand | Second operand | Result |
---|---|---|

0 | 0 | 0 |

0 | 1 | 1 |

1 | 0 | 1 |

1 | 1 | 0 |

Thus, `7 ^ 8`

will result in 15 since 7 in binary is 0111 and 8 in binary is 1000. The result of XOR operation over each of their digits as per above table is 1111 which is 15.

**<<(left shift) operator:** It shifts the binary digits of the left operand to number of places equal to the value of right operand towards left.

Note that if there are no places to shift left then additional zeroes are added towards the right. That is,

0100 << 1 will shift digits of left operand 1 place towards left changing it to 1000.

0100 << 2 will be converted to 010000.

** Example**,

`5 << 2`

will be 20. 5 in binary is 0101. Shifting digits to two places will result in 010100 which is 20.**It shifts the binary digits of left operand to number of places equal to the value of right operand towards right.**

>>(right shift) operator:

>>(right shift) operator:

Note that empty place towards left after shifting are replaced by 0.

**Example,**

`9 >> 1`

will be 4 since 9 in binary is 1001. Shifting 1 place to right makes it 0100 which is 4.`9 >> 2`

will be 2 since 9 in binary is 1001. Shifting 2 place to right makes it 0010 which is 2.

7. Ternary operator

7. Ternary operator

This operator comprises of two symbols

`?`

and `:`

. It is used to execute one out of two statements depending on whether the condition is true or false.**Syntax**

(condition) ? <statement 1> : <statement 2>

where statement 1 is executed when the condition is `true`

and statement 2 is executed when the condition is `false`

. **Example**,

let y = 230; (y == 10)?console.log(10):console.log(20); // prints 20 const num1 = 10; const num2 = 20; const num3= (num1 > num2) ? num1 : num2; // num3 is 20

That is all on javascript operators.

0