JavaScript Operator Precedence
Operator precedence defines the order in which mathematical statements or operations are evaluated. The operator with higher precedence is evaluated first than the operator with the lower precedence like in mathematics we will do multiplication prior to addition or subtraction. In other words we can also state that operator precedence works as the same way of PEMDAS in mathematics where parenthesis is evaluated first then exponents or power then multiplication and thereafter division, addition, and subtraction. It is to ensure that when your code is compiled, JavaScript returns correct output like standard mathematical calculation.
What if you encounter an expression where there are operators with same level of precedence. You will be confused on which operation to perform first in such scenarios. In order to solve this issue, there is another concept called Associativity, that determines the direction in which the operation is to be performed. There is two types of associativity: Left-to-right and Right-to-left associativity. Above is operator precedence table in JavaScript that you can use to understand and evaluate the mathematical expression.
Consider the following expression: var x = 5 + (3*3);. We know the answer will be 14 as per traditional mathematics calculation. If you look at the table above, parenthesis has higher level of precedence than addition and multiplication. So statement inside the parenthesis is evaluated first. There is only multiplication operator inside the parenthesis and it will give result as 9. Then after that only addition operator is there and 5+9=14.
Lets see another example that explains associativity as well: var y = 4*5+10-24/4. We know the answer will be 24 in this case. What JavaScript does it that first it will check order of precedence. In above table you can see multiplication (*) and division (/) both has same order or level of precedence which is 3. Since they have same level of precedence, they are evaluated on the basis of associativity. Both of them have Left-to-right associativity. So the mutiplication is calculated first while parsing from left to right and then only division is performed after that. The following explains this concept.
4*5+10-24/4
20+10-24/4
20+10-6
30-6
24
When we are done with multiplication and division we are left with addition and subtraction with both of them having same precedence level according the above precedence table. Associaitivity column tells us to evalaute from left to right. So, addition is done thereafter and only at last subtraction is done and we get the desired output.
All of these examples in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<script>
var x = 5 + (3*3);
document.write(x)
var y = 4*5+10-24/4;
document.write("<br>")
document.write(y)
</script>
</head>
<body>
</body>
</html>
Below is the output on the browser window:
