Operator precedence and associativity

Multiple operations in a sequence

Multiple operations can be used in a sequence. The same operators or different operators can be used in the sequence. In what order are these expressions executed? In the next example the first sequence involves multiple equal operators (??). The following two sequences involve multiple different operators (?? and +). One uses parentheses, the other does not.


const a = undefined,
      b = null,
      c = "Hello";

console.log(a ?? b ?? c ?? "none"); // logs: "Hello"
console.log((a ?? "One") + (b ?? "Two") + (c ?? "Three")); // logs: "OneTwoHello"
console.log(a ?? "One" + b ?? "Two" + c ?? "Three"); // logs: "Onenull"

Operator precedence

Operator precedence determines the order of operations when evaluating a given expression. Operators with higher precedence become the operands of operators with lower precedence.

As in mathematics, exponentiation has higher precedence than both multiplication and division and they, in turn, have both higher precedence than both addition and subtraction. Comparison operators have higher precedence over logical operators. This operator precedence table lists all operators in order from highest precedence to lowest precedence.


let varA, varB, x = 9, y = 11;
console.log(2 + 3 * 5); // logs: 17 // 2 + (3 * 5) = 2 + 15 = 17
console.log(50 - 4 * 3 ** 2); // logs: 14 // 50 - (4 * (3 ** 2)) = 50 - (4 * 9) = 50 - 36 = 14.
console.log(x < 10 && y > 10); // logs: true // (x < 10) && (y > 10) // "true && true" returns true

console.log(varA ?? 2 * varB ?? 3); // logs: NaN // varA ?? (2 * varB) ?? 3
console.log( (varA ?? 2) * (varB ?? 3) ); // logs: 6 // 2 * 3

The precedence can be changed by using parentheses. Parts of an expression in parentheses are interpreted as an operand on its own.


let result = 0;
console.log( 40-(4*(2+(2**3))) === result &&
             40-(4*(2+8)) === result &&
             40-(4*10) === result ); // logs: true

Operator associativity

With operators on different precedence levels, associativity does not matter. Associativity only comes into play when there are multiple operators of the same precedence. In the operator precedence table there is also a column indicating the associativity of each operator. It indicates the "direction of processing". Left-associative operators are processed left-to-right (as (a OP1 b) OP2 c) and right-associative operators are processed right-to-left (as a OP1 (b OP2 c)). Operators on the same precedence level all have the same associativity (if associativity is applicable).


console.log( 5-2-1 === (5-2)-1 ); // logs: true // subtraction is left-associative
console.log( 2**3**4 === 2**(3**4) ); // logs: true // Exponentiation is right-associative
console.log( 5-2-1 === 5-(2-1) ); // logs: false
console.log( 2**3**4 === (2**3)**4 ); // logs: false


console.log(5 - 3 + 2); // logs: 4 // same precedence level, both left-associative: (5 - 3) + 2 = 2 + 2 = 4.

console.log(1 < 3 > 2); // logs: false // same precedence level, both left-associative: 1 < 3 is true, which is converted to 1; 1 > 2 is false.
console.log( 1 < 3 && 3 > 2 ); // logs: true // different precedence levels: (1 < 3) && (3 > 2)


let varA, varB;
console.log(varA = varB = 5); // logs: 5 // Assignment operators are right-associative: varA = (varB = 5) thus it logs the return value of varB = 5.

Mathematical associativity

In mathematics operations can be associative or non-associative. Operations are associative if and only if rearranging the parentheses in an expression containing two or more occurrences of the same operator will not change the result. For example addition and multiplication are associative, subtraction and division are not.

2 + 3 + 4 = (2 + 3) + 4 = 2 + (3 + 4)

5 − 2 − 1 ≠ 5 − (2 − 1)

Associativity should not be confused with the commutative property (the order of the operands does not affect the final result). Although most commutative operations are also associative (like addition and multiplication), commutativity does not imply associativity.

Operator associativity in programming language theory is distinct from the mathematical concept of associativity. With operator associativity in JavaScript there is no distinction between associativity and non-associativity. Operations are so-called "left-associative", "right-associative" or associativity is not applicable. From a mathematical point of view left- and right-associative operations would be non-associative operations. However, for instance addition and multiplication, which mathematically are associative, are interpreted left-associative in JavaScript. Addition is actually always processed left-to-right in JavaScript, even though it could also be processed right-to-left because addition is mathematically associative. Subtraction, for instance, is necessarily left-associative, because subtraction is mathematically non-associative and also mathematically interpreted left-to-right. Exponentiation, on the other hand, is necessarily a right-associative operation, because exponentiation is mathematically non-associative and also mathematically interpreted right-to-left.

Expressions in JS are always evaluated left-to-right, regardless of associativity and precedence. In the next example the function calls are executed left-to-right, but the exponentiation (2**(3**2)) is processed right-to-left, according to its associativity.


function operand(id, value){
  console.log("Evaluating function " + id);
  return value;
}

console.log( operand("one",2) ** operand("two",3) ** operand("three",2) ); // 2**(3**2) = 2**9 = 512.

Output to the console:


Evaluating function one
Evaluating function two
Evaluating function three
512

Although we could rely on the precedence and associativity rules, using parentheses to explicitly define the order of operations generally results in clearer code and is generally considered best practice.

However, what is within parentheses is not always evaluated first when dealing with short-circuit evaluation.


let a = true;
console.log( a || (b * c) ); // logs: true // b * c was not evaluated at all, even though it is in parentheses