Other operators, order of operations

void operator

The function of the void operator is to execute an expression and then return no value, or return undefined.

void 0; // undefined
void 0; // undefined

The above are two ways of writing the void operator, both of which are correct. The latter form is recommended, which is to always use parentheses. Because the void operator has a high precedence, it is easy to cause wrong results if parentheses are not used. For example, void 4 + 7 is actually equivalent to (void 4) + 7.

The following is an example of the void operator.

var x = 3;
void (x = 5); //undefined
x; // 5

The main purpose of this operator is the bookmarklet tool (Bookmarklet) of the browser, and the insertion of code in the hyperlink to prevent web pages from jumping.

Please see the code below.

<script>
  function f() {
    console.log("Hello World");
  }
</script>
<a href="http://example.com" onclick="f(); return false;">click</a>

In the above code, after clicking the link, the code of onclick will be executed first. Since onclick returns false, the browser will not jump to example.com.

The void operator can replace the above wording.

<a href="javascript: void(f())">Text</a>

The following is a more practical example. The user clicks the link to submit the form, but the page does not jump.

<a href="javascript: void(document.form.submit())"> submit </a>

Comma operator

The comma operator is used to evaluate two expressions and return the value of the latter expression.

"a", "b"; // "b"

var x = 0;
var y = (x++, 10);
x; // 1
y; // 10

In the above code, the comma operator returns the value of the next expression.

One use of the comma operator is to perform some auxiliary operations before returning a value.

var value = (console.log("Hi!"), true);
// Hi!

value; // true

In the above code, the operation before the comma is performed first, and then the value after the comma is returned.

Order of Operations

priority

The precedence levels of various operators in JavaScript (Operator Precedence) are different. Operators with higher precedence are executed first, and operators with lower precedence are executed later.

4 + 5 * 6; // 34

In the above code, the multiplication operator (*) has higher precedence than the addition operator (+), so the multiplication is performed first, and then the addition is performed, which is equivalent to the following.

4 + 5 * 6; // 34

If multiple operators are mixed together, it often leads to confusing code.

var x = 1;
var arr = [];

var y = arr.length <= 0 || arr[0] === undefined ? x : arr[0];

In the above code, the value of the variable y is difficult to see, because this expression involves 5 operators. It is not easy to remember who has the highest priority.

According to the language specification, the priority of these five operators from high to low are: less than or equal (<=), strict equal (===), or (||), ternary ( ?:), equal sign (=). Therefore, the actual operation sequence of the above expression is as follows.

var y = arr.length <= 0 || arr[0] === undefined ? x : arr[0];

Remembering the precedence of all operators is very difficult and unnecessary.

The role of parentheses

Parentheses (()) can be used to increase the priority of operations because it has the highest priority, that is, the expression in parentheses will be the first to be evaluated.

(4 + 5) * 6; // 54

In the above code, due to the use of parentheses, the addition will be performed before the multiplication.

The precedence levels of operators are very complicated, and they are all hard and fast. Therefore, it is recommended to always use parentheses to ensure that the order of operations is clear and readable. This is essential for code maintenance and debugging.

By the way, parentheses are not operators, but a grammatical structure. It has two uses: one is to put expressions in parentheses to increase the priority of operations; the other is to follow the function, and the role is to call the function.

Note that because the parentheses are not operators, they have no evaluation function and only change the priority of the operation.

var x = 1;
x = 2;

In the second line of the above code, if the parentheses have an evaluation function, it will become 1 = 2, which is an error. However, the above code can run, which verifies that the parentheses only change the priority and will not be evaluated.

This also means that if the entire expression is placed in parentheses, there will be no effect.

expression;
// Equivalent to
expression;

The function is placed in parentheses and returns the function itself. If the parentheses immediately follow the function, it means the function is called.

function f() {
  return 1;
}

f; // function f(){return 1;}
f(); // 1

In the above code, the function is placed in parentheses to return the function itself, and the parenthesis after the function is to call the function.

Only expressions can be placed in parentheses. If you put the statement in parentheses, an error will be reported.

(var a = 1)
// SyntaxError: Unexpected token var

Left combination and right combination

For operators with the same precedence level, when they appear at the same time, there will be a problem with the order of calculation.

a OP b OP c

In the above code, OP means operator. It can be interpreted in two ways.

// method one
(a OP b) OP c

// Method two
a OP (b OP c)

In the above two methods, the calculated results are often different. The first method is to combine the two operands on the left side. The operator using this interpretation method is called the "left-to-right associativity" operator; the second method is to combine the two operands on the right side. Combined together, such operators are called "right-to-left associativity" (right-to-left associativity).

Most operators in the JavaScript language are "left associative", please see the following examples of addition operators.

x +
  y +
  z(
    // The engine is explained as follows
    x + y
  ) +
  z;

In the above code, x and y are combined, and their budget results are then calculated with z.

A few operators are "right associativity", the most important of which are assignment operators (=) and ternary conditional operators (?:).

w = x = y = z;
q = a ? b : c ? d : e ? f : g;

The explanation of the above code is as follows.

w = x = y = z;
q = a ? b : c ? d : e ? f : g;

The two lines of code above are all combined with the operands on the right.

In addition, the exponent operator (**) is also right associative.

2 ** (3 ** 2);
// equivalent to 2 ** (3 ** 2)
// 512