> ## 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 Bitwise OR Assignment
The `|=` (Bitwise OR assignment) operator evaluates the binary representations of its left and right operands, performs a bitwise OR operation (`|`), and assigns the computed result to the left operand.
```javascript theme={"dark"}
x |= y
```
While functionally similar to `x = x | y`, the `|=` operator evaluates the left-hand expression **only once**. This semantic distinction is critical when the left operand contains side effects, such as property accessors or increment/decrement operations.
```javascript theme={"dark"}
let i = 0;
const arr = [10, 20];
// The expression 'i++' is evaluated only once.
// The reference to 'arr[0]' is resolved, the bitwise OR is applied with 5,
// and the result is assigned back to 'arr[0]'. 'i' increments to 1.
arr[i++] |= 5;
// In contrast, the expanded form evaluates 'i++' twice:
// arr[i++] = arr[i++] | 5;
// Due to left-to-right evaluation:
// 1. LHS resolves to arr[0], and 'i' increments to 1.
// 2. RHS reads arr[1] (since 'i' is now 1), and 'i' increments to 2.
// 3. The result of (arr[1] | 5) is assigned to arr[0].
```
## Execution Mechanics
When the JavaScript engine encounters the `|=` operator, it executes the following sequence based on the operand types:
1. **Type Resolution**: The engine determines the numeric type of the operands. If one operand is a `BigInt` and the other is a `Number`, the engine throws a `TypeError`.
2. **Numeric Conversion and Alignment**:
* **For `Number` operands**: Both operands are implicitly converted to 32-bit signed integers using the internal `ToInt32` abstract operation. Fractional values are truncated (e.g., `5.9` becomes `5`), and non-numeric values are coerced to numbers (or `0` if coercion results in `NaN`). The engine aligns their 32-bit two's complement binary representations.
* **For `BigInt` operands**: The engine does not truncate to 32 bits. It aligns the arbitrary-precision integers using two's complement representation.
3. **Bitwise Evaluation**: A logical OR is applied to each pair of corresponding bits. The resulting bit is `1` if at least one of the corresponding bits in the operands is `1`. It is `0` only if both bits are `0`.
4. **Assignment**: The resulting integer (either a 32-bit `Number` or a `BigInt`) is assigned back to the left operand.
## Bitwise OR Truth Table
| Bit A (Left) | Bit B (Right) | Result (A \| B) |
| :----------- | :------------ | :-------------- |
| 0 | 0 | **0** |
| 0 | 1 | **1** |
| 1 | 0 | **1** |
| 1 | 1 | **1** |
## Code Visualization
```javascript theme={"dark"}
// Number evaluation (32-bit ToInt32 conversion)
let a = 10;
let b = 6;
a |= b;
// 00000000000000000000000000001010 (10)
// | 00000000000000000000000000000110 (6)
// -------------------------------
// 00000000000000000000000000001110 (14)
console.log(a); // 14
// BigInt evaluation (Arbitrary-precision)
let c = 10n;
let d = 6n;
c |= d;
console.log(c); // 14n
```
## Coercion and Type Behavior
Because of the mandatory `ToInt32` conversion for standard numbers and the strict type requirements for `BigInt`, using `|=` yields specific structural behaviors:
```javascript theme={"dark"}
let x = 5.99;
x |= 2;
// 5.99 is truncated to 5 (0101). 2 is (0010).
// 0101 | 0010 = 0111 (7).
console.log(x); // 7
let y = "12";
y |= 1;
// "12" is coerced to number 12 (1100). 1 is (0001).
// 1100 | 0001 = 1101 (13).
console.log(y); // 13
let z = NaN;
z |= 4;
// NaN is coerced to 0 (0000). 4 is (0100).
// 0000 | 0100 = 0100 (4).
console.log(z); // 4
let big = 10n;
big |= 5;
// TypeError: Cannot mix BigInt and other types, use explicit conversions
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
