# 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 | … ( <var>… </var>) | |

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 |