JavaScript Arithmetic Operators: Addition, Subtraction, Multiplication & More

Basic Arithmetic Operators

JavaScript provides five fundamental arithmetic operators: addition (+), subtraction (-), multiplication (*), division (/), and modulo (%).

Addition (+) adds two numbers together or concatenates strings. Subtraction (-) subtracts the right operand from the left operand.

Multiplication (*) multiplies two numbers. Division (/) divides the left operand by the right operand.

Modulo (%) returns the remainder of division. All these operators work with numbers and perform automatic type conversion when needed.

// Addition
console.log(5 + 3);        // 8
console.log(10.5 + 2.3);   // 12.8

// Subtraction
console.log(10 - 4);       // 6
console.log(5.7 - 2.1);    // 3.6

// Multiplication
console.log(3 * 7);        // 21
console.log(4.5 * 2);      // 9

// Division
console.log(15 / 3);       // 5
console.log(7 / 2);        // 3.5

// Modulo (remainder)
console.log(17 % 5);       // 2
console.log(10 % 3);       // 1
console.log(12 % 4);       // 0

Exponentiation Operator

The exponentiation operator (**) raises the left operand to the power of the right operand. Introduced in ES2016 (ES7).

Syntax: base ** exponent. Equivalent to Math.pow(base, exponent) but more concise and readable.

Supports fractional and negative exponents. Right-associative, meaning a ** b ** c is evaluated as a ** (b ** c).

More performant than Math.pow() in modern JavaScript engines and has better operator precedence.

// Basic exponentiation
console.log(2 ** 3);       // 8 (2 cubed)
console.log(3 ** 2);       // 9 (3 squared)
console.log(16 ** 0.5);    // 4 (square root of 16)

// Fractional exponents
console.log(8 ** (1/3));   // 2 (cube root of 8)
console.log(4 ** -1);      // 0.25 (1/4)

// Right-associative
console.log(2 ** 3 ** 2);  // 512 (2^(3^2) = 2^9 = 512)

// Comparison with Math.pow
console.log(2 ** 10);      // 1024
console.log(Math.pow(2, 10)); // 1024 (same result)

Increment and Decrement Operators

Increment (++) increases a variable's value by 1. Decrement (--) decreases a variable's value by 1.

Both operators have prefix (++x) and postfix (x++) forms with different behaviors.

Prefix form: increments/decrements first, then returns the new value. Postfix form: returns current value, then increments/decrements.

Common in loops and counters, but can be confusing due to side effects. Prefer explicit addition/subtraction for clarity.

let x = 5;

// Postfix increment: return then increment
console.log(x++);     // 5 (returns 5, then x becomes 6)
console.log(x);       // 6

// Prefix increment: increment then return
console.log(++x);     // 7 (x becomes 7, then returns 7)

// Postfix decrement: return then decrement
console.log(x--);     // 7 (returns 7, then x becomes 6)
console.log(x);       // 6

// Prefix decrement: decrement then return
console.log(--x);     // 5 (x becomes 5, then returns 5)

// In expressions
let a = 1, b = 2;
let result = a++ + ++b; // a++ returns 1, ++b returns 3, sum = 4
console.log(result);  // 4
console.log(a, b);    // 2, 3

Type Coercion in Arithmetic

JavaScript automatically converts non-numeric operands to numbers in arithmetic operations.

String concatenation takes precedence over addition when one operand is a string.

Invalid numeric strings convert to NaN. Boolean true becomes 1, false becomes 0.

null converts to 0, undefined converts to NaN. Understanding these rules prevents unexpected results.

// String concatenation vs addition
console.log(5 + 3);       // 8 (addition)
console.log(5 + "3");     // "53" (string concatenation)
console.log("5" + 3);     // "53" (string concatenation)

// Automatic type conversion
console.log("5" - 3);     // 2 (string "5" converts to number)
console.log("5" * 2);     // 10 (string converts to number)
console.log("10" / 2);    // 5 (string converts to number)

// Boolean conversion
console.log(true + 1);    // 2 (true becomes 1)
console.log(false + 1);   // 1 (false becomes 0)

// Invalid conversions
console.log("abc" - 1);   // NaN (invalid number string)
console.log(null + 1);    // 1 (null becomes 0)
console.log(undefined + 1); // NaN (undefined becomes NaN)

Precision and Floating Point Issues

JavaScript uses IEEE 754 double-precision floating-point numbers, which can cause precision errors.

Operations like 0.1 + 0.2 may not equal 0.3 due to binary representation limitations.

Use Number.EPSILON for floating-point comparisons. Consider libraries like decimal.js for financial calculations.

Integer operations are generally safe within JavaScript's safe integer range (Number.MIN_SAFE_INTEGER to Number.MAX_SAFE_INTEGER).

// Floating point precision problems
console.log(0.1 + 0.2);        // 0.30000000000000004 (not exactly 0.3!)
console.log(0.1 + 0.2 === 0.3); // false!

// Using Number.EPSILON for comparison
const EPSILON = Number.EPSILON;
function floatEqual(a, b) {
  return Math.abs(a - b) < EPSILON;
}

console.log(floatEqual(0.1 + 0.2, 0.3)); // true

// Safe integer range
console.log(Number.MAX_SAFE_INTEGER);    // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER);    // -9007199254740991

// Beyond safe integers
console.log(9007199254740992 + 1);       // 9007199254740992 (precision lost)
console.log(9007199254740992 + 2);       // 9007199254740994 (wrong!)

Operator Precedence

Arithmetic operators have different precedence levels that determine evaluation order.

Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).

Modulo (%) has the same precedence as multiplication and division.

Exponentiation (**) has the highest precedence among arithmetic operators.

Use parentheses to override precedence and make expressions clear.

// Multiplication before addition
console.log(2 + 3 * 4);     // 14 (3*4=12, then 2+12)
console.log((2 + 3) * 4);   // 20 (parentheses override precedence)

// Division and modulo same precedence (left-to-right)
console.log(20 / 3 % 2);    // 1.333... % 2 = 1.333...
console.log(20 % 3 / 2);    // 2 / 2 = 1

// Exponentiation highest precedence
console.log(2 * 3 ** 2);    // 18 (3**2=9, then 2*9)
console.log(2 ** 3 * 2);    // 16 (2**3=8, then 8*2)

// Complex expression with parentheses
console.log((5 + 3) * (10 - 2) / 2); // (8) * (8) / 2 = 32

Special Cases and Edge Cases

Division by zero returns Infinity (positive) or -Infinity (negative), not an error.

Modulo with negative numbers: sign follows the dividend (left operand).

NaN in any arithmetic operation results in NaN. Infinity arithmetic follows mathematical rules.

BigInt arithmetic requires both operands to be BigInt values, no automatic conversion.

Performance Considerations

Modern JavaScript engines optimize arithmetic operations efficiently.

Bitwise operations on integers can be faster than equivalent arithmetic operations in some cases.

For intensive calculations, consider WebAssembly or specialized libraries.

Use appropriate numeric types (Number vs BigInt) based on your requirements.

Common Patterns and Use Cases

Counter variables in loops. Calculating totals and averages. Animation frame calculations.

Geometric calculations (area, perimeter, distance). Financial computations (interest, percentages).

Array indexing and bounds checking. Time and date arithmetic. Game physics and scoring.

Data validation and normalization. Statistical calculations. Matrix operations.

Best Practices

Use parentheses for complex expressions to make precedence explicit.

Be aware of floating-point precision limitations for financial calculations.

Handle division by zero appropriately in your application logic.

Consider using BigInt for large integer calculations.

Test edge cases like NaN, Infinity, and very large/small numbers.

Use increment/decrement operators judiciously to avoid confusion.

Common Pitfalls

• Confusing string concatenation with addition: Be explicit about types. Use Number() or parseFloat() for string-to-number conversion.
• Not handling floating-point precision: Use Number.EPSILON for floating-point comparisons and consider decimal libraries for financial calculations.
• Misunderstanding increment/decrement precedence: Use explicit assignment (x = x + 1) instead of ++/-- when the difference matters.
• Not checking for division by zero: Add validation before division operations to prevent Infinity results.
• Ignoring operator precedence in complex expressions: Use parentheses to make evaluation order explicit and avoid bugs.
• Mixing BigInt and regular numbers: Use explicit conversion with BigInt() or Number() when mixing types.
• Assuming integer operations are always safe: Be aware of Number.MAX_SAFE_INTEGER limits for large integer calculations.
• Not handling NaN propagation: Validate inputs and use isNaN() checks to prevent NaN from spreading through calculations.

Frequently Asked Questions