> ## 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 Assignment

The addition assignment (`+=`) operator evaluates the right operand, adds it to the value of the left operand, and assigns the resulting value back to the left operand. The specific operation performed—numeric addition or string concatenation—is dictated by the data types of the operands.

```javascript theme={"dark"}
LeftOperand += RightOperand;
```

This operator is functionally equivalent to `LeftOperand = LeftOperand + RightOperand`, with the strict architectural distinction that the `LeftOperand` reference is evaluated only once.

## Evaluation Mechanics and Type Coercion

Because JavaScript is dynamically typed, the `+=` operator relies on the ECMAScript internal `ToPrimitive` algorithm and standard addition semantics to resolve the operation.

**1. Numeric Addition**
If both operands are strictly of type `Number`, or if both operands are strictly of type `BigInt`, the operator performs standard mathematical addition. Mixing a `Number` operand with a `BigInt` operand is not permitted and will throw a `TypeError`.

```javascript theme={"dark"}
let a = 5;
a += 10; // a is 15 (Number)

let b = 10n;
b += 5n; // b is 15n (BigInt)

let c = 5;
// c += 10n; // Throws TypeError: Cannot mix BigInt and other types
```

**2. String Concatenation**
If either the left or right operand is a `String` (after any necessary primitive coercion), the operator forces string concatenation. The non-string operand is implicitly coerced into a string.

```javascript theme={"dark"}
let str = "Hello";
str += " World"; // "Hello World" (String)

let mixed = 10;
mixed += "5"; // "105" (String) - Number 10 is coerced to String
```

**3. Object to Primitive Coercion**
If an operand is an `Object` (including `Array` and `Date`), JavaScript attempts to convert it to a primitive value before applying the `+=` operator. It does this by passing a `"default"` hint to the internal `ToPrimitive` algorithm. The resolution follows a specific hierarchy:

1. If the object implements a `[Symbol.toPrimitive]()` method, that method is invoked first.
2. If no such method exists, standard objects prioritize the `valueOf()` method. If `valueOf()` does not return a primitive, it falls back to the `toString()` method.
3. `Date` objects exhibit the exact opposite behavior: they prioritize `toString()` and fall back to `valueOf()`.

```javascript theme={"dark"}
let arr = [1, 2];
arr += [3, 4]; 
// arr becomes "1,23,4" (String)
// Arrays coerce to strings via toString(), resulting in "1,2" + "3,4"

let obj = 5;
obj += {}; 
// obj becomes "5[object Object]" (String)
// {} coerces to "[object Object]" via toString()

let dateStr = "Current: ";
dateStr += new Date("2023-01-01"); 
// dateStr becomes "Current: Sun Jan 01 2023..." (String)
// Date objects prioritize toString() over valueOf()

let customObj = 10;
customObj += {
  [Symbol.toPrimitive](hint) {
    return 5;
  }
};
// customObj becomes 15 (Number)
// [Symbol.toPrimitive]() is invoked first
```

**4. Boolean, Null, and Undefined Coercion**
When interacting with numbers (and no strings are present), JavaScript coerces `true` to `1`, `false` to `0`, and `null` to `0`. `undefined` coerces to `NaN` (Not-a-Number).

```javascript theme={"dark"}
let num = 10;
num += true; // 11 (Number)
    
let val = 5;
val += null; // 5 (Number)

let undef = 5;
undef += undefined; // NaN (Number)
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor JavaScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
