# Operators in JavaScript Programming

**JavaScript operators** are **symbols** which are used to **assign values, compare values, perform arithmetic operations, and more. **

- The variables (operations) are called
**operands**. - The operation (to be performed between the two operands) is defined by an
**operator**.

JavaScript supports the following types of operators.

**Arithmetic Operators****Comparison Operators****Logical (or Relational) Operators****Assignment Operators****Conditional (or ternary) Operators****String Operators****Type Operators****Bitwise Operators**

**JavaScript Arithmetic Operators –**

Arithmetic operators perform arithmetic operations on numbers.

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

+ | Addition |

– | Subtraction |

* | Multiplication |

/ | Division |

% | Modulus (Remainder) |

++ | Increment |

— | Decrement |

**Example –**

1 | var x = 100 + 50; |

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // Addition var a = 4; var b = 3; var x = a + b; // adding 2 variables var x = (100 + 50) * a; // expressions // Subtraction var x = 5; var y = 2; var z = x - y; // Multiplication var x = 5; var y = 2; var z = x * y; // Division var x = 5; var y = 2; var z = x / y; // Modulo var x = 5; var y = 2; var z = x % y; // Increment var x = 5; x++; var z = x; // Decrement var x = 5; x--; var z = x; |

**Associativity –**

Associativity determines the way in which operators of the same precedence are parsed. For example, consider an expression:

1 | a OP b OP c // OP means a operator |

Left-associativity (left-to-right) means that it is processed as `(a OP b) OP c`

, while right-associativity (right-to-left) means it is interpreted as `a OP (b OP c)`

.

**Operator Precedence –**

Operator precedence describes the order in which operations are performed in an arithmetic expression.

**Example –**

1 | var x = 100 + 50 * 3; |

As in traditional school mathematics, the multiplication is done first. Multiplication (*) and division (/) have higher **precedence** than addition (+) and subtraction (-).

Precedence | Operator type | Associativity | Individual operators |
---|---|---|---|

20 | `Grouping` | n/a | `( … )` |

19 | `Member Access` | left-to-right | `… . …` |

`Computed Member Access` | left-to-right | `… [ … ]` | |

`new` (with argument list) | n/a | `new … ( … )` | |

Function Call | left-to-right | `… ( ` | |

18 | `new` (without argument list) | right-to-left | `new …` |

17 | `Postfix Increment` | n/a | `… ++` |

`Postfix Decrement` | `… --` | ||

16 | Logical NOT | right-to-left | `! …` |

Bitwise NOT | `~ …` | ||

Unary Plus | `+ …` | ||

Unary Negation | `- …` | ||

Prefix Increment | `++ …` | ||

Prefix Decrement | `-- …` | ||

typeof | `typeof …` | ||

void | `void …` | ||

delete | `delete …` | ||

await | `await …` | ||

15 | Exponentiation | right-to-left | `… ** …` |

14 | Multiplication | left-to-right | `… * …` |

Division | `… / …` | ||

Remainder | `… % …` | ||

13 | Addition | left-to-right | `… + …` |

Subtraction | `… - …` | ||

12 | Bitwise Left Shift | left-to-right | `… << …` |

Bitwise Right Shift | `… >> …` | ||

Bitwise Unsigned Right Shift | `… >>> …` | ||

11 | Less Than | left-to-right | `… < …` |

Less Than Or Equal | `… <= …` | ||

Greater Than | `… > …` | ||

Greater Than Or Equal | `… >= …` | ||

in | `… in …` | ||

instanceof | `… instanceof …` | ||

10 | Equality | left-to-right | `… == …` |

Inequality | `… != …` | ||

Strict Equality | `… === …` | ||

Strict Inequality | `… !== …` | ||

9 | Bitwise AND | left-to-right | `… & …` |

8 | Bitwise XOR | left-to-right | `… ^ …` |

7 | Bitwise OR | left-to-right | `… | …` |

6 | Logical AND | left-to-right | `… && …` |

5 | Logical OR | left-to-right | `… || …` |

4 | Conditional | right-to-left | `… ? … : …` |

3 | Assignment | right-to-left | `… = …` |

`… += …` | |||

`… -= …` | |||

`… **= …` | |||

`… *= …` | |||

`… /= …` | |||

`… %= …` | |||

`… <<= …` | |||

`… >>= …` | |||

`… >>>= …` | |||

`… &= …` | |||

`… ^= …` | |||

`… |= …` | |||

2 | yield | right-to-left | `yield …` |

yield* | `yield* …` | ||

1 | Comma / Sequence | left-to-right | `… , …` |

**JavaScript Comparison Operators –**

Comparison and Logical operators are used to test for *true* or *false*. Comparison operators are used in **logical statements** to determine equality or difference between variables or values.

Given that **x = 5**, the table below explains the comparison operators:

Operator | Description | Comparing | Returns |
---|---|---|---|

== | equal to | x == 8 | false |

x == 5 | true | ||

x == “5” | true | ||

=== | equal value and equal type | x === 5 | true |

x === “5” | false | ||

!= | not equal | x != 8 | true |

!== | not equal value or not equal type | x !== 5 | false |

x !== “5” | true | ||

x !== 8 | true | ||

> | greater than | x > 8 | false |

< | less than | x < 8 | true |

>= | greater than or equal to | x >= 8 | false |

<= | less than or equal to | x <= 8 | true |

**Example – **

1 2 3 4 5 6 7 8 9 10 | if (age < 18) text = "Too young"; var voteable = (age < 18) ? "Too young":"Old enough"; // ternary operator // if -else example age = Number(age); if (isNaN(age)) { voteable = "Input is not a number"; } else { voteable = (age < 18) ? "Too young" : "Old enough"; } |

**JavaScript ****Logical (or Relational) Operators –**

Comparison and Logical operators are used to test for *true* or *false*. Logical operators are used to determine the logic between variables or values.

Given that **x = 6** and **y = 3**, the table below explains the logical operators:

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

&& | and | (x < 10 && y > 1) is true |

|| | or | (x == 5 || y == 5) is false |

! | not | !(x == y) is true |

##### JavaScript Assignment Operators –

Assignment operators assign values to JavaScript variables.

Operator | Example | Same As |
---|---|---|

= | x = y | x = y |

+= | x += y | x = x + y |

-= | x -= y | x = x – y |

*= | x *= y | x = x * y |

/= | x /= y | x = x / y |

%= | x %= y | x = x % y |

<<= | x <<= y | x = x << y |

>>= | x >>= y | x = x >> y |

>>>= | x >>>= y | x = x >>> y |

&= | x &= y | x = x & y |

^= | x ^= y | x = x ^ y |

|= | x |= y | x = x | y |

**= | x **= y | x = x ** y |

*The **= operator is an experimental part of the ECMAScript 2016 proposal (ES7). It is not stable across browsers. Do not use it.*

**Example –**

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // The = assignment operator assigns a value to a variable. var x = 10; // The += assignment operator adds a value to a variable. x += 5; //The -= assignment operator subtracts a value from a variable. var x = 10; x -= 5; // The *= assignment operator multiplies a variable. var x = 10; x *= 5; // The /= assignment divides a variable. var x = 10; x /= 5; // The %= assignment operator assigns a remainder to a variable. var x = 10; x %= 5; |

**JavaScript Conditional (Ternary) Operator –**

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

**Syntax –**

1 | variablename = (condition) ? value1:value2 |

**Example –**

1 | var voteable = (age < 18) ? "Too young":"Old enough"; |

**JavaScript String Operators –**

The + operator can also be used to add (concatenate) strings.

1 2 3 | var txt1 = "John"; var txt2 = "Doe"; var txt3 = txt1 + " " + txt2; |

**Output – **

1 | John Doe |

The += assignment operator can also be used to add (concatenate) strings:

1 2 | var txt1 = "What a very "; txt1 += "nice day"; |

**Output – **

1 | What a very nice day |

**Adding Strings and Numbers –**

Adding two numbers, will return the sum, but adding a number and a string will return a string:

**Example –**

1 2 3 | var x = 5 + 5; var y = "5" + 5; var z = "Hello" + 5; |

**Output –**

1 2 3 | 10 55 Hello5 |

**JavaScript Type Operators –**

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

typeof | Returns the type of a variable |

instanceof | Returns true if an object is an instance of an object type |

**JavaScript Bitwise Operators –**

Bit operators work on **32 bits numbers**. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.

Operator | Description | Example | Same as | Result | Decimal |
---|---|---|---|---|---|

& | AND | 5 & 1 | 0101 & 0001 | 0001 | 1 |

| | OR | 5 | 1 | 0101 | 0001 | 0101 | 5 |

~ | NOT | ~ 5 | ~0101 | 1010 | 10 |

^ | XOR | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |

<< | Zero fill left shift | 5 << 1 | 0101 << 1 | 1010 | 10 |

>> | Signed right shift | 5 >> 1 | 0101 >> 1 | 0010 | 2 |

>>> | Zero fill right shift | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |