Comprehensive Guide to JavaScript Operators and Expressions
Tags: javascript, beginners, tutorial
Published: 2020-01-01 01:15:20

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

JavaScript programs are combinations of operators, expressions, and statements. They let us manipulate and change data, make calculations, compare values, and do much more.

An expression is code that evaluates to a value. Example expressions include things like `3 + x` and `a*b`. A statement is code that does an action. For example, loops and conditional code like `if` and `switch` are statements. Wherever you can write statements, you can also write expressions, but the reverse is not true.

* * *

Operator Precedence
===================

Operators are special symbols that let you combine and compute values. They are also in all JavaScript expressions. There are many of them, and the order of them matters. This is why we have operator precedence rules in JavaScript.

Below is the full list of operators in JavaScript, from highest to lowest precedence. The higher ones are evaluated before the lower ones. The following list is ordered from precedence 20, which is the highest, to precedence 1, which is the lowest.

Most operators also have associativity, which has the same meaning as in math. It means that when you group the same results done repeatedly with a given operator in whatever way you want, you get the same result, for example when you multiply three numbers, `(a*b)*c === a*(b*c)`.

*   grouping operator: `(...)` , precedence 20, example: `(a+b)`
*   member access: `...,...` , precedence 19, associative left to right, example: `a.b`
*   computed member access (accessing object properties with a string as the key) `...[...]` , precedence 19, associative left to right, example: `a['b']`
*   `new` operator with arguments list, `new ... (...)` , precedence 19, example: `new Bird('small')`
*   optional chaining: `?.` , precedence 19, associative left to right, example: `a?.b`
*   `new` operator without arguments list: `new …` , associative right to left, example: `new Bird`
*   postfix increment: `…++`, precedence 17, example: `x++`
*   postfix decrement: `…--`, precedence 17, example: `x--`
*   `typeof` operator: `typeof …` , precedence 16,  
    associative right-to-left, example: `typeof x`
*   logical NOT: `!...` , precedence 16, associative right-to-left, example: `!x`
*   bitwise NOT: `~...` , precedence 16, associative right-to-left, example: `~x`
*   unary plus: `+...` , precedence 16, associative right-to-left, example: `+x`
*   unary negation: `-...` , precedence 16, associative right-to-left, example: `-x`
*   prefix increment: `++..` , precedence 16, associative right-to-left, example: `++x`
*   prefix decrement `--..` , precedence 16, associative right-to-left, example: `--x`
*   `void` operator: `void …` , precedence 16, associative right-to-left ,example: `void(0)`
*   `delete` operator: `delete...` , precedence 16, associative right-to-left ,example: `delete a.b`
*   `await` operator: `await...` , precedence 16, associative right-to-left ,example: `await promise`
*   exponentiation : `...**...` , precedence 15, associative right-to-left ,example: `a**b`
*   multiplication: `...*...` , precedence 14, associative left-to-right , example: `a*b`
*   division: `.../...` , precedence 14, associative left-to-right, example: `a/b`
*   remainder: `...%...` , precedence 14, associative left-to-right, example: `a % b`
*   addition: `...+...` , precendence 13, associative left-to-right, example: `a + b`
*   subtraction: `...-...` , precedence 13, associative left-to-right, example: `a — b`
*   bitwise left shift: `...<<...` , precedence 12, associative left-to-right, example: `a << b`
*   bitwise right shift: `...>>...` , precedence 12, associative left-to-right, example: `a >> b`
*   bitwise unsigned right shift: `...>>>...` , precedence 12, associative left-to-right, example: `a >>> b`
*   less than: `...<...` , precedence 11, , associative left-to-right, example: `a < b`
*   less than or equal: `...<=...` , precedence 11, , associative left-to-right, example: `a <= b`
*   greater than: `...>...` , precedence 11, , associative left-to-right, example: `a >b`
*   greater than or equal to: `...>=...` , precedence 11, , associative left-to-right, example: `a >= b`
*   `in` : `...in...` , precedence 11, , associative left-to-right, example: `a in b`
*   `instanceof` : `...instanceof...` , precedence 11, associative left-to-right, example: `a instance Bird`
*   equality: `...==...` , precedence 10, associative left-to-right, example: `a == b`
*   inequality: `...!=...` , precedence 10, , associative left-to-right, example: `a != b`
*   strict equality: `...===...` , precedence 10, associative left-to-right, example: `a === b`
*   strict inequality: `...!==...` , precedence 10, associative left-to-right, example: `a !== b`
*   bitwise AND: `...&...` , precedence 9, associative left-to-right, example: `a & b`
*   bitwise XOR: `...^...` , precedence 8, associative left-to-right, example: `a ^ b`
*   bitwise OR: `... | ...` , precedence 7, associative left-to-right, example: `a | b`
*   logical AND: `...&&...` , precedence 6, associative left-to-right, example: `a && b`
*   logical OR: `...||...` , precedence 5, associative left-to-right, example: `a || b`
*   conditional operator: `… ? … : …` , precedence 4, associative right-to-left, example: `a ? b : c`
*   all assignment operators `… = …` , `… += …` , `… -= …` , `… **= …` , `… *= …` , `… /= …` , `… %= …` , `… <<= …` , `… >>= …` , `… >>>= …` , `… &= …` , `… ^= …` , `… |= …` , precedence 3, associative right-to-left, examples: `a = b` , `a += b` , `a -= b` , `a *= b` , `a /= b` , `a %= b`
*   `yield` and `yield*` operator, precedence 2, associative right-to-left, examples: `yield x` , `yield* x`
*   comma / sequence operator: `...,...`, precedence 1, associative left-to-right, example: `a, b`

Parentheses
-----------

Parentheses allow us to group together expressions that we want to be evaluated before anything else. It also makes reading the close a lot more clear than without grouping expressions in parentheses.

To group expressions in parenthesis, we write:

```javascript
let a = (1 + 2) * (1 / 2); // 1.5  
let a = (1 + (2 * 1)) / 1; // 3  
let a = ((1 + 2) *1) / 2; // 1.5  
let a = 1 + ((2 * 1) / 2); // result: 2
```

* * *

Meaning of Operators
====================

As we can see from the list above, JavaScript has lots of operators.

Assignment operators
--------------------

Assignment operators are used to giving a variable value. It reads from right to left. For example, `let a = 1` sets the value of variable `a` to 1. We can also have more than one assignment operator in one line by writing: `let a = b = c = 1`. This way, we assign the value of `a`, `b`, and `c` to the value 1. Again, we read the expression from right to left. First `c` is assigned the value 1, then `b` is assigned `c`, which has the value 1, then finally, `a` is assigned the value of `b`, which is 1.

All assignment operators can be chained in one line like we did above. Suppose we write:

```javascript
let b = 1;  
let a = b += c = 1;
```

We first set 1 as the value of `b` in the first line. Then in the second line, we set the value of `c` to 1. Then we increment the value of `b` by `c`, which is 1, and `b` becomes 2, which is then assigned to `a`, which also gets the value of 2.

Comparison operators
--------------------

Comparison operators are for comparing the values of objects.

We have the following comparison operators:

*   Equality operator (`==`), which compares only the content of objects without the type: `==`. For example, `3 == 3` would be `true`, and `3 == '3'` would also be `true`.
*   Inequality operator (`!=`), which also compares only the content of objects without the type. For example, `1 != 1` would be `false` , and `1 != '1'` would also be `false`.
*   Strict equality operator (`===`), which compares both the content and the type of objects for equality. For example, `1 === “1”` would be `false`, and `1 === 1` would be `true`.
*   Strict inequality (`!==`), which compares both the content and the type of object for inequality. For example, `3 !== “3”` would be `true`, and `3 !== 3` would be `false` .
*   Greater than operator (`>` ), which compares the value of two numbers and evaluates to `true` if the number left of the greater than sign is bigger than the right one. For example, `7 > 2` would be `true`.
*   Greater than or equal to operator (`>=` ), which compares the value of two numbers and evaluates to `true` if the number left of the greater than sign is bigger than or equal to the right one. For example, `1 >= 1` would be `true`.
*   Less than operator (`<` ), compares the value of two numbers and evaluates to `true` if the number left of the greater than sign is smaller than the right one. For example, `1< 2` would be `true`.
*   Less than or equal to operator (`<=` ), which compares the value of two numbers and evaluates to `true` if the number left of the greater than sign is smaller than or equal to the right one. For example, `1 <= 1` would be `true`.

Arithmetic operators
--------------------

Arithmetic operators, as the name suggests, do mathematical operations on the operands and return the result.

We have the following arithmetic operators:

*   Addition (`+`): adds two numbers together. For example `a = 1 + 2`
*   Subtraction (`-`): subtracts two numbers. For example `a = 1 — 2`
*   Multiplication (`*`): multiplies two numbers together. For example `a = 1 * 2`
*   Division (`/`): divide two numbers. For example `a = 1 /2`
*   Remainder (`%`): gets the remainder of one number divided by another. For example: `5 % 2 // 1`
*   Increment (`++` ): increases a number by 1. For example: `let x = 1; x++ // x is 2`
*   Decrement (`--`): decreases a number by 1. For example: `let x = 1; x-- // x is 0`

String operator
---------------

There is only one operator for manipulating strings. That’s the concatenation operator, which is also represented by the `+` sign. When you concatenate two strings, you combine two strings into one. For example, `'a' + 'b'` would evaluate to `'ab'`.

Bitwise operators
-----------------

Bitwise operators convert operands to bits. Then the operators are applied to each bit and converted back to their original form. Negative numbers are represented by 2's complement. 2's complement means the number is a complement of its number with respect to 2 raised to the Nth power, and a complement of a binary number is the number that, when summed together, you get all zeroes. So the 2's complement of `010` would be `110` since `010 + 110` is `1000`. The leftmost digit is 0, and the three digits to the right of it are all 0's.

Below are bitwise operators in JavaScript:

*   Bitwise AND — Each bit of the left operand does the AND operation with the corresponding bits of the right operand. So if the bits in the same position are both 1, then it will be 1; otherwise, it’s 0. For example, if we have the expression `5 & 2`, then the JavaScript interpreter will convert the operands to binary, which is `0101 & 0010`. Then, after applying the `&` operation to each bit, we get `0000`, which is 0.
*   Bitwise OR — Each bit of the left operand does the OR operation with the corresponding bits of the right operand. For example, if we have the expression `5 | 2`, then the JavaScript interpreter will convert the operands to binary, which is `0101 | 0010`. Then after applying the `&` operation to each bit, we get `0111`, which is 7.
*   Bitwise XOR — Each bit of the left operand does the XOR operation with the corresponding bits of the right operands. For example, if we have the expression `5 ^ 2`, then the JavaScript interpreter will convert the operands to binary, which is `0101 ^ 0010`. Then after applying the `&` operation to each bit, we get `0111`, which is 7.
*   Bitwise NOT — the NOT operation is done to the bits of the operand. For example, if we have the expression `~5`, then the JavaScript interpreter will convert the operands to binary, which is `~0101`. Then after applying the `~`operation to each bit, we get `1010`, which is -6.
*   Left shift operator, which shifts the bits of the left operand by the number of bits given by the right operand to the left, and shift in zeroes from the right. For example, `2 << 1` would be `4` since the binary representation of 2 is `10`. If we move it one place to the left and shift in a zero to the one’s digit, then we get `100`, which is 4.
*   Right shift operator, which shifts the bits of the left operand by the number of bits given by the right operand to the right, and removing shifted bits. For example, `2 >> 1` would be 1 since the binary representation of 2 is `10`. If we move it one place to the left and shift in a zero to the one’s digit, then we get `1`, which is 1.
*   Zero fill right shift operator, which shifts the bits of the left operand by the number of bits given by the right operand to the right, removing shifted bits, and the left bits with zeroes. For example, `2 >>> 1` would be 1 since the binary representation of 2 is `10`. If we move it one place to the left and shift in a zero to the one’s digit, then we get `01`, which is 1.

Logical operators
-----------------

Logical operators are useful for creating boolean variables. There are three logical operators in JavaScript.

We have the `&&` operator, which returns the right operand when the left one is truthy. Otherwise, it returns a falsy value. For example `'' && 1` would be ` `` ` since empty string is falsy.

The `||` operator would return the left operand when the left one is truthy. Otherwise, it returns the right one. For example, `7 || 1` would be 7 since 7 is truthy, so it returns the first truthy value which is 7. On the other hand, `'' || 1` would return 1 since empty string is falsy, and so it would return the second operand which is 1. This is also handy for setting the default value of a variable.

The NOT operator, denoted by `!` returns `false` if the operand is truthy and vice versa. For example `!1` would return `false`, and `!0` would return `true` .

Other operators
---------------

JavaScript has many other operators. Some handy ones include the conditional operator, comma operator, `delete` operator, `instanceof` operator, `new` operator, `typeof` operator, `this`, `await`, destructuring, and spread operator.

The conditional operator allows us to write conditional statements in one line. It’s denoted by a question mark with a colon separating the return value for when the condition is true and when it’s false. For example, if we have the following expression:

```javascript
let biggerThan5 = x > 5 ? 'bigger than 5' : 'less than 5'
```

If `x` is 6, then `biggerThan5` would be `true` . If `x` is 1, then `biggerThan5` is `false` .

The comma operator lets us declare more than one variable in one line. For example, if we write:

```javascript
let a = 1, b = 2;
```

Then `a` is set to 1, and `b` is set to 2. The two-variable setting expressions are always evaluated separately, no matter if you have parentheses or not.

The `delete` operator lets us remove a property from an object or an entry of an array. For example, suppose we have:

```javascript
let a = {foo: 'bar'};  
delete a.foo
```

Then `a` becomes an empty object since the property `foo` was removed by the `delete` statement.

For arrays, we can write:

```javascript
let arr = [1,2,3];  
delete a[1];
```

Then `a[1]` becomes `undefined`.

With the `in` operator, we can check if a specified value exists in a given array. It’s mostly handy for numbers, booleans, and strings.

For example, suppose we have:

```javascript
let arr = [1,2,3];
```

Then `3 in arr` would be `true`. It doesn’t work well with objects since it doesn’t compare the contents inside an object, just checks if the reference is the same.

The `instanceof` operator lets us check if the type of an object is the type given. For example, suppose we have:

```javascript
let a = 'abc';
```

Then `a instanceof String` would be `true` since `a` is a string.

The `new` operator lets us create a new instance of an object. So we can do:

```javascript
let date = new Date()
```

if we want to create a new `Date` object, which is a built-in object in all browsers that support JavaScript.

The `this` is a special operator for getting the properties of an instance, which depends on where `this` is located.

The `typeof` operator returns a string which is the name of the type of the object. For example, if we have:

```javascript
let a = 'abc';
```

Then `typeof a` would be `` `string’``.

The `await` operator lets us chain promises without using the `then` function and passing a callback to it. It returns a promise after resolving the promise in the operand of the `await` operator.

One very useful operator is the spread operator, which allows us to set entries of an array into individual variables and also add or update properties from one object to another. This operator also works with function calls. It’s denoted by `...` . For example, we can write the following to get the numbers from the `num1` array into `num2` :

```javascript
let num1 = [1,2]  
let num2 = [3,4,5, ...num1] // [3,4,5,1,2]
```

To use it in a function, we can write:

```javascript
const sum = (a,b) => a + b;  
sum(...num1) // returns 3
```

If you have more entries in your array than the number of parameters in your function, then it’ll ignore the array indexes that are beyond the number of parameters in the function. For example, if you spread `num2` instead of `num1` in `sum`, you get 7 since `a` would be 3 and `b` would be 4. If you have less, then the arguments that are beyond the array length would be `undefined`. For example, if you spread `[1]` into the arguments of `sum`, you get `NaN` since 1 + `undefined` is `NaN`.

Another very useful operator is the destructuring operator, which lets you decompose objects and arrays into individual variables. For example, if we write:

```javascript
let [one, two] = [1,2]
```

then `one` would be 1 and `two` would be 2. For objects, if we write:

```javascript
let {foo, bar} = {foo: 1, bar: 2}
```

then variable `foo` has value 1 and `bar` has value 2.

* * *

Combining Operators
===================

We can combine assignment operators with all mathematical operators, which include arithmetic operators and bitwise operators. For example, if we have `x` set to 1 and `y` set to 2, and we want to set `x` to the sum of `x` and `y`, we write `x += y`, which is the same as `x += y`.

JavaScript has many operators. They allow us to do a lot of things. Almost all non-trivial programs will need to combine all these operators in many ways and places, in addition to statements like loops and conditionals.