Operator precedence in Javascript - Mini Project: Build & Apply

Operator precedence

📖 Scenario: Imagine you are calculating the total cost of items in a shopping cart with discounts and taxes. You need to understand how JavaScript calculates expressions with multiple operators to get the correct total.

🎯 Goal: You will write a JavaScript program that calculates the final price of an item using operator precedence rules. You will create variables for price, discount, and tax rate, then write an expression that applies discount and tax correctly.

📋 What You'll Learn

Create variables for price, discount, and taxRate with exact values

Create a variable discountedPrice that applies the discount to the price

Create a variable finalPrice that adds tax to the discounted price using correct operator precedence

Print the finalPrice with two decimal places

💡 Why This Matters

🌍 Real World

Calculating prices with discounts and taxes is common in shopping apps and websites.

💼 Career

Understanding operator precedence helps avoid bugs in financial calculations and improves coding accuracy.

1

Set up the initial price, discount, and tax rate

Create three variables: price with value 100, discount with value 0.2 (20%), and taxRate with value 0.1 (10%).

Javascript

# Your code here

Hint

Use const to create variables with the exact names and values.

2

Calculate the discounted price

Create a variable called discountedPrice that calculates the price after subtracting the discount. Use the expression price - price * discount.

Javascript

const price = 100;
const discount = 0.2;
const taxRate = 0.1;
// Calculate discountedPrice here
# Your code here

Hint

Remember multiplication happens before subtraction.

3

Calculate the final price including tax

Create a variable called finalPrice that adds tax to the discounted price. Use the expression discountedPrice + discountedPrice * taxRate to apply tax correctly.

Javascript

const price = 100;
const discount = 0.2;
const taxRate = 0.1;
const discountedPrice = price - price * discount;
// Calculate finalPrice here
# Your code here

Hint

Multiplication happens before addition, so tax is calculated on discountedPrice first.

4

Print the final price with two decimals

Use console.log to print finalPrice rounded to two decimal places using finalPrice.toFixed(2).

Javascript

const price = 100;
const discount = 0.2;
const taxRate = 0.1;
const discountedPrice = price - price * discount;
const finalPrice = discountedPrice + discountedPrice * taxRate;
// Print finalPrice here
# Your code here

Hint

Use console.log(finalPrice.toFixed(2)) to show two decimals.

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