JavaScript 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:

Evaluate Operands: Both the left and right expressions are evaluated.
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()).
String Check: If either of the resulting primitive values is a String, the engine applies ToString to both operands and performs string concatenation.
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)

Tired of Poor JavaScript Skills? Fix That With Deep Grasping!Learn More

Functions

Methods

Constructors

Classes

Destructuring

Decorators

Modules

Accessors

Variables

Fields

Parameters

Error Handling

Control Flow

Statement Forms

Loops

Primitive Types

Comments

Access Operators

Spread Operators

Call Operators

Conditional Operators

Logical Operators

Equality Operators

Relational Operators

Arithmetic Operators

Assignment Operators

Update Operators

Unary Operators

Yield Operators

Bitwise Operators

Shift Operators

JavaScript Addition

Unary Plus (`+x`)

Binary Plus (`x + y`)

The Evaluation Algorithm

Syntax Visualization: Numeric Addition

Syntax Visualization: String Concatenation

Syntax Visualization: Object Coercion

Type-Specific Edge Cases

​Unary Plus (+x)

​Binary Plus (x + y)

​The Evaluation Algorithm

​Syntax Visualization: Numeric Addition

​Syntax Visualization: String Concatenation

​Syntax Visualization: Object Coercion

​Type-Specific Edge Cases

Unary Plus (`+x`)

Binary Plus (`x + y`)

The Evaluation Algorithm

Syntax Visualization: Numeric Addition

Syntax Visualization: String Concatenation

Syntax Visualization: Object Coercion

Type-Specific Edge Cases