> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
```javascript theme={"dark"}
+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.
```javascript theme={"dark"}
+"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**.
```javascript theme={"dark"}
+{} // 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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
"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.
```javascript theme={"dark"}
[] + [] // ""
// 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.
```javascript theme={"dark"}
```
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
