Skip to main content

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.

The remainder assignment operator (%=) evaluates the remainder of dividing the left operand (dividend) by the right operand (divisor) and assigns the resulting value back to the left operand. It is a compound assignment operator that strictly follows IEEE 754 floating-point arithmetic rules for Number types and algebraic rules for BigInt types.

​
Syntax and Evaluation Mechanics

x %= y;
While logically similar to x = x % y, the compound assignment operator evaluates the left operand exactly once. This mechanical distinction is critical when the left operand contains side effects, such as property accessors or increment operators. 
let i = 0;
let arr = [5, 5];

// The left operand (arr[i++]) is evaluated only once.
arr[i++] %= 2; 

// arr is now [1, 5], and i is 1.
// If expanded to `arr[i++] = arr[i++] % 2`, i would be incremented twice.

​
Technical Mechanics

  1. Evaluation Order: The operator evaluates the left operand, then the right operand.
  2. Sign Preservation: The sign of the resulting remainder always matches the sign of the dividend (the left operand). The sign of the divisor (the right operand) is ignored.
  3. Type Coercion: Before the remainder operation occurs, JavaScript applies the internal ToNumeric abstract operation. Operands are implicitly coerced into either Number or BigInt values. Objects can be coerced into BigInt values (rather than numbers) if their valueOf or [Symbol.toPrimitive] methods return a BigInt.
  4. BigInt Compatibility: The operator works with BigInt values, but both operands must resolve to the same numeric type. Mixing BigInt and Number throws a TypeError.

​
Evaluation Examples

Standard Evaluation 
let a = 10;
a %= 3; 
// a is now 1 (10 = 3 * 3 + 1)
Sign Preservation (Negative Dividend) 
let b = -10;
b %= 3; 
// b is now -1 (Sign matches the left operand)

let c = 10;
c %= -3; 
// c is now 1 (Sign of the right operand is ignored)
Implicit Type Coercion 
let d = 15;
d %= "4"; 
// d is now 3 ("4" is coerced to the Number 4)

let e = 5n;
e %= { valueOf: () => 2n }; 
// e is now 1n (The object is coerced to the BigInt 2n)

​
Edge Cases

  • Division by Zero:
    • For Number types, dividing by zero assigns NaN to the left operand.
    • For BigInt types, dividing by 0n throws a RangeError: Division by zero.
let f = 5; f %= 0; // f is now NaN let g = 5n; g %= 0n; // Throws RangeError 
* **Infinity Dividend:** If the left operand is `Infinity` or `-Infinity` (Number type), the result is `NaN`.
  ```javascript
let h = Infinity;
h %= 5; // h is now NaN
  • Infinity Divisor: If the right operand is Infinity and the left operand is finite, the left operand remains unchanged.
let j = 5; j %= Infinity; // j is now 5 

<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" }}>Master JavaScript with Deep Grasping Methodology!</span>
  
  <a 
    href="https://syntblaze.com" 
    target="_blank" 
    style={{ 
      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="/images/skill-tracking.png" style={{ width: "30%", minWidth: 60 }} />
<img src="/images/nuggets.png" style={{ width: "30%", minWidth: 60 }} />
<img src="/images/bite-sized-exercises.png" style={{ width: "30%", minWidth: 60 }} />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
<img src="/images/mastery-chain.png" style={{ width: "30%", minWidth: 60 }} />
<img src="/images/element-previews.png" style={{ width: "30%", minWidth: 60 }} />
<img src="/images/element-explanations.png" style={{ width: "30%", minWidth: 60 }} />
</div>