# Operator Precedence in JavaScript | Example Program

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 PrecedenceOperatorOperationOrder of Evaluation
1()ParenthesesLeft to right
[]Array subscriptLeft to right
function()function callLeft to right
2!Logical NOTRight to left
~Bitwise NOTRight to left
Unary NegationRight to left
++IncrementRight to left
– –DecrementRight to left
typeofTypeofRight to left
newNewRight to left
voidVoidRight to left
deleteDeleteRight to left
3*MultiplicationLeft to right
/DivisionLeft to right
%ModulusLeft to right
SubtractionLeft to right
5<<, >>, >>>Bitwise siftLeft to right
6<, <=, >, >=Comparison (Relational)Left to right
7==, !=, ===, !==EqualityLeft to right
8&Bitwise ANDLeft to right
9^Bitwise XORLeft to right
10|Bitwise ORLeft to right
11&&Logical ANDLeft to right
12||Logical ORLeft to right
13?:ConditionalRight to left
14=, +=, -=, *=, /=, %=, <<=, >>=, &=, ^=, |=AssignmentRight to left
15,CommaLeft 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>
<title>JavaScript Precedence Operator Example</title>
<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.