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

The `%` operator in JavaScript is the **remainder operator**. It evaluates to the remainder left over when one operand (the dividend) is divided by a second operand (the divisor). Crucially, in JavaScript, this is a *remainder* operation rather than a strict mathematical *modulo* operation. This distinction dictates that the sign of the result always matches the sign of the dividend, regardless of the divisor's sign.

```javascript theme={"dark"}
dividend % divisor
```

## Mathematical Evaluation

Internally, JavaScript evaluates `n % d` using the following formula:

`r = n - (d * q)`

where `q` is the quotient of `n / d` truncated towards zero (equivalent to `Math.trunc(n / d)`).

## Sign Behavior

Because the quotient is truncated towards zero, the remainder inherits the sign of the left operand (the dividend).

```javascript theme={"dark"}
5 % 3;    //  2  (Positive dividend yields positive remainder)
-5 % 3;   // -2  (Negative dividend yields negative remainder)
5 % -3;   //  2  (Divisor sign is ignored)
-5 % -3;  // -2  (Divisor sign is ignored)
```

## Floating-Point Operands

Unlike languages that restrict the remainder operator to integers, JavaScript applies IEEE 754 double-precision floating-point arithmetic to the `%` operator. It computes the exact remainder of floating-point division.

```javascript theme={"dark"}
5.5 % 2;      // 1.5
6.2 % 1.2;    // 0.20000000000000018 (Subject to standard floating-point precision errors)
```

## BigInt Operands

The `%` operator fully supports `BigInt` operands. The mathematical evaluation remains identical, but the edge-case behavior for division by zero differs strictly from standard `Number` types.

```javascript theme={"dark"}
10n % 3n;     // 1n
-10n % 3n;    // -1n

// Division by zero with BigInt throws a RangeError instead of returning NaN
10n % 0n;     // RangeError: Division by zero
```

## Edge Cases and Special Values (Numbers)

When operating on standard `Number` types, the operator adheres to specific IEEE 754 rules when encountering `0`, `Infinity`, or `NaN`:

```javascript theme={"dark"}
// Division by zero yields NaN, not Infinity
10 % 0;         // NaN
10 % -0;        // NaN

// Infinity as a dividend yields NaN
Infinity % 5;   // NaN
-Infinity % 5;  // NaN

// Infinity as a divisor yields the dividend
10 % Infinity;  // 10
10 % -Infinity; // 10

// Zero as a dividend yields zero (retaining its sign)
0 % 5;          // 0
-0 % 5;         // -0

// Any operation involving NaN yields NaN
NaN % 5;        // NaN
5 % NaN;        // NaN
```

## Type Coercion

If either operand is not a numeric type, JavaScript implicitly coerces it using the internal `ToNumeric()` abstract operation before evaluating the remainder.

If the resulting types do not match (e.g., one operand evaluates to a `BigInt` and the other to a `Number`), JavaScript does not coerce them to a common numeric type. Instead, it throws a `TypeError`.

```javascript theme={"dark"}
"7" % "3";      // 1   (Strings coerced to Numbers)
5 % true;       // 0   (true coerced to 1)
5 % false;      // NaN (false coerced to 0, resulting in division by zero)
5 % null;       // NaN (null coerced to 0)
5 % undefined;  // NaN (undefined coerced to NaN)

// Mixing BigInt and Number throws a TypeError
10n % 3;        // TypeError: Cannot mix BigInt and other types
10 % 3n;        // TypeError: Cannot mix BigInt and other types
```

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