When we work with a complex expression that contains more than one operator, it is vital to know the order in which JavaScript uses rules of operator precedence to calculate the value.
The precedence of operators in JavaScript helps to determine which operation is being evaluated first than others during the parsing and execution of complex expressions.
Consider the following expression in which there are two operators + and *.
let result = 10 + 4 * 5 // result is 30.
If we attempt to calculate this result, there are two ways to do it. We could multiply 4 * 5 first and then add 10 (result: 30). Or add 10 + 4 first and then multiply by 5 (result: 70).
JavaScript evaluates this dilemma by the following operator precedence rules: as the multiplication is higher precedence than addition, it first multiply 4 * 5, and then adds 10, producing a result of 30.
Sometimes operator precedence in JavaScript does not produce the result as we want. For example, consider the following expression.
let avg = 10 + 20 + 30 + 40 / 4;
In this expression, we are calculating an average of four numbers. Since division has a higher precedence than addition, JavaScript will divide 40 by 4 before adding other numbers, generating the incorrect result.
To get the correct result, we need to use parentheses (). The contents of parenthesis have calculated before the contents outside the parentheses. Look at the following expression.
let avg = (10 + 20 + 30 + 40) / 4;
In the above expression, the parentheses ensure that the four numbers are added first, and then the sum is divided by four.
JavaScript Operator Precedence Order
The below table lists the complete order of precedence for operators by JavaScript.
| Operator Precedence | Operator | Operation | Order of Evaluation |
|---|---|---|---|
| 1 | () | Parentheses | Left to right |
| [] | Array subscript | Left to right | |
| function() | function call | Left to right | |
| 2 | ! | Logical NOT | Right to left |
| ~ | Bitwise NOT | Right to left | |
| – | Unary Negation | Right to left | |
| ++ | Increment | Right to left | |
| – – | Decrement | Right to left | |
| typeof | Typeof | Right to left | |
| new | New | Right to left | |
| void | Void | Right to left | |
| delete | Delete | Right to left | |
| 3 | * | Multiplication | Left to right |
| / | Division | Left to right | |
| % | Modulus | Left to right | |
| 4 | + | Addition | Left to right |
| – | Subtraction | Left to right | |
| 5 | <<, >>, >>> | Bitwise sift | Left to right |
| 6 | <, <=, >, >= | Comparison (Relational) | Left to right |
| 7 | ==, !=, ===, !== | Equality | Left to right |
| 8 | & | Bitwise AND | Left to right |
| 9 | ^ | Bitwise XOR | Left to right |
| 10 | | | Bitwise OR | Left to right |
| 11 | && | Logical AND | Left to right |
| 12 | || | Logical OR | Left to right |
| 13 | ?: | Conditional | Right to left |
| 14 | =, +=, -=, *=, /=, %=, <<=, >>=, &=, ^=, |= | Assignment | Right to left |
| 15 | , | Comma | Left to right |
From this table, it is clear that JavaScript performs multiplication before addition. Therefore, understanding the precedence operator in JavaScript is important, otherwise, your statements might generate unexpected results.
Let’s create a program in which we will use some common operators.
Program code 1:
<html>
<head>
<title>JavaScript Precedence Operator Example</title>
</head>
<body>
<script>
document.write("4 + 5 = " +(4 + 5), "<br>");
document.write("4 + \"pqrs\" = " +4 + "pqrs", "<br>");
document.write("\"PQRS\" + \"pqrs\" = " + "PQRS" + "pqrs", "<br>");
document.write("53/10 = " + 53/10, "<br>");
document.write("53%10 = " +53%10, "<br>");
</script>
</body>
</html>
Output:
4 + 5 = 9
4 + "pqrs" = 4pqrs
"PQRS" + "pqrs" = PQRSpqrs
53/10 = 5.3
53%10 = 3
Try It Yourself
Program code 2:
<html>
<body>
<script>
var x = true, y = false, z = "5";
var exp = (++x + y++)/2 * (z++ - ++y)/2 + z - y;
document.write(exp);
</script>
</body>
</html>
In this tutorial, we learned the operator precedence in JavaScript with example programs. Hope that you will have understood the predefined order of precedence, how JavaScript evaluates a complex expression.
Thanks for reading!!!
Next ⇒ Conditional Statements in JavaScript⇐ PrevNext ⇒