Javascript operator precedence values is a very useful and fundamental concept that is core to understanding how to read, write, and execute JS.
A way to explain this is using a math example: 5 + 6 * 2 = 17 because BEDMAS, and (5 + 6) * 2 = 22 also because of BEDMAS. The JS operator precedence values is kind of like BEDMAS for JS.
Let's summarize it in a table.
| Operator type | Value | Operator | Description | Example |
| Generic | 19 | () | Brackets | (5+6)*2 |
| Objects | 18 | . | Get value of member | person.age |
| Objects | 18 | [] | Get value of member | person["age"] |
| Functions | 17 | func() | Function call | function(param) |
| Objects | 17 | new | Create object | var a = new Car() |
| Math | 16 | ++ / -- | Posfix inc/decrement | i++; i--; |
| Math | 16 | ++ / -- | Prefix inc/decrement | ++i; --i; |
| Logic | 15 | ! | Logical NOT | !enabled |
| Math | 15 | - | Unary negation | -y |
| Generic | 15 | typeof | Returns type of the variable | typeof y |
| Math | 15 | ** | Exponentiation | x ** 2 |
| Math | 14 | * / % | Multiply/Divide/Modulus | a * b / 11 % 2 |
| Math | 13 | + / - | Addition/Subtraction | a + b - c |
| Math | 12 | >> / << / >>> | Shift left/right/zero-fill | a << 2 |
| Comparison | 11 | >= / <= / > / < | Greater than, less than etc | a >= b |
| Objects | 11 | in | Returns true if object contains property | if ('age' in person) |
| Objects | 11 | instanceof | Returns true if object is instance of class | x instanceof Person |
| Comparison | 10 | ===/==/!==/!= | Strict equal/equal/unequals | if (x === '2') |
| Bitwise | 9 | & | Bitwise AND | 0101 & 0001 |
| Bitwise | 8 | ^ | Bitwise XOR | 0101 ^ 0001 |
| Bitwise | 7 | | | Bitwise OR | 0101 | 0001 |
| Logic | 6 | && | Logical AND | enabled && alive |
| Logic | 5 | || | Logical OR | canWalk || canFly |
| Conditional | 4 | ? : | Ternary condition | y = x ? 2 : 3; |
| Assignment | 3 | +=/-+/*=/>>= etc. | Math operator combined with assignment | x += 1 |
| Control-flow | 2 | yield | Pause function | yield x |
| Generic | 1 | ... | Spread operator | f(... iterable); |
| Generic | 0 | , | Comma | var a = 2, b = 3; |
The greater the value the more precedence it has when executed in combination with the others.
The expressions in brackets will be evaluated and then the rest of the evaluation(s) will continue.
How can we remember such a long list? It's no longer simple and easy like "BEDMAS".
We can summarize it as follows: Brackets, Members, Functions, (new is a constructor call), Unary (logical and math), Typeof, Exponent, Multiply/Divide (modulus can be grouped together with division), Addition/Subtraction, Shifts, GL comparisons (greater and less than), "in" operators (in and instanceof), Equal comparisons, Bitwise, Binary logical, Ternay, Assignment, Yield, Spread, and Comma.
Using a few memory aid mnemonics:
Betty Might Feel Uneasy Typing Essays. (Brackets, Members, Functions, Unary, Typeof, Exponents)
May Day Approaches So Slowly. (Multiplication, Division (modulus), Addition, Subtraction, Shifts)
Good Luck In Equalizing Big Binges. (Greater Less than comparisons, "in" operators, Equal operators, Bitwise, Binary)
Today A Yellow Sun Climbs. (Ternary operator, Assignments, Yield, Spread, Comma)