Operator Precedence

For Example, take a simple arithmetic operation.

                            
100+100*20
                     
                            
                        

If we did the math from left to right and without any precedence we would add 100+100=200, and then multiply it by 20. The answer would be 4000. But that is not what we get.

Multiplication always has higher precedence than an addition. Hence it performs the multiplication first (100*20=2000) and then the addition (100+2000=2100)

                            
 console.log((100+100)*20);   //4000
                     
                            
                        

Operators Associativity

The associativity defines the direction in which the evaluation takes place. It can be either left to right (left-associativity) or right to left (right associativity).

1. Associativity comes into the picture only when the operators have the same precedence.
2. All operators with the same precedence have the same associativity

The assignment Operator = has a right to left associativity.

1. y=10 is evaluated first. y becomes 10
2. x=y is next. Hence x becomes 10.

                            
y=5
x = y = 10
 
                     
                            
                        

Parenthesis (grouping) and short-circuiting

The Parenthesis or grouping operator has the highest precedence. However, even they might not be evaluated, when they are part of the expression involving short-circuited Operators.

The Logical operators like || & && stop the evaluation, if they find the match This is known as a short-circuiting. For Example, the code below does not invoke alert("Hello") even with a parenthesis.

Similarly in expression, a || (b * c) b*c never invoked if a is truthy.

                            
console.log(true || (alert("Hello")))
 
//alert is never evaluated
 
 
 
let a =10
let b = 5
let c = 5
 
console.log(a || (b * c));   //10    b*c never invoked
 
 
                     
                            
                        

The logical AND, nullish-coalescing, optional chaining, and conditional operator are the other short-circuited operators.

Operator Precedence & Associativity Table

Reference

1. Expressions & Operators
2. Precedence & Associativity

Read More

1. JavaScript Tutorial
2. JavaScript Operators
3. Arithmetic Operators
4. Unary plus (+) & Unary minus (-)
5. Increment & Decrement Operators
6. Comparison or Relational Operators
7. Strict Equality & Loose Equality Checkert
8. Ternary Conditional Operator
9. Logical Operators
10. Bitwise Operators
11. Assignment Operators
12. Nullish Coalescing Operator
13. Comma Operator