Bitwise XOR Assignment

The ^= (bitwise XOR assignment) operator performs a bitwise exclusive OR operation on the binary representations of its left and right operands, assigning the computed result back to the left operand.

leftOperand ^= rightOperand;

While conceptually similar to the expanded assignment syntax (leftOperand = leftOperand ^ rightOperand), the ^= operator evaluates the leftOperand exactly once. This is a critical distinction when the left operand contains expressions with side effects. For example, arr[i++] ^= 2 increments i only once, whereas arr[i++] = arr[i++] ^ 2 would evaluate the index and increment i twice.

Execution Mechanics

When the ^= operator is invoked, the TypeScript runtime (via JavaScript) executes the following sequence based on the operand types:

1. Numeric Conversion & Truncation:
   • For number operands: Both operands are evaluated and implicitly converted to 32-bit signed integers using two’s complement representation. Any fractional components are truncated.
   • For bigint operands: Both operands are evaluated at arbitrary precision without being truncated to 32 bits.
2. Bitwise Comparison: The operator compares the operands bit by bit. It yields a 1 in a given bit position if the corresponding bits of the operands differ, and a 0 if they are identical.
   • 0 ^ 0 = 0
   • 0 ^ 1 = 1
   • 1 ^ 0 = 1
   • 1 ^ 1 = 0
3. Assignment: The newly constructed numeric value (either a 32-bit integer or a bigint) is assigned to the memory location of the leftOperand.

Step-by-Step Evaluation

let a: number = 5; 
let b: number = 3; 

a ^= b; 

console.log(a); // Output: 6

Binary Breakdown:

• a (5) is represented as ...0000 0101
• b (3) is represented as ...0000 0011

  0000 0101  (5)
^ 0000 0011  (3)

  0000 0110  (6)

TypeScript Compiler Rules

TypeScript enforces strict type checking on bitwise assignment operators to prevent unintended runtime coercions.

• Valid Assignment Targets: The left operand must be a valid assignment target (l-value). This includes standalone variables, object properties, and array elements.
• Left Operand Type Constraints: The left operand must resolve to type number, bigint, or any. In modern TypeScript (5.0+), an enum variable is not a valid left operand for ^=. While the bitwise XOR operation itself accepts enums, it evaluates to a number. This resulting number cannot be implicitly assigned back to an enum type.
• Operand Mixing Rules:
  • number and bigint types are strictly incompatible and cannot be mixed in the same operation.
  • enum members are treated as numeric values and can be used as the right operand when the left operand is a number.
  • any bypasses all strict type matching constraints, allowing operations with any right operand (though standard JavaScript runtime coercion rules will apply).

let num: number = 10;
num ^= 2; // Valid

let arr = [1, 2, 3];
let i = 0;
arr[i++] ^= 2; // Valid (array element as l-value, 'i' is incremented once)

enum Flags { Read = 1, Write = 2 }
let currentFlags: number = Flags.Read;
currentFlags ^= Flags.Write; // Valid (left operand is number, right is enum)

let bigNum: bigint = 10n;
bigNum ^= 2n; // Valid

let dynamicVal: any = "5";
dynamicVal ^= 2; // Valid in TS (bypasses checks), evaluates to 7 at runtime

// Compiler Error TS2365: Operator '^=' cannot be applied to types 'number' and 'bigint'.
num ^= 2n; 

// Compiler Error TS2322: Type 'number' is not assignable to type 'Flags'.
let strictEnum: Flags = Flags.Read;
strictEnum ^= Flags.Write; 

let str: string = "5";
// Compiler Error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
str ^= 2; 

Master TypeScript with Deep Grasping Methodology!

Learn More