Imagine you're following a blueprint to build a house. The blueprint says: "Install the windows, pour the concrete foundation, and paint the walls." If you actually followed those instructions in the order they were written, you'd have a disaster on your hands. You can't install windows if there are no walls, and you definitely can't paint walls before the foundation is poured. In the real world, there is an implied "order of operations" that overrides the simple sequence of the list.

JavaScript does the exact same thing. When you write a line of code with multiple operators—like adding, multiplying, and comparing all in one go—JavaScript doesn't just read from left to right. It has a built-in hierarchy of "seniority." Some operators are more powerful than others and get to jump to the front of the line.

Who Gets to Go First?

I've seen countless beginners get tripped up by this because they expect the code to execute like a sentence. But JavaScript follows a strict pecking order. For example, multiplication (*) and division (/) always take precedence over addition (+) and subtraction (-).

const result = 10 + 5 * 2; 
console.log(result); // You might expect 30, but it's actually 20.

In this case, JavaScript sees the multiplication and says, "This is more urgent than the addition." It calculates 5 * 2 first, then adds the 10. If you're coming from a math background, this is just like PEMDAS. If you aren't, just remember that the "stronger" mathematical operators always win.

Taking Control with Parentheses

Now, what happens when you actually want the addition to happen first? This is where parentheses come in. In the world of operator precedence, parentheses are the ultimate authority. They are the "emergency override" button. Anything inside parentheses is handled first, regardless of what's happening outside of them.

const result = (10 + 5) * 2;
console.log(result); // Now we get 30.

I'll give you a piece of professional advice: when in doubt, use parentheses. Even if you know the precedence rules by heart, adding parentheses makes your code much easier for the next person (or future you) to read. It removes the guesswork and tells the reader, "I meant for this to happen in this specific order."

The Tie-Breaker: Associativity

Sometimes you'll run into a situation where two operators have the exact same level of seniority. For instance, multiplication and division are equal in power. When that happens, JavaScript uses something called "associativity."

For most operators, this just means they evaluate from left to right. It's like a queue at a coffee shop; the person who got there first gets served first.

const value = 100 / 5 * 2;
// Both / and * have the same precedence.
// JS goes left-to-right: (100 / 5) = 20, then (20 * 2) = 40.
console.log(value); // 40

There are a few exceptions—like the assignment operator (=), which works right-to-left—but for the vast majority of the logic you'll be writing, left-to-right is the rule of thumb.

📋 Practical Task

The Bulk-Order Discount Calculator

You are building a checkout system for a wholesale store. The store offers a deal: "Buy 5 items at a bulk price, then get a flat $10 discount on the total, and finally, apply a 10% tax to the whole thing."

The current code is producing the wrong total because it's ignoring operator precedence. Your task is to fix the finalPrice calculation using parentheses to ensure the operations happen in the correct order: Bulk Total → Discount → Tax.

const itemPrice = 20;
const quantity = 5;
const discount = 10;
const taxRate = 1.10; // Represents 110% of the price

// FIX THIS LINE:
const finalPrice = itemPrice * quantity - discount * taxRate;

console.log("The total should be 99, but it currently is: " + finalPrice);