ToPrimitive, valueOf, and toString

## Two operators wearing one symbol In JavaScript the binary `+` token means either numeric addition or string concatenation, and which one you get is decided at runtime from the operand *values*, never from how the code looks. The specification's algorithm is short: 1. Evaluate both operands. 2. Convert each to a primitive via `ToPrimitive` with the **default** hint (objects go through `Symbol.toPrimitive`, otherwise `valueOf` then `toString`). 3. If **either** primitive is a string, apply `ToString` to both and concatenate. 4. Otherwise apply `ToNumber` (or `ToNumeric`) to both and add. Step 3 is the whole story: one string anywhere in the pair turns the operation into concatenation. Note the ordering — the primitive conversion happens *before* the string test, which is why an object that stringifies can flip a whole expression into concatenation. ## Why the other operators behave `-`, `*`, `/`, `%` and `**` have no second meaning. Their algorithm skips the string test entirely and converts both operands with `ToNumber`: ```js '5' - 3 // 2 '5' * '2' // 10 '10' / 2 // 5 '5' - 'a' // NaN — 'a' does not parse as a number ``` That is the fastest way to remember the rule: **only `+` can concatenate**. Some codebases even exploit it, using unary `+value` or `value * 1` as a terse numeric coercion. ## ToNumber on strings, briefly When a string is converted to a number the whole string must be a valid numeric literal after trimming whitespace, otherwise the result is `NaN`. The empty string is the trap: `Number('')` is `0`, not `NaN`, so `'' - 1` is `-1` and `[] * 2` is `0`. ```js Number(' 42 ') // 42 Number('42px') // NaN Number('') // 0 Number('\n') // 0 ``` ## Left-associativity turns one string into many `+` groups left to right, so a chain is evaluated pairwise and the first concatenation makes every later operand a string too: ```js 1 + 2 + '3' // '33' — (1+2) is 3, then 3 + '3' concatenates '1' + 2 + 3 // '123' — '1'+2 is '12', then '12'+3 1 + 2 + '3' + 4 // '334' ``` This is the mechanism behind the classic production bug where a numeric total silently becomes a string because one value arrived from an input field, `JSON` payload or `localStorage` as text, and every subsequent `total = total + item` appends instead of adding. ## Null, undefined and booleans Because these are primitives already, step 2 does nothing and step 4 applies `ToNumber`: `null` becomes `0`, `undefined` becomes `NaN`, `true` becomes `1`, `false` becomes `0`. ```js 1 + null // 1 1 + undefined // NaN 1 + true // 2 '1' + null // '1null' — string present, so ToString(null) is 'null' ``` Note how the same `null` becomes `0` in one line and `'null'` in the next: the operand's contribution depends entirely on whether the pair went down the string branch or the number branch. ## Objects on either side An object operand is converted before the branch is chosen, and with the default hint that means `valueOf` first, `toString` second for ordinary objects. Plain objects therefore produce `'[object Object]'` and arrays produce their comma-joined elements — both strings, so `+` concatenates: ```js [1, 2] + [3] // '1,23' ({}) + 'x' // '[object Object]x' [5] * 2 // 10 — '*' ignores strings, ToNumber('5') is 5 ``` ## Writing code that does not hit this The practical defences are boring and effective: convert explicitly at the boundary where untrusted text enters (`Number(input.value)` or `parseFloat`, then check `Number.isNaN`), keep numeric state numeric rather than re-parsing at each use, and prefer template literals or `String(x)` when you *want* concatenation so the intent is visible. If you see `+` used as "make this a number", remember unary `+` and binary `+` are different operators — unary `+` always converts to a number and never concatenates.