Platform under construction

Operators & Expressions

Intermediate

Arithmetic Operators

Arithmetic operators calculate values, but the plus operator also joins strings. That double role is powerful and dangerous.

const quantity = 5;
const price = 12;

quantity * price;     // 60
"5" + price;         // "512"

Operators & Expressions

Arithmetic expressions should read like intentional calculations.

Arithmetic operators work with numbers and BigInts. You will use them for totals, counters, percentages, dimensions, indexes, timers and calculations inside UI logic.

The common operators are addition, subtraction, multiplication, division, remainder and exponentiation. Increment and decrement also exist, but they mutate a variable as part of the expression.

The dangerous detail is +. With numbers, it adds. With strings, it concatenates. If one side is a string, JavaScript can move the whole expression toward text instead of math.

+

Adds numbers or concatenates strings. Convert input before using it in totals.

-, *, /

Numeric operators that usually push values toward numbers.

%

Remainder after division. Useful for cycles, even checks and wrapping indexes.

**

Exponentiation. Use it for powers, not repeated multiplication by hand.

Examples

Operators are small symbols with big consequences.

Convert first, calculate second

const rawItems = "5";
const itemCount = Number(rawItems);
const pricePerItem = 12;

const total = itemCount * pricePerItem;
console.log(total); // 60

The plus trap

const rawItems = "5";
const pricePerItem = 12;

const total = rawItems + pricePerItem;
console.log(total); // "512"

Rules that matter

Make expression intent visible.

JavaScript operators are compact, but compact is not always clear. Convert values before comparing or calculating, use strict checks by default and add parentheses when a future reader would otherwise need to remember a precedence table.

Convert form values

Input values are strings. Convert them before math.

Use + carefully

+ is both addition and string concatenation.

Check NaN

Invalid numeric conversion produces NaN and can poison the rest of a calculation.

Prefer readable updates

count += 1 is clear. Complex ++ expressions are harder to read.

Use % for cycles

Remainder is useful for even checks and rotating through indexes.

Do not mix Number and BigInt

BigInt arithmetic must stay BigInt unless you convert deliberately.

Production thinking

Readable expressions prevent silent bugs.

Why does this matter?

Arithmetic bugs often do not crash the page. They quietly show the wrong total, wrong index or wrong state.

Accessibility

Bad calculations can produce wrong validation text, wrong progress values and wrong disabled states.

Production note

Production code should normalize numeric input at boundaries and keep calculation expressions small enough to read.

SEO note

If prices, counts or ratings are calculated in JavaScript, wrong arithmetic can display wrong content and structured values.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace * with + and see why string input becomes dangerous.
Add a discount percentage and subtract it from the total.
Use % to show whether the item count is even or odd.

Practice assignment

Do this before moving to the next topic.

Write one addition expression and one concatenation expression.
Convert a string before multiplying it.
Explain what NaN means in a calculation.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Arithmetic Operators.