How to Fix a JavaScript Number Concatenation Bug

Why + concatenates instead of adds

JavaScript's + operator is overloaded: when both operands are numbers it adds, but when either operand is a string it concatenates. Form fields, query strings, and JSON payloads from certain clients deliver values as strings - so + does the wrong thing silently.

// All three values arrive as strings from a form or JSON body:
const amounts = ["10", "5", "3"];
const total = amounts[0] + amounts[1] + amounts[2];
// total === "1053"  -- string concatenation, not addition

No exception is thrown. The endpoint returns something, just the wrong something - which makes this one of the harder bugs to notice without a targeted test.

The fix: coerce before you sum

Convert each value to a number before accumulating. Python and JavaScript both have the same trap; both have the same fix.

Python (Flask endpoint):

@app.post("/api/total")
def total():
    amounts = (request.get_json(silent=True) or {}).get("amounts", [])
    result = sum(int(a) for a in amounts)
    return jsonify(total=result)

int(a) (or float(a)) converts each string before the sum - sum(...) then adds numbers, not strings.

JavaScript equivalent:

const amounts = ["10", "5", "3"];

// Option 1: unary + (coerces to number)
const total = amounts.reduce((acc, a) => acc + +a, 0);

// Option 2: explicit Number()
const total2 = amounts.reduce((acc, a) => acc + Number(a), 0);

// Option 3: parseInt / parseFloat
const total3 = amounts.reduce((acc, a) => acc + parseInt(a, 10), 0);

Starting the accumulator at 0 (a number) is important: if you start with "" or omit the initial value when the first element is a string, you're back to concatenation.

Validate at the boundary

The most reliable defense is to validate and coerce incoming data the moment it enters your system - before any business logic runs:

• Python: use Pydantic. Declare amounts: list[int] and Pydantic coerces and validates automatically - invalid values raise a 422 instead of silently producing a wrong result.
• TypeScript: use Zod. z.array(z.coerce.number()) parses strings to numbers at the boundary.
• Money: never use float for currency. Represent amounts as integer cents (1050 for $10.50) or use a decimal type (Decimal in Python) to avoid floating point rounding errors on top of the coercion bug.