Start learning free

LESSON 21 OF 348 · CALCULATIONS WITH NUMBERS

Operator Precedence in TypeScript: Order of Evaluation

Lesson Read the full explanation

TL ; DR:

  • When we string operations together, TypeScript must know which one to do first. This is called operator precedence.


  • * and / are performed before + and -:

    • console.log(1 + 2 * 3); // Prints 7
console.log(6 - 4 / 2); // Prints 4
console.log(5 * 4 - 2 / 2); // Prints 19

  • We can add () to force an operation to be performed first:

    console.log((1 + 2) * 3); // Prints 9
console.log((6 - 4) / 2); // Prints 1
console.log(5 * (4 - 2) / 2); // Prints 5

Full lesson:

When we string operations together, TypeScript must know which one to do first. This is called operator precedence.

This is the hierarchy from highest precedence to lowest precedence:

  • Parentheses are always respected
  • Exponentiation (raise to a power)
  • Multiplication, Division and Remainder
  • Addition and Subtraction
  • Left to right

First example:

console.log(1 + 2 * 3); // Output: 7

Multiplication is executed before addition, so:

1 + 2 * 3 = 1 + 6 = 7

Second example:

console.log((1 + 2) * 3); // Output: 9

What's inside parentheses is executed before multiplication, so:

(1 + 2) * 3 = 3 * 3 = 9

Third example:

console.log(6 / 4 * 3 + 5); // Output: 9.5

Multiplication and division come before addition. Also, multiplication and division have the same priorty so they are executed from left to right:

6 / 4 * 3 + 5 = 1.5 * 3 + 5 = 4.5 + 5 = 9.5

Forth example:

console.log(6 / ((4 + 2) / 3)); // Output: 3

Computer sees parentheses so it looks at it like this:

6 / ((4 + 2) / 3) = 6 / x, where x = (4 + 2) / 3

I have to compute x first. Parantheses are executed before division:
(4 + 2) / 3 = 6 / 3 = 2

I can replace x with 2:
6 / ((4 + 2) / 3) = 6 / 2 = 3

Assignment
Follow the Coding Tutorial and let's practice with operator precedence!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · CALCULATIONS WITH NUMBERS

    Operator Precedence in TypeScript, explained

    What operator precedence is

    When an expression has more than one operator, TypeScript has to decide which one to apply first. The rules for that decision are called operator precedence. They are the same rules you know from school arithmetic: in 1 + 2 * 3, the multiplication is done before the addition.

    console.log(1 + 2 * 3);   // 7

    TypeScript calculates 2 * 3 first, which is 6, and then 1 + 6, which is 7. Reading left to right and adding first would give 9, so knowing the rules matters.

    The order, from first to last

    1. Parentheses ( ) are always evaluated first.
    2. Exponentiation **.
    3. Multiplication, division and remainder *, / and %, all at the same level.
    4. Addition and subtraction + and -, at the same level.

    When operators sit at the same level, TypeScript goes from left to right. The one exception is **, which goes from right to left.

    Examples

    console.log(6 - 4 / 2);        // 4    (4 / 2 first, then 6 - 2)
console.log(5 * 4 - 2 / 2);    // 19   (20 - 1)
console.log(6 / 4 * 3 + 5);    // 9.5  (1.5 * 3 + 5)
console.log(10 - 4 - 3);       // 3    ((10 - 4) - 3)
console.log(2 ** 3 ** 2);      // 512  (2 ** 9, right to left)

    In 6 / 4 * 3 + 5, division and multiplication share a level, so the division runs first because it is on the left: 6 / 4 is 1.5, times 3 is 4.5, plus 5 is 9.5.

    Using parentheses

    Parentheses override every other rule, because whatever is inside them is calculated first:

    console.log((1 + 2) * 3);          // 9
console.log((6 - 4) / 2);          // 1
console.log(5 * (4 - 2) / 2);      // 5
console.log(6 / ((4 + 2) / 3));    // 3

    The last example nests parentheses. Evaluation starts from the innermost pair: (4 + 2) is 6, then 6 / 3 is 2, then 6 / 2 is 3. You can also use parentheses where they are not needed, to make an expression easier to read. (price * discount) / 100 and price * discount / 100 are the same expression.

    Exponentiation and the minus sign

    There is one place where TypeScript refuses to guess. A minus sign directly in front of the base of **, as in -2 ** 2, is a syntax error, because it could mean (-2) ** 2 (which is 4) or -(2 ** 2) (which is -4). You write the parentheses yourself.

    Working through a longer expression

    For a long expression, rewrite it one step at a time, always doing the highest-precedence operation first. Take 4 + 6 % 4 * 2 - 3 ** 2:

    1. The power goes first: 3 ** 2 is 9, which leaves 4 + 6 % 4 * 2 - 9.
    2. Remainder and multiplication share a level, so go left to right. 6 % 4 is 2, giving 4 + 2 * 2 - 9, and then 2 * 2 is 4, giving 4 + 4 - 9.
    3. Addition and subtraction go left to right: 4 + 4 is 8, and 8 - 9 is -1.

    Running it prints -1, as the steps predict.

    The exercise

    The starter code is a single line:

    console.log(2 + 3 * 3);

    It prints 11, because the multiplication runs first: 3 times 3 is 9, and 2 plus 9 is 11. The goal is to make it print 15 by changing only the order of evaluation.

    1. Find the target. To get 15 from a product with 3, the other factor must be 5, which is exactly 2 + 3.
    2. Wrap the addition in parentheses so it runs first.
    3. Keep the rest. The multiplication by 3 stays outside.
    console.log((2 + 3) * 3);

    Now TypeScript computes 2 + 3 as 5, then 5 * 3 as 15, and prints 15.

    If you are ever unsure how an expression will be read, run it with console.log and compare the output with your hand calculation. The two should agree before you move on to larger programs.

    Common mistakes

    • Assuming left to right everywhere. That is only true among operators at the same level. 2 + 3 * 3 is not read from left to right.
    • Parentheses in the wrong place. 2 + (3 * 3) is the original expression with redundant parentheses, and it still prints 11. (2 + 3 * 3) also prints 11.
    • Misreading chained division. 8 / 4 / 2 is 1, while 8 / (4 / 2) is 4.
    • Mixing up the levels of ** and *. 2 * 3 ** 2 is 18, because the power runs first. (2 * 3) ** 2 is 36.

    Key takeaways

    • Order: parentheses, then **, then * / %, then + -.
    • Operators at the same level go left to right, except **.
    • When in doubt, add parentheses. They never hurt, and they show what you mean.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free