JavaScript Precedence

If you are a JavaScript developer, or you just started, you are probably aware of the importance of understanding operator precedence. It is the concept that determines the order in which operators are evaluated in an expression.

In this article, we will dive into the details of JavaScript precedence, and explore the rules that govern it. We will also look at examples of how precedence can impact your code and provide tips to help you write better, more readable code.

What is Operator Precedence?

In JavaScript, an expression is made up of one or more operators and operands. The precedence of an operator determines the order in which it is evaluated within an expression. For example, in the expression 3 + 4 * 5, the multiplication operator (*) has higher precedence than the addition operator (+), so the expression is evaluated as 3 + (4 * 5), which equals 23.

If you are familiar with basic math, you may recognize the concept of operator precedence from algebraic expressions. In algebra, multiplication and division are evaluated before addition and subtraction. Similarly, in JavaScript, certain operators have higher precedence than others, and are evaluated first.

JavaScript Precedence Rules

JavaScript has a set of rules that define the order in which operators are evaluated in an expression. These rules are based on the type of operator and their precedence level.

1. Unary Operators

Unary operators are operators that operate on a single operand. These operators have the highest precedence in JavaScript. Some examples of unary operators are:

typeof
!
-
++
--

Unary operators are evaluated from right to left. For example, in the expression typeof x++, the increment operator (++) is evaluated first, followed by the typeof operator.

2. Multiplicative Operators

Multiplicative operators are operators that perform multiplication and division. These operators have the second highest precedence in JavaScript. Some examples of multiplicative operators are:

Multiplicative operators are evaluated from left to right. For example, in the expression 3 * 4 / 2, the multiplication operator (*) is evaluated first, followed by the division operator (/).

3. Additive Operators

Additive operators are operators that perform addition and subtraction. These operators have the third highest precedence in JavaScript. Some examples of additive operators are:

Additive operators are evaluated from left to right. For example, in the expression 3 + 4 - 2, the addition operator (+) is evaluated first, followed by the subtraction operator (-).

4. Relational Operators

Relational operators are operators that compare values. These operators have the fourth highest precedence in JavaScript. Some examples of relational operators are:

<
>
<=
>=

Relational operators are evaluated from left to right. For example, in the expression 3 < 4 > 2, the less than operator (<) is evaluated first, followed by the greater than operator (>).

5. Equality Operators

Equality operators are operators that compare values for equality. These operators have the fifth highest precedence in JavaScript. Some examples of equality operators are:

==
!=
===
!==

Equality operators are evaluated from left to right. For example, in the expression 3 == 4 != 2, the equal operator (==) is evaluated first, followed by the not equal operator (!=).

6. Logical Operators

Logical operators are operators that perform logical operations on values. These operators have the sixth highest precedence in JavaScript. Some examples of logical operators are:

&&
||

Logical operators are evaluated from left to right. For example, in the expression true || false && true, the logical AND operator (&&) is evaluated first, followed by the logical OR operator (||).

7. Conditional Operator

The conditional operator (also known as the ternary operator) is a special operator in JavaScript that allows you to write a short-hand if-else statement. It has the seventh highest precedence in JavaScript. The syntax of the conditional operator is as follows:

condition ? expression1 : expression2

The condition is evaluated first, and if it is true, expression1 is evaluated. Otherwise, expression2 is evaluated. For example, in the expression 3 > 2 ? "greater" : "less", the condition (3 > 2) is evaluated first. Since it is true, the expression "greater" is returned.

8. Assignment Operators

Assignment operators are operators that assign values to variables. These operators have the lowest precedence in JavaScript. Some examples of assignment operators are:

=
+=
-=
*=
/=
%=

Assignment operators are evaluated from right to left. For example, in the expression x = y += 2, the expression y += 2 is evaluated first, followed by the assignment operator (=).

Tips for Writing Readable Code

Understanding operator precedence is essential for writing correct and efficient JavaScript code. However, it can also impact the readability of your code. Here are some tips to help you write more readable code:

1. Use Parentheses

One of the easiest ways to ensure that your code is evaluated in the order you want is to use parentheses. For example, in the expression 3 + 4 * 5, you can use parentheses to force the addition operation to be evaluated first: (3 + 4) * 5. This makes the order of operations clear, and can help prevent bugs.

2. Use Clear Variable Names

Using clear and descriptive variable names can also improve the readability of your code. For example, instead of using a variable named x or y, use names that describe the purpose of the variable. This can make it easier to understand the purpose of the expression.

3. Use Line Breaks

Using line breaks can also make your code more readable, especially in complex expressions. For example, instead of writing a && b || c && d, you can write it on multiple lines:

if (a && b ||
    c && d) {
    // Do something
}

This makes the logical structure of the expression clear, and can help prevent errors.

Conclusion

In conclusion, operator precedence is a fundamental concept in JavaScript. It determines the order in which operators are evaluated in an expression, and can impact the behavior and efficiency of your code. By understanding the rules of precedence and following best practices for writing readable code, you can write better, more efficient JavaScript code.

📕 Related articles about Javascript

Was this article helpful?

YesNo

What is Operator Precedence?