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.

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.

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

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

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

Master JavaScript with Deep Grasping Methodology!

Learn More