JavaScript Arithmetic Operators: Addition, Subtraction, Multiplication

JavaScript arithmetic operators let you add, subtract, multiply, divide, find remainders, raise numbers to powers, and change values by one. They are some of the first operators you use in JavaScript, but they also have a few behavior details that can surprise beginners.

Quick answer: JavaScript arithmetic operators work on numbers, but some of them also convert other values into numbers. The main operators are +, -, *, /, %, **, ++, and --.

Difficulty: Beginner

You'll understand this better if you know: basic JavaScript values, variables, and the difference between numbers and strings.

1. What Are JavaScript Arithmetic Operators?

Arithmetic operators are symbols that perform mathematical calculations on values. In JavaScript, they usually work with numbers, but some operators also trigger type conversion when the operands are not already numeric.

+ adds two values.
- subtracts one value from another.
* multiplies values.
/ divides values.
% returns the remainder after division.
** raises a number to a power.
++ increments by 1.
-- decrements by 1.

These operators are used in calculations, counters, loops, formatting values, and converting user input into usable numbers.

2. Why JavaScript Arithmetic Operators Matter

Almost every application performs some kind of numeric work: counting items, calculating totals, measuring time, updating scores, or computing percentages. Arithmetic operators are the simplest way to express those calculations directly in code.

They also matter because JavaScript is dynamically typed. That means the same operator can behave differently depending on the values you give it. Understanding the rules helps you avoid confusing results like string concatenation when you expected addition, or NaN when a value is not a valid number.

3. Basic Syntax or Core Idea

Most arithmetic operators are binary, which means they use two operands. Increment and decrement are unary operators, which means they work on one operand.

Simple operator form

Here is the minimal pattern for a binary arithmetic expression:

const result = leftValue + rightValue;

The operator goes between the two values. JavaScript evaluates the expression and stores the result in result.

Unary increment and decrement

The increment and decrement operators change a variable by exactly one:

let count = 10;
count++;
count--;

These operators are common in loops and counters, but they need a variable or writable target, not a literal value.

4. Step-by-Step Examples

Example 1: Addition and subtraction

Addition and subtraction are the most familiar arithmetic operators. They are used whenever you need to combine or reduce numeric values.

const apples = 4;
const oranges = 3;

const totalFruit = apples + oranges;
const difference = apples - oranges;

totalFruit becomes 7, and difference becomes 1. These operators behave as expected when both values are numbers.

Example 2: Multiplication and division

Multiplication and division are useful for scaling values up or down.

const price = 25;
const quantity = 4;

const subtotal = price * quantity;
const sharePerPerson = subtotal / 2;

This code calculates a subtotal of 100 and then splits it into equal parts. Division can produce decimal results, not just whole numbers.

Example 3: Remainder with the modulus operator

The remainder operator, %, returns what is left after division. It is often used for even-and-odd checks and repeating patterns.

const value = 17;
const remainder = value % 5;

In this case, remainder is 2 because 17 divided by 5 leaves a remainder of 2.

Example 4: Exponentiation

Use ** to raise a number to a power. This is cleaner than calling a function for simple power calculations.

const square = 6 ** 2;
const cube = 3 ** 3;

This gives 36 and 27. Exponentiation is especially useful in formulas, scaling, and geometry.

Example 5: Increment and decrement

Increment and decrement are common in loops, counters, and state updates.

let page = 1;

page++;
// page is now 2

page--;
// page is back to 1

These operators update the variable in place and are convenient when the change is always one step.

5. Practical Use Cases

Calculating cart totals in an online store.
Counting items in an array or list.
Updating a score in a game.
Measuring elapsed time from timestamps.
Checking whether a number is even or odd with %.
Stepping through items in a loop with ++ or --.
Scaling values for layout, animation, or data conversion.

These operators appear in both small scripts and large applications because they express common numeric actions clearly.

6. Common Mistakes

Mistake 1: Using + with a string when you want addition

In JavaScript, + can add numbers or concatenate strings. If one operand is a string, JavaScript often treats the whole expression as text concatenation.

Problem: This code looks like numeric addition, but the first value is a string, so the result becomes text instead of a number.

const price = "10";
const tax = 2;

const total = price + tax;

Fix: Convert the string to a number before adding.

const price = 10;
const tax = 2;

const total = price + tax;

The corrected version works because both operands are actual numbers.

Mistake 2: Dividing by a non-number and getting NaN

If a value cannot be converted into a valid number, arithmetic may produce NaN, which means “not a number.”

Problem: The value "abc" cannot be used in numeric division, so the result is not a valid number.

const input = "abc";
const result = input / 2;

Fix: Convert and validate the value before using it in arithmetic.

const input = "24";
const numberValue = Number(input);

const result = numberValue / 2;

The corrected version works because the string is converted to a valid number before the division happens.

Mistake 3: Trying to increment a value that is not writable

The increment and decrement operators need a variable or property that can be updated. They cannot be used on a literal value or on an expression result.

Problem: This code tries to increment a literal, which causes a syntax error because there is no assignable target.

5++;

Fix: Store the value in a variable first, then increment the variable.

let count = 5;
count++;

The corrected version works because count is writable and can be updated.

7. Best Practices

Prefer explicit conversion when input may be text

User input, URL parameters, and form values are often strings. Converting them yourself makes your code easier to reason about.

const quantityInput = "3";
const quantity = Number(quantityInput);

const total = quantity * 12;

Explicit conversion reduces surprises, especially when you expect arithmetic but the data source is text.

Use parentheses to make calculation order obvious

JavaScript follows operator precedence rules, but grouped expressions are easier to read and maintain.

const subtotal = 40;
const taxRate = 0.1;

const total = subtotal + (subtotal * taxRate);

The grouped version makes the tax calculation clear and prevents misreading the expression.

Prefer ++ and -- only for simple counters

Increment and decrement are great for loop counters, but they are not the best choice for more complex state changes.

let step = 0;
step++;

If the update is more complex than “add or subtract one,” use a regular assignment expression instead. That makes the intent clearer to other developers.

8. Limitations and Edge Cases

Arithmetic operators can produce NaN when a value is not a valid number.
Division by zero does not throw an exception; it produces Infinity or -Infinity.
Very large or very small numbers can lose precision because JavaScript numbers use floating-point representation.
% returns the remainder, not a mathematical modulo in every edge case, especially with negative numbers.
++ and -- are not allowed on literals or other non-writable expressions.
BigInt values cannot be freely mixed with regular numbers in arithmetic expressions.

If you see unexpected arithmetic results, check the operand types first. In JavaScript, the values involved often matter as much as the operator itself.

9. Practical Mini Project

Let’s build a tiny shopping-cart total calculator. This example combines addition, multiplication, remainder, and increment-style counting in a realistic way.

const items = [
  { name: "Notebook", price: 7.5, quantity: 2 },
  { name: "Pen", price: 1.25, quantity: 4 }
];

let itemCount = 0;
let subtotal = 0;

for (const item of items) {
  subtotal += item.price * item.quantity;
  itemCount++;
}

const taxRate = 0.08;
const tax = subtotal * taxRate;
const total = subtotal + tax;

const roundedTotal = Math.round(total * 100) / 100;

console.log(`Items: ${itemCount}`);
console.log(`Subtotal: ${subtotal}`);
console.log(`Total: ${roundedTotal}`);

This mini project shows how arithmetic operators work together in a practical calculation. You multiply price by quantity, add totals, count items, and round the final result for display.

10. Key Points

+, -, *, /, %, and ** are the main arithmetic operators.
++ and -- change a variable by one.
+ may concatenate strings instead of adding numbers.
Non-numeric values can produce NaN.
Division by zero produces infinity values, not a thrown error.
Use explicit conversion and parentheses to make arithmetic easier to understand.

11. Practice Exercise

Build a simple score calculator that keeps track of points gained and lost.

Create variables for a starting score, points earned, and points lost.
Compute the final score using arithmetic operators.
Use % to check whether the final score is even or odd.
Print the results with console.log().

Expected output: The script should print the final score and whether it is even or odd.

Hint: Use subtraction for losses and the remainder operator to test divisibility by 2.

Solution:

const startingScore = 50;
const pointsEarned = 17;
const pointsLost = 8;

const finalScore = startingScore + pointsEarned - pointsLost;
const isEven = finalScore % 2 === 0;

console.log(`Final score: ${finalScore}`);
console.log(`Even: ${isEven}`);

12. Final Summary

JavaScript arithmetic operators are the core tools for numeric calculations. They handle everyday operations like addition, subtraction, multiplication, division, remainders, powers, and one-step counter updates. Once you understand how they behave with different value types, they become straightforward and reliable.

The biggest surprises usually come from type conversion, not from the operators themselves. A plus sign can concatenate strings, invalid values can become NaN, and division by zero produces infinity instead of throwing an error. If you convert input deliberately and read expressions carefully, arithmetic in JavaScript stays predictable.

Next, practice these operators in small scripts such as calculators, score counters, and cart totals. The more you use them with real data, the easier it becomes to spot type-related mistakes before they turn into bugs.