Addition

The JavaScript + operator functions as both a unary operator for numeric type conversion and a binary operator for numeric addition and string concatenation. Its execution behavior is strictly governed by ECMAScript’s implicit type coercion rules, specifically relying on the ToPrimitive, ToString, and ToNumeric internal abstract operations.

Unary Plus (+x)

The unary plus operator precedes a single operand. It evaluates the operand and applies the internal ToNumber operation.

+operand

If the operand is not already a Number, the JavaScript engine attempts to coerce it into one. It does not mutate the original variable; it returns a new evaluated value.

+"42"       // 42 (String to Number)
+""         // 0 (Empty string to Number)
+true       // 1 (Boolean to Number)
+false      // 0 (Boolean to Number)
+null       // 0 (Null to Number)
+undefined  // NaN (Undefined to Number)
+10n        // TypeError (Cannot convert BigInt to Number implicitly)

For objects, the engine first applies ToPrimitive(input, hint Number). It calls valueOf(), and if that does not return a primitive, it calls toString(), before finally applying ToNumber.

+{}         // NaN (toString() yields "[object Object]", which becomes NaN)
+[]         // 0 (toString() yields "", which becomes 0)
+[9]        // 9 (toString() yields "9", which becomes 9)

Binary Plus (x + y)

The binary plus operator requires two operands. It performs either string concatenation or numeric addition based on the types of the evaluated operands after primitive coercion.

LeftHandSideExpression + RightHandSideExpression

The Evaluation Algorithm

When the engine encounters x + y, it executes the following sequence:

1. Evaluate Operands: Both the left and right expressions are evaluated.
2. ToPrimitive Conversion: The engine applies ToPrimitive(operand, default) to both values.
   • For most objects, the default hint behaves like the Number hint (invoking valueOf() then toString()).
   • Exception: Date objects treat the default hint as String (invoking toString() then valueOf()).
3. String Check: If either of the resulting primitive values is a String, the engine applies ToString to both operands and performs string concatenation.
4. Numeric Addition: If neither primitive is a String, the engine applies ToNumeric to both operands and performs mathematical addition.

Syntax Visualization: Numeric Addition

Triggered when neither resolved primitive is a String.

10 + 5      // 15 (Number + Number)
true + 1    // 2 (ToNumeric(true) is 1; 1 + 1)
null + 10   // 10 (ToNumeric(null) is 0; 0 + 10)

Syntax Visualization: String Concatenation

Triggered when at least one resolved primitive is a String.

"foo" + "bar" // "foobar" (String + String)
5 + "5"       // "55" (Left operand undergoes ToString)
"Value: " + true // "Value: true" (Right operand undergoes ToString)

Syntax Visualization: Object Coercion

Demonstrating the ToPrimitive step before the String/Numeric check.

[] + []       // "" 
// ToPrimitive([]) -> ""
// "" + "" -> ""

[] + {}       // "[object Object]"
// ToPrimitive([]) -> ""
// ToPrimitive({}) -> "[object Object]"
// "" + "[object Object]" -> "[object Object]"

{} + []       // 0 (In REPLs/consoles, {} is parsed as an empty block, leaving +[] which is 0)
({}) + []     // "[object Object]" (Forced expression context)

new Date() + 1 // "Wed Oct 25 2023 10:00:00 GMT...1"
// ToPrimitive(Date) defaults to String.
// String + Number -> String concatenation.

Type-Specific Edge Cases

• BigInt: The binary + operator supports BigInt operands, but mixing BigInt and Number throws a TypeError because the specification explicitly forbids implicit coercion between these two numeric types to prevent precision loss.

10n + 5n // 15n 10n + 5 // TypeError: Cannot mix BigInt and other types

* **NaN Propagation:** If numeric addition is selected and either operand resolves to `NaN`, the result is strictly `NaN`.
  ```javascript
undefined + 5 // NaN (ToNumeric(undefined) is NaN; NaN + 5 is NaN)

Master JavaScript with Deep Grasping Methodology!

Learn More