Operator precedence in Javascript - Step-by-Step Execution

Concept Flow - Operator precedence

Start Expression

↓

Identify Operators

↓

Check Precedence Levels

↓

Evaluate Highest Precedence Operator

↓

Replace with Result

↓

More Operators?

Yes→Repeat Evaluate

No↓

Final Result

The expression is evaluated by first identifying operators, then applying them in order of precedence from highest to lowest until the final result is obtained.

Execution Sample

Javascript

let result = 3 + 4 * 2;
console.log(result);

Calculates 3 plus 4 times 2, showing how multiplication happens before addition.

Execution Table

Step	Expression	Operator Evaluated	Operation	Result
1	3 + 4 * 2	*	4 * 2	8
2	3 + 8	+	3 + 8	11
3	11	None	Final result	11

💡 No more operators left, final result is 11

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
result	undefined	undefined	undefined	11

Key Moments - 2 Insights

Why does multiplication happen before addition in the expression?

Because multiplication (*) has higher precedence than addition (+), so it is evaluated first as shown in step 1 of the execution_table.

What if we want addition to happen first?

We can use parentheses to change precedence, for example (3 + 4) * 2 would add first, which is not shown here but follows the same evaluation steps.

Visual Quiz - 3 Questions

Look at the execution table, what is the result after evaluating the multiplication operator?

A 8

B 11

C 6

D 14

💡 Hint

Check step 1 in the execution_table where 4 * 2 is evaluated.

At which step does the addition operator get evaluated?

A Step 3

B Step 1

C Step 2

D No addition is evaluated

💡 Hint

Look at the operator evaluated column in the execution_table.

If the expression was changed to (3 + 4) * 2, how would the first operation change?

A Multiplication evaluated first

B Addition evaluated first

C No operations evaluated

D Both evaluated simultaneously

💡 Hint

Parentheses change precedence, so addition inside parentheses is evaluated first.

Concept Snapshot

Operator precedence decides the order operators are evaluated.
Multiplication (*) has higher precedence than addition (+).
Expressions are evaluated from highest to lowest precedence.
Use parentheses () to override default precedence.
Example: 3 + 4 * 2 equals 3 + (4 * 2) = 11.

Full Transcript

Operator precedence in JavaScript means some operations happen before others. For example, multiplication happens before addition. In the code '3 + 4 * 2', JavaScript first multiplies 4 by 2 to get 8, then adds 3 to get 11. This is because '*' has higher precedence than '+'. If you want addition first, use parentheses like '(3 + 4) * 2'. This changes the order so addition happens before multiplication. The execution table shows each step: first multiplication, then addition, then the final result. Variables update after all operations finish. Remember, parentheses always have the highest precedence.

Practice

1. Which operator has the highest precedence in the expression 3 + 4 * 2?

easy

A. Multiplication (*)

B. Addition (+)

C. Subtraction (-)

D. Division (/)

Solution

1. Step 1: Recall operator precedence rules

   Multiplication and division have higher precedence than addition and subtraction.

2. Step 2: Identify operators in the expression

   The expression has addition (+) and multiplication (*). Multiplication runs first.

3. Final Answer:

   Multiplication (*) -> Option A

4. Quick Check:

   Multiplication > Addition [OK]

Hint: Multiplication/division run before addition/subtraction [OK]

Common Mistakes:

• Thinking addition runs before multiplication
• Ignoring operator precedence
• Assuming left-to-right always applies

2. Which of the following expressions is syntactically correct in JavaScript?

easy

A. 5 + (3 * 2)

B. 5 + * 3

C. 5 + 3 * )2(

D. 5 + 3 * 2)

Solution

1. Step 1: Check each expression for syntax errors

   5 + * 3 has two operators in a row (+ *), which is invalid. 5 + 3 * )2( has misplaced parentheses. 5 + 3 * 2) has an unmatched closing parenthesis.

2. Step 2: Confirm correct syntax

   5 + (3 * 2) uses parentheses correctly and has valid operators and operands.

3. Final Answer:

   5 + (3 * 2) -> Option A

4. Quick Check:

   Valid parentheses and operators [OK]

Hint: Check parentheses and operator placement carefully [OK]

Common Mistakes:

• Misplacing parentheses
• Using two operators together
• Unmatched parentheses

3. What is the output of the following code?

console.log(10 - 2 * 3 + 4 / 2);

medium

A. 8

B. 12

C. 6

D. 10

Solution

1. Step 1: Apply operator precedence

   Multiplication (*) and division (/) run before addition (+) and subtraction (-). Calculate 2 * 3 = 6 and 4 / 2 = 2 first.

2. Step 2: Calculate remaining expression

   Expression becomes 10 - 6 + 2. Calculate left to right: 10 - 6 = 4, then 4 + 2 = 6.

3. Final Answer:

   6 -> Option C

4. Quick Check:

   10 - 6 + 2 = 6 [OK]

Hint: Do * and / before + and -, then left to right [OK]

Common Mistakes:

• Adding before multiplying
• Ignoring division precedence
• Calculating right to left

4. Find the error in this expression:

let result = 5 + 3 * / 2;

medium

A. No error, expression is valid

B. Incorrect use of parentheses

C. Division operator should be replaced with subtraction

D. Missing operand between * and /

Solution

1. Step 1: Analyze the operator sequence

   The expression has '* /' operators together without a number between them, which is invalid syntax.

2. Step 2: Identify the syntax error

   Every operator needs operands on both sides. Here, the '*' operator is missing its right operand before the '/' operator.

3. Final Answer:

   Missing operand between * and / -> Option D

4. Quick Check:

   Operators need operands on both sides [OK]

Hint: Operators must have numbers on both sides [OK]

Common Mistakes:

• Ignoring missing operand
• Assuming expression is valid
• Confusing operator roles

5. Given the expression let x = 4 + 3 * 2 ** 2 / (1 + 1);, what is the value of x?

hard

A. 13

B. 10

C. 11

D. 14

Solution

1. Step 1: Evaluate parentheses and exponentiation first

   Parentheses: (1 + 1) = 2. Exponentiation: 2 ** 2 = 4.

2. Step 2: Calculate multiplication and division left to right

   Expression becomes 4 + 3 * 4 / 2. Calculate 3 * 4 = 12, then 12 / 2 = 6.

3. Step 3: Perform addition

   Finally, 4 + 6 = 10.

4. Final Answer:

   10 -> Option B

5. Quick Check:

   Parentheses & exponentiation first, then * /, then + [OK]

Hint: Do parentheses, then **, then * /, then + [OK]

Common Mistakes:

• Ignoring exponentiation precedence
• Doing addition before multiplication
• Miscomputing parentheses