JavaScript Arithmetic: Performing Mathematical Calculations with Operators

The 7 Arithmetic Operators (Complete Reference)

The Basics in Action

let price = 499;
let quantity = 3;
let subtotal = price * quantity;
// 1497
let tax = subtotal * 0.18;
// 269.46
let total = subtotal + tax;
// 1766.46
let perPerson = total / 4;
// 441.615 — splitting 4 ways
console.log(`Total: ₹${total}`);
// Total: ₹1766.46
console.log(`Each pays: ₹${perPerson}`);
// Each pays: ₹441.615

Congratulations — you just wrote the core logic of every shopping cart ever built. 🛒

Division: No Rounding Surprises

Unlike some languages, JavaScript divisionalways keeps decimals:

console.log(10 / 4);
// 2.5 ✅ — not 2!
console.log(7 / 2);
// 3.5
console.log(10 / 0);
// Infinity ♾️ — no crash, just infinity
console.log(-10 / 0);
// -Infinity
console.log(0 / 0);
// NaN — mathematically undefined

That last trio surprises programmers from other languages (where dividing by zero crashes the program). JavaScript just calmly answersInfinityorNaN.

⭐ The Modulus Operator (%) — The Hidden Superstar

%gives you theremainderafter division — and it's secretly one of the most useful operators in all of programming:

console.log(10 % 3);
// 1  → 10 ÷ 3 = 3 remainder 1
console.log(15 % 5);
// 0  → divides perfectly
console.log(7 % 2);
// 1  → odd number alert!

Real Uses You'll Actually Write

① Even or odd?(The interview classic)

let number = 42;
if (number % 2 === 0) {
  console.log(`${number} is EVEN ✅`);
  // ← runs
} else {
  console.log(`${number} is ODD`);
}

② Every-Nth-item logic— "highlight every 3rd row":

for (let row = 1;
row <= 6;
row++) {
  if (row % 3 === 0) {
    console.log(`Row ${row}: ⭐ highlighted!`);
  } else {
    console.log(`Row ${row}`);
  }
}// Row 3 and Row 6 get the star ⭐

③ Wrapping around— like a clock or a carousel:

let position = 14 % 12;
// 2 → 14 o'clock = 2 o'clock 🕑

If a problem involvescycles,remainders, orevery-Nth, the answer is almost always%.

The Exponent Operator (**) — Powers Made Easy

Introduced in 2016,**raises a number to a power:

console.log(2 ** 3);
// 8   → 2 × 2 × 2console.log(5 ** 2);    // 25  → 5 squaredconsole.log(10 ** 6);   // 1000000 → a millionconsole.log(2 ** 0.5);  // 1.414… → square root of 2! (power of ½)console.log(27 ** (1/3)); // 3 → cube root of 27

💡Trick:x ** 0.5is a square root,x ** (1/3)is a cube root. No special function needed.

Increment (++) and Decrement (--) — The Counters

These add or subtract exactly 1 — you'll use them in every loop you ever write:

let likes = 99;
likes++;
console.log(likes);
// 100 🎉
let lives = 3;
lives--;
console.log(lives);
// 2

⚠️ Prefix vs Postfix: ++x vs x++

Placing++beforeorafterthe variable changeswhenthe value updates:

let a = 5;
console.log(a++);
// 5 — postfix: use the OLD value, THEN increment
console.log(a);
// 6 — now it's updated
let b = 5;
console.log(++b);
// 6 — prefix: increment FIRST, then use
console.log(b);
// 6

Beginner advice:in your first months, usex++on its own line and don't stress about the difference. You'll see it in loops constantly, where both behave identically.

Compound Assignment: The Shortcuts

Update a variable using its own current value — the shorthand family from Lesson 6, now in action:

let score = 100;
score += 50;
// score = score + 50  → 150
score -= 20;
// score = score - 20  → 130
score *= 2;
// score = score * 2   → 260
score /= 4;
// score = score / 4   → 65
score %= 10;
// score = score % 10  → 5
console.log(score);
// 5

// Real-world: a wallet app 💰
let wallet = 1000;
wallet -= 299;
// bought headphones
wallet -= 150;
// ordered lunch
wallet += 500;
// friend paid me back
console.log(`Balance: ₹${wallet}`);
// Balance: ₹1051

Operator Precedence: What Calculates First? 🧮

When operators mix, JavaScript follows priority rules (like BODMAS from school):

console.log(2 + 3 * 4);
// 14 — multiplication FIRST, not 20!
console.log((2 + 3) * 4);
// 20 — parentheses override everything
console.log(10 - 4 / 2);
// 8  — division before subtraction
console.log(2 + 3 ** 2);
// 11 — exponent before addition (3² = 9, then +2)

Priority order (high → low):

1. ()— parentheses always win
2. **— exponents
3. */%— multiplication family (left to right)
4. +-— addition family (left to right)

🏆 The professional habit:when in doubt,add parentheses.total = (price * qty) - (price * qty * discount)is clearer than relying on precedence memory — and clear code has fewer bugs. Nobody has ever been criticized for too many parentheses in a calculation.

The Math Object: JavaScript's Built-In Calculator

Beyond operators, JavaScript ships with aMathobject packed with tools. The daily essentials:

script.js

Copy Code Run Online

// Rounding — three flavorsconsole.log(Math.round(4.6));    // 5  — normal roundingconsole.log(Math.round(4.4));    // 4console.log(Math.floor(4.9));    // 4  — always rounds DOWNconsole.log(Math.ceil(4.1));     // 5  — always rounds UP
// Chopping decimals entirelyconsole.log(Math.trunc(4.9));    // 4  — just removes the fraction
// Min, max, and absoluteconsole.log(Math.max(5, 12, 8));   // 12 — biggest of the groupconsole.log(Math.min(5, 12, 8));   // 5  — smallestconsole.log(Math.abs(-42));        // 42 — distance from zero
// Powers and roots (operator alternatives)console.log(Math.pow(2, 10));    // 1024 — same as 2 ** 10console.log(Math.sqrt(144));     // 12 — square root
// Randomness 🎲console.log(Math.random());      // 0 → 0.9999… (never reaches 1)

🎲 The Famous Random Number Recipe

Math.random()alone gives decimals between 0 and 1. The classic combo for arandom whole number between 1 and 10:

script.js

Copy Code Run Online

let randomNum = Math.floor(Math.random() * 10) + 1;
console.log(randomNum);
// 1–10, different every run!
// Dice roll (1–6):let dice = Math.floor(Math.random() * 6) + 1;console.log(`You rolled: ${dice} 🎲`);

Memorize this pattern —Math.floor(Math.random() * max) + 1— it appears in every game, quiz app, and raffle script ever written.

---

🐛 The 0.1 + 0.2 Problem (And How to Fix It)

Time to face JavaScript's most famous math scandal:

script.js

Copy Code Run Online

console.log(0.1 + 0.2);
// 0.30000000000000004 😱console.log(0.1 + 0.2 === 0.3);      // false! 🔥

Why?Computers store numbers in binary, and decimals like 0.1 have no exact binary representation — like how 1/3 = 0.333… never ends in decimal. Tiny rounding dust accumulates.This affects ALL programming languages, not just JavaScript.

The Fixes

①toFixed()for displaying prices:

script.js

Copy Code Run Online

let result = 0.1 + 0.2;
console.log(result.toFixed(2));
// "0.30" — string, formatted ✅console.log(Number(result.toFixed(2))); // 0.3 — back to a real number

② Work in the smallest unit (the professional way):

script.js

Copy Code Run Online

// Never calculate money in rupees — use paise (integers only!)let priceInPaise = 1999 + 499;         // ₹19.99 + ₹4.99 in paiseconsole.log(`Total: ₹${
priceInPaise / 100
}`);   // Total: ₹24.98 ✅

Banks and payment systems worldwide use this integer trick. No decimals, no dust, no bugs.

⚠️ Related danger:never compare float results with===. Instead of0.1 + 0.2 === 0.3, check if they'reclose enough:

script.js

Copy Code Run Online

console.log(Math.abs((0.1 + 0.2) - 0.3) < 0.0001);
// true ✅

---

Common Beginner Mistakes (And Fixes)

❌ Mistake	🔍 What Happens	✅ Fix
"5" + 5in calculations	"55"— string gluing (Lesson 9!)	Convert first:Number("5") + 5
Using%for percentages	50 % 100=50(remainder!)	Percentage =(part / total) * 100
if (0.1 + 0.2 === 0.3)	Alwaysfalse😱	Compare with a tolerance, or use integers
Math.floor(-4.5)expecting −4	Gives−5— floor goes DOWN	UseMath.trunc(-4.5)→−4
let avg = total / countwhen count is 0	InfinityorNaN	Guard first:if (count > 0)
ForgettingtoFixed()returns a string	"24.98" + 5→"24.985"😱	Wrap it:Number(x.toFixed(2))

---

🛠️ Mini Project: Bill Splitter (Put It All Together!)

script.js

Copy Code Run Online

// 🧾 The Bill Splitter — using everything from this lesson
const billAmount = 1247.50;
const friends = 4;
const tipPercent = 10;
const tip = billAmount *(tipPercent / 100);
// 124.75
const total = billAmount + tip;
// 1372.25
const perPerson = total / friends;
// 343.0625
const roundedShare = Number(perPerson.toFixed(2));
// 343.06
console.log(`Bill: ₹${billAmount}`);
console.log(`Tip (${tipPercent}%): ₹${tip}`);
console.log(`Total: ₹${total}`);
console.log(`Each friend pays: ₹${roundedShare} 💸`);

Output:

script.js

Copy Code Run Online

Bill: ₹1247.5Tip(10%): ₹124.75Total: ₹1372.25Each friend pays: ₹343.06 💸

Multiplication, division, percentage math, andtoFixed()— four lesson concepts in one practical program. Try changing the values and watch it recalculate!

---

Quick Self-Check: Lesson 12 Quiz 🧠

1. What's the output?console.log(17 % 5);
2. What's the output?console.log(2 + 3 * 2 ** 2);
3. Write the one-liner that generates a random number from 1 to 100.
4. Why does0.1 + 0.2 === 0.3returnfalse?
5. What's the difference betweenMath.floor(4.9),Math.ceil(4.1), andMath.round(4.5)?

(Answers: 1.2— 17 ÷ 5 = 3 remainder 2 · 2.14— exponent first (2²=4), then multiplication (3×4=12), then addition (2+12) · 3.Math.floor(Math.random() * 100) + 1· 4. Binary floating-point can't store 0.1 exactly — the sum is 0.30000000000000004 · 5. floor→4 (always down), ceil→5 (always up), round→5 (nearest)