Lesson 18: JavaScript Math & Random: Math Properties · All Math Methods · Random Numbers · Full Reference

Phase 1 of 9

1. Background: What Is the Math Object?

In everyday life, you regularly need mathematical operations that go beyond simple +, -, *, /:

Rounding a price to 2 decimal places
Finding the largest value in a list
Calculating a square root for geometry
Generating a random number for a game
Working with angles for animations

JavaScript provides the Math object · a built-in collection of mathematical constants and functions · ready to use without importing anything.

javascript

// No import needed — Math is always available
console.log(Math.PI);          // 3.141592653589793
console.log(Math.sqrt(16));    // 4
console.log(Math.round(4.7));  // 5
console.log(Math.random());    // e.g. 0.7362841...

Key Facts About the Math Object

Fact	Detail
Type	Static object · NOT a constructor
Usage	`Math.methodName()` · never `new Math()`
Properties	8 mathematical constants
Methods	30+ mathematical functions
Number type	All values are JavaScript 64-bit floats

🐛 COMMON MISTAKE: new Math() throws a TypeError. Math is not a class · it is a plain object with static properties and methods. You never instantiate it.
javascript
const m = new Math(); // ❌ TypeError: Math is not a constructor
const pi = Math.PI;   // ✅ correct

🏢 REAL WORLD: Math methods appear in every domain of software: financial apps (rounding money), games (random events, physics), maps (distance calculations using trigonometry), data science (statistics), graphics (transformations), and UI animations (easing curves).

✏️ Your Task

Practise what you just learned about 1. Background: What Is the Math Object?. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 9

2. Topic 1 · Math Properties (Constants)

Phase 1 · Conceptual Understanding

The Math object has 8 built-in constants · mathematical values that are used so frequently in real calculations that JavaScript provides them pre-computed to full precision.

javascript

console.log(Math.E);       // 2.718281828459045  — Euler's number
console.log(Math.PI);      // 3.141592653589793  — Pi
console.log(Math.SQRT2);   // 1.4142135623730951 — Square root of 2
console.log(Math.SQRT1_2); // 0.7071067811865476 — Square root of 1/2
console.log(Math.LN2);     // 0.6931471805599453 — Natural log of 2
console.log(Math.LN10);    // 2.302585092994046  — Natural log of 10
console.log(Math.LOG2E);   // 1.4426950408889634 — Log base 2 of E
console.log(Math.LOG10E);  // 0.4342944819032518 — Log base 10 of E

▶ Expected Output:

code

2.718281828459045
3.141592653589793
1.4142135623730951
0.7071067811865476
0.6931471805599453
2.302585092994046
1.4426950408889634
0.4342944819032518

The Most Important Constant: `Math.PI`

Math.PI (π ≈ 3.14159…) is used in every circular and angular calculation:

javascript

// Area of a circle: A = π × r²
function circleArea(radius) {
  return Math.PI * radius ** 2;
}
console.log(circleArea(5).toFixed(2));  // 78.54

// Circumference: C = 2 × π × r
function circumference(radius) {
  return 2 * Math.PI * radius;
}
console.log(circumference(5).toFixed(2)); // 31.42

▶ Expected Output:

code

78.54
31.42

`Math.E` · Euler's Number

Math.E (e ≈ 2.71828…) is the base of the natural logarithm. It appears in compound interest, population growth, and probability:

javascript

// Compound interest: A = P × e^(r × t)
function continuousCompound(principal, rate, years) {
  return principal * Math.E ** (rate * years);
}
// $1000 at 5% for 10 years
console.log(continuousCompound(1000, 0.05, 10).toFixed(2)); // 1648.72

▶ Expected Output: 1648.72

All 8 Math Constants at a Glance

Constant	Value	Common Use
`Math.E`	2.718...	Exponential growth, natural log
`Math.PI`	3.141...	Circles, angles, trigonometry
`Math.SQRT2`	1.414...	Diagonal of a unit square
`Math.SQRT1_2`	0.707...	Reciprocal of √2
`Math.LN2`	0.693...	Converting between log bases
`Math.LN10`	2.302...	Converting natural log to log₁₀
`Math.LOG2E`	1.442...	Log base 2 of Euler's number
`Math.LOG10E`	0.434...	Log base 10 of Euler's number

✏️ Your Task

Practise what you just learned about 2. Topic 1 · Math Properties (Constants). Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 9

3. Topic 2 · Rounding Methods

Phase 1 · Conceptual Understanding

Rounding is one of the most frequently used mathematical operations in real apps · displaying prices, scores, ratings, and measurements all require rounding. JavaScript provides four distinct rounding methods, each with a specific behaviour.

The Four Rounding Methods · Side by Side

Before diving in, see all four on the same number:

javascript

const n = 4.6;

console.log(Math.round(n));  // 5  — nearest integer (rounds .5 up)
console.log(Math.floor(n));  // 4  — always rounds DOWN (toward -∞)
console.log(Math.ceil(n));   // 5  — always rounds UP  (toward +∞)
console.log(Math.trunc(n));  // 4  — always removes decimal (toward 0)

▶ Expected Output:

code

Now watch how they differ for negative numbers · this is where beginners are often surprised:

javascript

const n = -4.6;

console.log(Math.round(n));  // -5  — rounds to nearest (-4.6 → -5)
console.log(Math.floor(n));  // -5  — DOWN means MORE negative
console.log(Math.ceil(n));   // -4  — UP means LESS negative
console.log(Math.trunc(n));  // -4  — just removes the decimal

▶ Expected Output:

code

-5
-5
-4
-4

🤔 THINK ABOUT IT: For negative numbers, "floor" (down) means more negative, and "ceil" (up) means less negative. Think of a number line · floor always goes left, ceil always goes right, trunc always goes toward zero.

`Math.round(x)` · Round to Nearest Integer

Rounds to the nearest whole number. If the decimal is exactly .5, it rounds UP (away from zero for positive numbers).

javascript

console.log(Math.round(4.1));  // 4
console.log(Math.round(4.5));  // 5  ← .5 rounds up
console.log(Math.round(4.9));  // 5
console.log(Math.round(-4.5)); // -4 ← .5 rounds TOWARD zero for negatives

▶ Expected Output:

code

Real use · round to decimal places:

JavaScript's Math.round only rounds to whole numbers. To round to a specific number of decimal places, multiply, round, then divide:

javascript

// Round to 2 decimal places
function roundTo(value, decimals) {
  const factor = 10 ** decimals;
  return Math.round(value * factor) / factor;
}

console.log(roundTo(3.14159, 2)); // 3.14
console.log(roundTo(2.5678,  1)); // 2.6
console.log(roundTo(1.005,   2)); // 1.01 (note: floating-point edge case)

💡 TIP: toFixed(n) is usually cleaner for displaying rounded numbers as strings:
javascript
console.log((3.14159).toFixed(2)); // "3.14"  ← returns a STRING
console.log(+(3.14159).toFixed(2)); // 3.14   ← the + converts back to Number

`Math.floor(x)` · Always Round Down

Rounds toward negative infinity · the largest integer less than or equal to x.

javascript

console.log(Math.floor(4.1));  // 4
console.log(Math.floor(4.9));  // 4  ← still 4, not 5!
console.log(Math.floor(4.0));  // 4
console.log(Math.floor(-4.1)); // -5 ← goes MORE negative
console.log(Math.floor(-4.9)); // -5

▶ Expected Output:

code

🏢 REAL WORLD: Math.floor is the go-to for random integer generation (covered in Topic 6) and converting a time in seconds to whole minutes: Math.floor(seconds / 60).

`Math.ceil(x)` · Always Round Up

Rounds toward positive infinity · the smallest integer greater than or equal to x.

javascript

console.log(Math.ceil(4.1));  // 5
console.log(Math.ceil(4.9));  // 5
console.log(Math.ceil(4.0));  // 4  ← already an integer, no change
console.log(Math.ceil(-4.1)); // -4 ← goes LESS negative (toward zero)
console.log(Math.ceil(-4.9)); // -4

▶ Expected Output:

code

🏢 REAL WORLD: Math.ceil is used for pagination · "how many pages do I need for 97 items with 10 per page?" → Math.ceil(97 / 10) = 10 pages.

`Math.trunc(x)` · Remove Decimal (Truncate Toward Zero)

Simply removes the fractional part · always rounds toward zero regardless of sign.

javascript

console.log(Math.trunc(4.9));  // 4   ← positive: rounds down
console.log(Math.trunc(4.1));  // 4
console.log(Math.trunc(-4.9)); // -4  ← negative: rounds up (toward zero)
console.log(Math.trunc(-4.1)); // -4
console.log(Math.trunc(0.9));  // 0

▶ Expected Output:

code

💡 TIP: The difference between Math.floor and Math.trunc only matters for negative numbers:

Math.floor(-4.7) → -5 (goes more negative)
Math.trunc(-4.7) → -4 (goes toward zero)

For positive numbers they always give the same result.

Rounding Summary Table

Method	Positive 4.6	Positive 4.4	Negative -4.6	Negative -4.4	Rule
`round`	5	4	-5	-4	Nearest (.5 → up)
`floor`	4	4	-5	-5	Always toward -∞
`ceil`	5	5	-4	-4	Always toward +∞
`trunc`	4	4	-4	-4	Always toward 0

✏️ Your Task

Practise what you just learned about 3. Topic 2 · Rounding Methods. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 9

4. Topic 3 · Arithmetic & Exponent Methods

Phase 1 · Conceptual Understanding

`Math.abs(x)` · Absolute Value

Returns the positive (absolute) value of any number · removes the sign.

javascript

console.log(Math.abs(5));   //  5
console.log(Math.abs(-5));  //  5
console.log(Math.abs(0));   //  0
console.log(Math.abs(-3.7)); // 3.7

▶ Expected Output:

code

🏢 REAL WORLD: Calculating distance between two values on a scale: Math.abs(score - average) · the difference doesn't depend on which is bigger. Also used in physics (speed is the absolute value of velocity).

`Math.sqrt(x)` · Square Root

Returns the square root of x. Returns NaN for negative numbers (complex numbers are not supported).

javascript

console.log(Math.sqrt(9));    // 3
console.log(Math.sqrt(2));    // 1.4142135623730951
console.log(Math.sqrt(0));    // 0
console.log(Math.sqrt(-1));   // NaN  ← negative: no real square root
console.log(Math.sqrt(144));  // 12

▶ Expected Output:

code

3
1.4142135623730951
0
NaN
12

🏢 REAL WORLD: Distance between two points: Math.sqrt((x2-x1)2 + (y2-y1)2) · the Pythagorean theorem in code, used in maps, games, and physics engines.

javascript

function distance(x1, y1, x2, y2) {
  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
console.log(distance(0, 0, 3, 4).toFixed(2)); // 5.00  (3-4-5 triangle)

`Math.cbrt(x)` · Cube Root

Returns the cube root of x. Unlike sqrt, it works for negative numbers.

javascript

console.log(Math.cbrt(27));   // 3
console.log(Math.cbrt(-27));  // -3  ← works for negatives!
console.log(Math.cbrt(8));    // 2
console.log(Math.cbrt(0));    // 0

▶ Expected Output:

code

`Math.pow(base, exponent)` · Power / Exponentiation

Raises base to the power of exponent. The ** operator is the modern equivalent.

javascript

console.log(Math.pow(2, 10));  // 1024   (2^10)
console.log(Math.pow(3, 3));   //   27   (3^3)
console.log(Math.pow(9, 0.5)); //    3   (9^0.5 = √9)
console.log(Math.pow(2, -1));  //  0.5   (1/2)

// Modern equivalent using ** operator:
console.log(2 ** 10); // 1024

▶ Expected Output:

code

`Math.hypot(...values)` · Hypotenuse / Euclidean Length

Returns the square root of the sum of squares of all arguments. The cleanest way to compute distances and vector lengths.

javascript

// Hypotenuse of 3-4-5 triangle
console.log(Math.hypot(3, 4));      // 5

// Distance in 3D space
console.log(Math.hypot(2, 4, 4));   // 6  (√(4+16+16) = √36)

// Length of a 2D vector
console.log(Math.hypot(-5, 12));    // 13

▶ Expected Output:

code

5
6
13

💡 TIP: Math.hypot(a, b) is cleaner and avoids overflow issues compared to Math.sqrt(a2 + b2).

`Math.sign(x)` · Sign of a Number

Returns -1 (negative), 0 (zero), or 1 (positive). Useful to determine direction without caring about magnitude.

javascript

console.log(Math.sign(-7));  // -1
console.log(Math.sign(0));   //  0
console.log(Math.sign(3));   //  1
console.log(Math.sign(-0));  // -0  (signed zero in JavaScript)

▶ Expected Output:

code

-1
0
1
-0

🏢 REAL WORLD: In animation: Math.sign(velocity) tells you which direction an object is moving without needing to know the speed. In finance: Math.sign(profit) tells you gain vs loss.

`Math.fround(x)` · Nearest 32-bit Float

Returns the nearest 32-bit (single precision) floating-point representation of x. Useful for WebGL and typed arrays that use 32-bit floats.

javascript

console.log(Math.fround(1.5));     // 1.5        (representable exactly)
console.log(Math.fround(1.337));   // 1.3370000123977661 (precision loss!)

`Math.clz32(x)` · Count Leading Zeros (32-bit)

Returns the number of leading zero bits in the 32-bit integer representation. Used in low-level bit manipulation.

javascript

console.log(Math.clz32(1));  // 31  (00000000000000000000000000000001)
console.log(Math.clz32(4));  // 29  (00000000000000000000000000000100)
console.log(Math.clz32(0));  // 32  (all zeros)

`Math.imul(x, y)` · 32-bit Integer Multiplication

Performs C-style 32-bit integer multiplication. Important for large integer products that would overflow normal JavaScript arithmetic.

javascript

console.log(Math.imul(3, 4));                    // 12
console.log(Math.imul(0xffffffff, 0xffffffff));  // 1  (wraps around!)

✏️ Your Task

Practise what you just learned about 4. Topic 3 · Arithmetic & Exponent Methods. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 9

5. Topic 4 · Min, Max & Clamp

Phase 1 · Conceptual Understanding

`Math.max(...values)` · Find the Largest Value

Returns the largest of zero or more numbers. Returns -Infinity if no arguments given. Returns NaN if any argument is not a number.

javascript

console.log(Math.max(3, 7, 1, 9, 4));   // 9
console.log(Math.max(-3, -7, -1));       // -1
console.log(Math.max());                 // -Infinity (no args)
console.log(Math.max(1, "abc", 3));      // NaN

▶ Expected Output:

code

9
-1
-Infinity
NaN

Find max in an array using spread:

javascript

const scores = [78, 92, 65, 88, 71, 95];
console.log(Math.max(...scores)); // 95

⚠️ WATCH OUT: Math.max(...arr) works perfectly for small arrays. For very large arrays (100,000+ elements), the spread can cause a stack overflow. Use arr.reduce((a, b) => Math.max(a, b)) instead.

`Math.min(...values)` · Find the Smallest Value

Returns the smallest of zero or more numbers. Returns Infinity if no arguments given.

javascript

console.log(Math.min(3, 7, 1, 9, 4));   // 1
console.log(Math.min(-3, -7, -1));       // -7
console.log(Math.min());                 // Infinity (no args)

const scores = [78, 92, 65, 88, 71, 95];
console.log(Math.min(...scores));        // 65

▶ Expected Output:

code

1
-7
Infinity
65

🤔 THINK ABOUT IT: Why does Math.max() (no args) return -Infinity and Math.min() return Infinity? Because when comparing values, any real number is greater than -Infinity and less than Infinity. This makes the identity values work correctly when looping through values to find max/min.

Clamping a Value · Keep It Within a Range

A clamp function restricts a value to a specific range [min, max]. This is one of the most used utility functions in game development and UI.

javascript

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

console.log(clamp(5,  0, 10));  // 5   — within range, unchanged
console.log(clamp(-3, 0, 10));  // 0   — below min, clamped to min
console.log(clamp(15, 0, 10));  // 10  — above max, clamped to max

▶ Expected Output:

code

5
0
10

🏢 REAL WORLD: Clamping is everywhere in games and UIs · keeping a volume slider between 0 and 100, a health bar between 0 and 100 (cannot go negative or above max), or constraining a draggable element within its container's boundaries.

javascript

// Game health system
let health = 100;
function takeDamage(amount)  { health = clamp(health - amount, 0, 100); }
function heal(amount)        { health = clamp(health + amount, 0, 100); }

takeDamage(30); console.log(health); // 70
takeDamage(90); console.log(health); // 0   ← clamped — cannot go below 0
heal(50);       console.log(health); // 50
heal(200);      console.log(health); // 100 ← clamped — cannot exceed 100

▶ Expected Output:

code

✏️ Your Task

Practise what you just learned about 5. Topic 4 · Min, Max & Clamp. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 9

6. Topic 5 · Logarithm & Trigonometry Methods

Phase 1 · Conceptual Understanding

Logarithm Methods

`Math.log(x)` · Natural Logarithm (base e)

Returns the natural logarithm (base e) of x. Returns NaN for negative x and -Infinity for 0.

javascript

console.log(Math.log(1));         // 0          (e^0 = 1)
console.log(Math.log(Math.E));    // 1          (e^1 = e)
console.log(Math.log(Math.E**2)); // 2          (e^2)
console.log(Math.log(0));         // -Infinity
console.log(Math.log(-1));        // NaN

`Math.log2(x)` · Logarithm Base 2

javascript

console.log(Math.log2(1));   // 0   (2^0 = 1)
console.log(Math.log2(2));   // 1   (2^1 = 2)
console.log(Math.log2(8));   // 3   (2^3 = 8)
console.log(Math.log2(1024)); // 10 (2^10 = 1024)

🏢 REAL WORLD: Math.log2 is used in computer science · calculating how many bits are needed to store n values: Math.ceil(Math.log2(n)).

`Math.log10(x)` · Logarithm Base 10

javascript

console.log(Math.log10(1));      // 0   (10^0 = 1)
console.log(Math.log10(10));     // 1   (10^1 = 10)
console.log(Math.log10(100));    // 2   (10^2 = 100)
console.log(Math.log10(1000));   // 3

`Math.expm1(x)` · e^x minus 1

More accurate than Math.E**x - 1 for very small x values.

javascript

console.log(Math.expm1(1));   // 1.718...  (e^1 - 1)
console.log(Math.expm1(0));   // 0         (e^0 - 1 = 0)

`Math.log1p(x)` · Natural log of (1 + x)

More accurate than Math.log(1 + x) for very small x values.

javascript

console.log(Math.log1p(0));   // 0
console.log(Math.log1p(1));   // 0.693... (= Math.LN2)

Trigonometry Methods

All trigonometric functions in JavaScript work in radians, not degrees.

code

Degrees to Radians:  radians = degrees × (π / 180)
Radians to Degrees:  degrees = radians × (180 / π)

javascript

function toRad(deg) { return deg * (Math.PI / 180); }
function toDeg(rad) { return rad * (180 / Math.PI); }

console.log(toRad(180)); // 3.14159... (π)
console.log(toRad(90));  // 1.5707... (π/2)
console.log(toDeg(Math.PI)); // 180

`Math.sin(x)` · Sine

javascript

console.log(Math.sin(toRad(0)));   // 0
console.log(Math.sin(toRad(30)));  // 0.5
console.log(Math.sin(toRad(90)));  // 1     ← max value
console.log(Math.sin(toRad(180))); // ~0    (floating point: 1.2246e-16)

`Math.cos(x)` · Cosine

javascript

console.log(Math.cos(toRad(0)));   // 1     ← max value
console.log(Math.cos(toRad(90)));  // ~0    (floating point near-zero)
console.log(Math.cos(toRad(180))); // -1    ← min value

`Math.tan(x)` · Tangent

javascript

console.log(Math.tan(toRad(0)));   //  0
console.log(Math.tan(toRad(45)));  //  1
console.log(Math.tan(toRad(90)));  //  16331239353195370 (very large — approaches ∞)

Inverse Trigonometry

javascript

console.log(toDeg(Math.asin(0.5)));  // 30   (angle whose sine is 0.5)
console.log(toDeg(Math.acos(0.5)));  // 60   (angle whose cosine is 0.5)
console.log(toDeg(Math.atan(1)));    // 45   (angle whose tangent is 1)

// atan2(y, x) — angle from origin to point (x,y), handles all quadrants
console.log(toDeg(Math.atan2(1, 1)));  // 45
console.log(toDeg(Math.atan2(1, -1))); // 135
console.log(toDeg(Math.atan2(-1, 0))); // -90

🏢 REAL WORLD: Math.atan2(y, x) is used in game development and mapping to find the angle between two points · e.g., "which direction should the enemy face to look at the player?"

Hyperbolic Functions

javascript

console.log(Math.sinh(0));  // 0
console.log(Math.cosh(0));  // 1
console.log(Math.tanh(0));  // 0
console.log(Math.tanh(1));  // 0.7615...

// Inverse hyperbolic
console.log(Math.asinh(1)); // 0.8813...
console.log(Math.acosh(1)); // 0
console.log(Math.atanh(0)); // 0

✏️ Your Task

Practise what you just learned about 6. Topic 5 · Logarithm & Trigonometry Methods. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 7 of 9

7. Topic 6 · Math.random() · Random Numbers

Phase 1 · Conceptual Understanding

Math.random() is one of the most-used Math methods. It returns a pseudo-random floating-point number between 0 (inclusive) and 1 (exclusive):

code

0 ≤ Math.random() < 1

javascript

console.log(Math.random()); // e.g. 0.7362841095
console.log(Math.random()); // e.g. 0.1284956023
console.log(Math.random()); // e.g. 0.9813740561

💡 TIP: Math.random() always returns a value in [0, 1). It will NEVER return exactly 1. Understanding this boundary is essential for all random number formulas.

⚠️ WATCH OUT · Not Cryptographically Secure: Math.random() is a pseudo-random number generator · good enough for games, simulations, and UI randomness, but NOT suitable for cryptography, password generation, or security tokens. Use crypto.getRandomValues() for security-sensitive random values.

Random Float in a Range

javascript

// Random float between min (inclusive) and max (exclusive)
function randomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

console.log(randomFloat(1, 10).toFixed(2));   // e.g. 7.43
console.log(randomFloat(0, 100).toFixed(2));  // e.g. 62.15
console.log(randomFloat(-5, 5).toFixed(2));   // e.g. -2.87

How the formula works:

code

Math.random()        → [0, 1)
× (max - min)        → [0, max-min)
+ min                → [min, max)

Random Integer · The Most Important Pattern

Generating a random whole number (integer) is the most common random operation.

Random integer from 0 to n (exclusive):

javascript

// Random integer: 0, 1, 2, ..., (n-1)
function randomInt(n) {
  return Math.floor(Math.random() * n);
}

console.log(randomInt(6));  // 0, 1, 2, 3, 4, or 5 (dice: 0-5)
console.log(randomInt(10)); // 0 through 9

Random integer in a range (inclusive on both ends):

javascript

// Random integer: min to max (both inclusive)
function randomIntRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Dice roll (1 to 6)
console.log(randomIntRange(1, 6));   // 1, 2, 3, 4, 5, or 6

// Random score (50 to 100)
console.log(randomIntRange(50, 100));

// Coin flip
console.log(randomIntRange(0, 1) === 0 ? "Heads" : "Tails");

How (max - min + 1) works:

code

For min=1, max=6:
  Math.random()          → [0, 1)
  × (6 - 1 + 1) = × 6   → [0, 6)
  + 1                    → [1, 7)
  Math.floor(...)        → 1, 2, 3, 4, 5, or 6 ✅

🐛 COMMON MISTAKE: Using Math.round instead of Math.floor for random integers creates an unequal distribution · Math.round(Math.random() * 5) gives 0 and 5 only half the probability of 1, 2, 3, 4. Always use Math.floor for random integers.

Guaranteed Random Integer Functions · Reference Set

These four functions cover virtually every random integer need:

javascript

// 1. Integer from 0 to (max - 1)
const randBelow = max => Math.floor(Math.random() * max);

// 2. Integer from min to max (both inclusive)
const randRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

// 3. Random index for an array
const randIndex = arr => Math.floor(Math.random() * arr.length);

// 4. Random element from an array
const randElement = arr => arr[Math.floor(Math.random() * arr.length)];

// Usage:
const fruits = ["Apple", "Banana", "Mango", "Kiwi", "Orange"];
console.log(randBelow(10));           // 0–9
console.log(randRange(1, 6));         // 1–6 (dice)
console.log(randIndex(fruits));       // 0–4
console.log(randElement(fruits));     // random fruit

▶ Expected Output (sample):

code

7
4
2
Mango

Random Boolean

javascript

const randomBool = () => Math.random() < 0.5;

console.log(randomBool()); // true or false with equal probability

// Weighted boolean — 70% chance of true
const weighted = () => Math.random() < 0.7;

Shuffle an Array · Fisher-Yates Algorithm

The gold-standard way to randomly shuffle an array, giving every permutation equal probability:

javascript

function shuffle(array) {
  const arr = [...array]; // copy — don't mutate original
  for (let i = arr.length - 1; i > 0; i--) {
    const j = randBelow(i + 1);          // random index 0 to i
    [arr[i], arr[j]] = [arr[j], arr[i]]; // swap
  }
  return arr;
}

const deck = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffle(deck)); // e.g. [7, 3, 10, 1, 5, 8, 2, 9, 4, 6]

🏢 REAL WORLD: Used in quiz apps (shuffle questions), playlist shuffling, card games, A/B testing (randomly assign users to groups), and generating test data.

Random Item from a Weighted List

Sometimes you need random selection where some items are more likely than others:

javascript

function weightedRandom(options) {
  // options = [{ value, weight }, ...]
  const totalWeight = options.reduce((sum, o) => sum + o.weight, 0);
  let rand = Math.random() * totalWeight;

  for (const option of options) {
    rand -= option.weight;
    if (rand <= 0) return option.value;
  }
}

const loot = [
  { value: "Common item",    weight: 60 },
  { value: "Uncommon item",  weight: 25 },
  { value: "Rare item",      weight: 10 },
  { value: "Legendary item", weight:  5 },
];

// Run 10 times to show distribution
for (let i = 0; i < 10; i++) {
  console.log(weightedRandom(loot));
}

▶ Expected Output (sample · varies):

code

Common item
Common item
Uncommon item
Common item
Rare item
Common item
Common item
Uncommon item
Common item
Legendary item

🏢 REAL WORLD: Weighted random selection is used in loot boxes in games, recommendation engines, ad delivery systems, and generating synthetic test data with realistic distributions.

Random Color Generator

javascript

// Random hex color
function randomHexColor() {
  return "#" + Math.floor(Math.random() * 0xFFFFFF)
    .toString(16)
    .padStart(6, "0");
}

// Random RGB color
function randomRGBColor() {
  const r = randBelow(256);
  const g = randBelow(256);
  const b = randBelow(256);
  return `rgb(${r}, ${g}, ${b})`;
}

console.log(randomHexColor()); // e.g. "#a3f5c2"
console.log(randomRGBColor()); // e.g. "rgb(173, 42, 201)"

Seeded Random (Reproducible Results)

Math.random() is non-deterministic · you cannot reproduce the same sequence. For reproducible results (testing, games with replay), use a seeded pseudo-random generator:

javascript

// Simple mulberry32 seeded PRNG
function createSeededRandom(seed) {
  let s = seed;
  return function() {
    s |= 0; s = s + 0x6D2B79F5 | 0;
    let t = Math.imul(s ^ s >>> 15, 1 | s);
    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  };
}

const rand = createSeededRandom(42);
console.log(rand().toFixed(4)); // always the same for seed 42
console.log(rand().toFixed(4)); // always the same next value
console.log(rand().toFixed(4)); // always the same third value

🏢 REAL WORLD: Game developers use seeded random to generate the same world layout from the same seed · players can share a seed code to play the same map. Minecraft uses this concept extensively.

✏️ Your Task

Practise what you just learned about 7. Topic 6 · Math.random() · Random Numbers. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 8 of 9

8. Topic 7 · Complete Math Reference

Your one-stop reference for every Math property and method.

Math Properties

Property	Value	Description
`Math.E`	2.718...	Euler's number
`Math.PI`	3.141...	Pi
`Math.SQRT2`	1.414...	Square root of 2
`Math.SQRT1_2`	0.707...	Square root of 1/2
`Math.LN2`	0.693...	Natural log of 2
`Math.LN10`	2.302...	Natural log of 10
`Math.LOG2E`	1.442...	Log₂(e)
`Math.LOG10E`	0.434...	Log₁₀(e)

Rounding Methods

Method	Description	Example → Result
`Math.round(x)`	Nearest integer (.5 → up)	`Math.round(4.5)` → `5`
`Math.floor(x)`	Toward -∞	`Math.floor(-4.1)` → `-5`
`Math.ceil(x)`	Toward +∞	`Math.ceil(4.1)` → `5`
`Math.trunc(x)`	Toward 0 (remove decimal)	`Math.trunc(-4.9)` → `-4`

Arithmetic Methods

Method	Description	Example → Result
`Math.abs(x)`	Absolute value	`Math.abs(-5)` → `5`
`Math.sqrt(x)`	Square root	`Math.sqrt(16)` → `4`
`Math.cbrt(x)`	Cube root	`Math.cbrt(-8)` → `-2`
`Math.pow(x, y)`	x to the power of y	`Math.pow(2, 8)` → `256`
`Math.hypot(...v)`	√(sum of squares)	`Math.hypot(3,4)` → `5`
`Math.sign(x)`	-1, 0, or 1	`Math.sign(-9)` → `-1`
`Math.fround(x)`	Nearest 32-bit float	`Math.fround(1.337)` → `1.337...`
`Math.clz32(x)`	Count leading zeros (32-bit)	`Math.clz32(1)` → `31`
`Math.imul(x, y)`	32-bit integer multiply	`Math.imul(3,4)` → `12`

Min / Max

Method	Description	Example → Result
`Math.max(...v)`	Largest value	`Math.max(3,1,7)` → `7`
`Math.min(...v)`	Smallest value	`Math.min(3,1,7)` → `1`

Logarithm Methods

Method	Description	Example → Result
`Math.log(x)`	Natural log (base e)	`Math.log(Math.E)` → `1`
`Math.log2(x)`	Log base 2	`Math.log2(8)` → `3`
`Math.log10(x)`	Log base 10	`Math.log10(1000)` → `3`
`Math.exp(x)`	e raised to x	`Math.exp(1)` → `2.718...`
`Math.expm1(x)`	e^x - 1 (precise)	`Math.expm1(0)` → `0`
`Math.log1p(x)`	ln(1 + x) (precise)	`Math.log1p(0)` → `0`

Trigonometry Methods (all angles in radians)

Method	Description
`Math.sin(x)`	Sine
`Math.cos(x)`	Cosine
`Math.tan(x)`	Tangent
`Math.asin(x)`	Arc sine (returns radians)
`Math.acos(x)`	Arc cosine (returns radians)
`Math.atan(x)`	Arc tangent (returns radians)
`Math.atan2(y, x)`	Angle from origin to (x,y)
`Math.sinh(x)`	Hyperbolic sine
`Math.cosh(x)`	Hyperbolic cosine
`Math.tanh(x)`	Hyperbolic tangent
`Math.asinh(x)`	Inverse hyperbolic sine
`Math.acosh(x)`	Inverse hyperbolic cosine
`Math.atanh(x)`	Inverse hyperbolic tangent

Random

Method	Description
`Math.random()`	Float in `[0, 1)`

Essential Random Recipes

javascript

const rand    = (n)       => Math.floor(Math.random() * n);
const randInt = (min,max) => Math.floor(Math.random() * (max - min + 1)) + min;
const pick    = arr       => arr[Math.floor(Math.random() * arr.length)];
const flip    = ()        => Math.random() < 0.5;

// Dice:  randInt(1, 6)
// Card:  pick(deck)
// Coin:  flip()
// Pct:   Math.random() < 0.30  → true ~30% of the time

✏️ Your Task

Practise what you just learned about 8. Topic 7 · Complete Math Reference. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 9 of 9

9. Applied Exercises

Phase 2 · Applied Exercises

Exercise 1 · Math Toolkit Builder 🔧

Objective: Practice core Math methods in real calculations.

Scenario: You're building a geometry calculator for an architecture app.

Warm-up Micro-Demo:

javascript

// Area of a circle with radius 7
const area = Math.PI * 7 ** 2;
console.log("Area:", area.toFixed(2)); // 153.94

Task A · Shape Calculator

javascript

function shapeCalculator() {
  // 1. Circle — area and circumference
  const r = 8;
  const circleArea  = Math.PI * r ** 2;
  const circlePerim = 2 * Math.PI * r;
  console.log(`Circle (r=${r}):`);
  console.log(`  Area         : ${circleArea.toFixed(4)}`);
  console.log(`  Circumference: ${circlePerim.toFixed(4)}`);

  // 2. Right triangle — hypotenuse
  const a = 5, b = 12;
  const hyp = Math.hypot(a, b);
  console.log(`\nTriangle (a=${a}, b=${b}):`);
  console.log(`  Hypotenuse   : ${hyp.toFixed(4)}`); // 13.0000

  // 3. Sphere — volume V = (4/3)πr³
  const rSphere = 6;
  const sphereVol = (4 / 3) * Math.PI * rSphere ** 3;
  console.log(`\nSphere (r=${rSphere}):`);
  console.log(`  Volume       : ${sphereVol.toFixed(4)}`);

  // 4. Distance between two 2D points
  const p1 = { x: 2, y: 3 }, p2 = { x: 8, y: 11 };
  const dist = Math.hypot(p2.x - p1.x, p2.y - p1.y);
  console.log(`\nDistance (2,3)→(8,11): ${dist.toFixed(4)}`); // 10.0000

  // 5. Rounding comparisons on price
  const price = 19.555;
  console.log(`\nRounding $${price}:`);
  console.log(`  round : $${Math.round(price * 100) / 100}`);
  console.log(`  floor : $${Math.floor(price * 100) / 100}`);
  console.log(`  ceil  : $${Math.ceil(price  * 100) / 100}`);
  console.log(`  trunc : $${Math.trunc(price * 100) / 100}`);
}

shapeCalculator();

Expected Output:

code

Circle (r=8):
  Area         : 201.0619
  Circumference: 50.2655

Triangle (a=5, b=12):
  Hypotenuse   : 13.0000

Sphere (r=6):
  Volume       : 904.7787

Distance (2,3)→(8,11): 10.0000

Rounding $19.555:
  round : $19.56
  floor : $19.55
  ceil  : $19.56
  trunc : $19.55

Self-check questions:

Why does Math.round(19.555 * 100) / 100 sometimes give unexpected results?
What is the difference between Math.floor and Math.trunc for negative numbers?
When would you use Math.hypot(a, b) instead of Math.sqrt(a2 + b2)?

Exercise 2 · Random Generator Suite 🎲

Objective: Practice all key random patterns · floats, integers, ranges, arrays, weighted.

Scenario: You're building a test data generator for a school application. All student records need realistic random values.

Warm-up Micro-Demo:

javascript

const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const pick    = arr => arr[Math.floor(Math.random() * arr.length)];

console.log("Score:", randInt(40, 100)); // e.g. 73
console.log("Grade:", pick(["A","B","C","D","F"])); // e.g. B

Task A · Generate Realistic Student Records

javascript

const randInt     = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const randFloat   = (min, max) => +(Math.random() * (max - min) + min).toFixed(2);
const pick        = arr        => arr[Math.floor(Math.random() * arr.length)];
const shuffle     = arr        => {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = randInt(0, i);
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
};

function generateStudent(id) {
  const firstNames = ["Amara","Kwame","Fatima","Emeka","Priya","Omar","Sofia","Yuki","Carlos","Aisha"];
  const lastNames  = ["Diallo","Asante","Rashid","Obi","Sharma","Hassan","Martini","Tanaka","Ruiz","Nkosi"];
  const cities     = ["Lagos","Accra","Cairo","Nairobi","Casablanca","Tunis","Dakar"];

  const score      = randInt(40, 100);
  const attendance = randFloat(60, 100);

  const grade = score >= 90 ? "A"
              : score >= 75 ? "B"
              : score >= 60 ? "C"
              : score >= 50 ? "D" : "F";

  return {
    id:          `S${String(id).padStart(3, "0")}`,
    name:        `${pick(firstNames)} ${pick(lastNames)}`,
    age:          randInt(16, 22),
    city:         pick(cities),
    score,
    attendance:  `${attendance}%`,
    grade,
    status:      score >= 60 ? "Pass" : "Fail"
  };
}

console.log("=".repeat(55));
console.log("   GENERATED STUDENT RECORDS (Sample of 5)");
console.log("=".repeat(55));

const students = Array.from({ length: 5 }, (_, i) => generateStudent(i + 1));
students.forEach(s => {
  console.log(`\n  ${s.id} | ${s.name}`);
  console.log(`       Age: ${s.age}  City: ${s.city}`);
  console.log(`       Score: ${s.score}  Grade: ${s.grade}  (${s.status})`);
  console.log(`       Attendance: ${s.attendance}`);
});

// Shuffle and pick 2 for a committee
const committee = shuffle(students).slice(0, 2);
console.log(`\nRandomly selected committee:`);
committee.forEach(s => console.log(`  → ${s.name} (${s.id})`));

Self-check questions:

Why does the random integer formula use Math.floor and not Math.round?
What is the difference between randomFloat(0, 100) and Math.random() * 100?
How would you ensure no two generated students have the same name?

Exercise 3 · Statistics Calculator 📊

Objective: Use Math methods to compute real statistics on a dataset.

Scenario: You're building a grade analysis dashboard for a teacher.

Warm-up Micro-Demo:

javascript

const scores = [78, 92, 65, 88, 71];
const sum    = scores.reduce((a, b) => a + b, 0);
const avg    = sum / scores.length;
console.log("Average:", avg.toFixed(1)); // 78.8

Task A · Full Statistical Analysis

javascript

function analyse(scores) {
  const n      = scores.length;
  const sorted = [...scores].sort((a, b) => a - b);
  const sum    = scores.reduce((a, b) => a + b, 0);
  const mean   = sum / n;

  // Median
  const mid    = Math.floor(n / 2);
  const median = n % 2 !== 0
    ? sorted[mid]
    : (sorted[mid - 1] + sorted[mid]) / 2;

  // Standard deviation
  const variance = scores.reduce((acc, s) => acc + (s - mean) ** 2, 0) / n;
  const stdDev   = Math.sqrt(variance);

  // Range
  const max   = Math.max(...scores);
  const min   = Math.min(...scores);
  const range = max - min;

  // Percentile rank helper
  const percentile = (p) => {
    const idx = Math.ceil((p / 100) * n) - 1;
    return sorted[Math.max(0, idx)];
  };

  return { n, sum, mean, median, stdDev, max, min, range,
           p25: percentile(25), p75: percentile(75) };
}

const classScores = [88, 45, 72, 95, 61, 78, 53, 90, 84, 67, 73, 58, 92, 86, 49];

const stats = analyse(classScores);
console.log("=".repeat(45));
console.log("     CLASS SCORE STATISTICS");
console.log("=".repeat(45));
console.log(`Students    : ${stats.n}`);
console.log(`Total       : ${stats.sum}`);
console.log(`Mean        : ${stats.mean.toFixed(2)}`);
console.log(`Median      : ${stats.median}`);
console.log(`Std Dev     : ${stats.stdDev.toFixed(2)}`);
console.log(`Min / Max   : ${stats.min} / ${stats.max}`);
console.log(`Range       : ${stats.range}`);
console.log(`25th pctile : ${stats.p25}`);
console.log(`75th pctile : ${stats.p75}`);

// Distribution by rounding to nearest 10
const distribution = new Map();
classScores.forEach(s => {
  const bucket = Math.floor(s / 10) * 10;
  distribution.set(bucket, (distribution.get(bucket) || 0) + 1);
});
console.log("\nScore Distribution:");
[...distribution.entries()].sort((a,b) => a[0]-b[0]).forEach(([bucket, count]) => {
  console.log(`  ${bucket}s: ${"█".repeat(count)} (${count})`);
});

Expected Output:

code

=============================================
     CLASS SCORE STATISTICS
=============================================
Students    : 15
Total       : 1091
Mean        : 72.73
Median      : 73
Std Dev     : 16.26
Min / Max   : 45 / 95
Range       : 50
25th pctile : 58
75th pctile : 88

Score Distribution:
  40s: ██ (2)
  50s: ██ (2)
  60s: ██ (2)
  70s: ███ (3)
  80s: ███ (3)
  90s: ███ (3)

✏️ Your Task

· ### Exercise 1 · Math Toolkit Builder 🔧 Objective: Practice core Math methods in real calculations. Scenario: You're building a geometry calculator for an architecture app.

🏗️ Build It — Mini Project

🔵 Stage 1 · Dice Engine

Phase 3 · Project Simulation

Real-world scenario: You're building a browser-based casino simulator to demonstrate probability and statistics. The system simulates dice rolls, tracks outcomes, verifies statistical laws, and generates visual reports · all using Math methods and Math.random().

🔵 Stage 1 · Dice Engine

Goal: Build a fair dice roller for any number of sides, roll multiple dice simultaneously, and compute combined values.

Simple stage preview:

starter.html

const die = sides => Math.floor(Math.random() * sides) + 1;
console.log("d6:", die(6)); // 1–6
console.log("d20:", die(20)); // 1–20

Lesson 18 complete! 🎉

You covered:

✅ 1. Background: What Is the Math Object?
✅ 2. Topic 1 · Math Properties (Constants)
✅ 3. Topic 2 · Rounding Methods
✅ 4. Topic 3 · Arithmetic & Exponent Methods
✅ 5. Topic 4 · Min, Max & Clamp
✅ 6. Topic 5 · Logarithm & Trigonometry Methods
✅ 7. Topic 6 · Math.random() · Random Numbers
✅ 8. Topic 7 · Complete Math Reference

← Lesson 17 Lesson 19 →

JavaScript Math & Random: Math Properties · All Math Methods · Random Numbers · Full Reference

👋 Welcome to Lesson 18

Key Facts About the Math Object

The Most Important Constant: Math.PI

Math.E · Euler's Number

All 8 Math Constants at a Glance

The Four Rounding Methods · Side by Side

Math.round(x) · Round to Nearest Integer

Real use · round to decimal places:

Math.floor(x) · Always Round Down

Math.ceil(x) · Always Round Up

Math.trunc(x) · Remove Decimal (Truncate Toward Zero)

Rounding Summary Table

Math.abs(x) · Absolute Value

Math.sqrt(x) · Square Root

Math.cbrt(x) · Cube Root

Math.pow(base, exponent) · Power / Exponentiation

Math.hypot(...values) · Hypotenuse / Euclidean Length

Math.sign(x) · Sign of a Number

Math.fround(x) · Nearest 32-bit Float

Math.clz32(x) · Count Leading Zeros (32-bit)

Math.imul(x, y) · 32-bit Integer Multiplication

Math.max(...values) · Find the Largest Value

Find max in an array using spread:

Math.min(...values) · Find the Smallest Value

Clamping a Value · Keep It Within a Range

Logarithm Methods

Math.log(x) · Natural Logarithm (base e)

Math.log2(x) · Logarithm Base 2

Math.log10(x) · Logarithm Base 10

Math.expm1(x) · e^x minus 1

Math.log1p(x) · Natural log of (1 + x)

Trigonometry Methods

Math.sin(x) · Sine

Math.cos(x) · Cosine

Math.tan(x) · Tangent

Inverse Trigonometry

Hyperbolic Functions

Random Float in a Range

Random Integer · The Most Important Pattern

Random integer from 0 to n (exclusive):

Random integer in a range (inclusive on both ends):

Guaranteed Random Integer Functions · Reference Set

Random Boolean

Shuffle an Array · Fisher-Yates Algorithm

Random Item from a Weighted List

Random Color Generator

Seeded Random (Reproducible Results)

Math Properties

Rounding Methods

Arithmetic Methods

Min / Max

Logarithm Methods

Trigonometry Methods (all angles in radians)

Random

Essential Random Recipes

Exercise 1 · Math Toolkit Builder 🔧

Warm-up Micro-Demo:

Task A · Shape Calculator

Exercise 2 · Random Generator Suite 🎲

Warm-up Micro-Demo:

Task A · Generate Realistic Student Records

Exercise 3 · Statistics Calculator 📊

Warm-up Micro-Demo:

Task A · Full Statistical Analysis

🔵 Stage 1 · Dice Engine

Simple stage preview:

Lesson 18 complete! 🎉

The Most Important Constant: `Math.PI`

`Math.E` · Euler's Number

`Math.round(x)` · Round to Nearest Integer

`Math.floor(x)` · Always Round Down

`Math.ceil(x)` · Always Round Up

`Math.trunc(x)` · Remove Decimal (Truncate Toward Zero)

`Math.abs(x)` · Absolute Value

`Math.sqrt(x)` · Square Root

`Math.cbrt(x)` · Cube Root

`Math.pow(base, exponent)` · Power / Exponentiation

`Math.hypot(...values)` · Hypotenuse / Euclidean Length

`Math.sign(x)` · Sign of a Number

`Math.fround(x)` · Nearest 32-bit Float

`Math.clz32(x)` · Count Leading Zeros (32-bit)

`Math.imul(x, y)` · 32-bit Integer Multiplication

`Math.max(...values)` · Find the Largest Value

`Math.min(...values)` · Find the Smallest Value

`Math.log(x)` · Natural Logarithm (base e)

`Math.log2(x)` · Logarithm Base 2

`Math.log10(x)` · Logarithm Base 10

`Math.expm1(x)` · e^x minus 1

`Math.log1p(x)` · Natural log of (1 + x)

`Math.sin(x)` · Sine

`Math.cos(x)` · Cosine

`Math.tan(x)` · Tangent