JavaScript Math Object — JavaScript Tutorial

Mathematical Operations

The Math object provides mathematical constants and functions.

It's a built-in object with properties and methods for mathematical operations.

Example

// Constants
Math.PI;     // 3.141592653589793
Math.E;      // 2.718281828459045

// Rounding
Math.round(4.7);   // 5
Math.ceil(4.1);    // 5 (round up)
Math.floor(4.9);   // 4 (round down)
Math.trunc(4.9);   // 4 (remove decimal)

// Min/Max
Math.max(1, 5, 3);  // 5
Math.min(1, 5, 3);  // 1

// Power and Square Root
Math.pow(2, 3);    // 8 (2³)
Math.sqrt(16);     // 4
Math.cbrt(27);     // 3 (cube root)

// Random
Math.random();     // Random between 0-1

// Random integer between min and max
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Trigonometry
Math.sin(Math.PI / 2);  // 1
Math.cos(0);            // 1
Math.tan(Math.PI / 4);  // 1

// Absolute value
Math.abs(-5);  // 5

Math.PI - Pi constant
Math.round() - Round to nearest
Math.ceil() - Round up
Math.floor() - Round down
Math.random() - Random 0-1
Math.max/min() - Find max/min
Math.pow() - Exponentiation
Math.sqrt() - Square root

Try Math Object

HTML

<div class="math-demo">
  <h3>Math Calculator</h3>
  <button onclick="rollDice()">🎲 Roll Dice (1-6)</button>
  <button onclick="randomColor()">🎨 Random Color</button>
  <button onclick="circleArea()">⭕ Circle Area</button>
  <div id="mathOutput"></div>
  
  <hr style="margin: 20px 0;">
  
  <h3>Number Rounder</h3>
  <input type="number" id="numberInput" step="0.01" value="4.567">
  <button onclick="showRounding()">Show Rounding</button>
  <div id="roundOutput"></div>
</div>

CSS

.math-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
input { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; width: 150px; }
button { padding: 10px 15px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
#mathOutput, #roundOutput { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; min-height: 30px; }

JavaScript

function rollDice() {
  const roll = Math.floor(Math.random() * 6) + 1;
  const output = document.getElementById('mathOutput');
  output.innerHTML = `<h2 style="font-size: 48px; text-align: center; margin: 20px 0;">${roll}</h2>`;
}

function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  const color = `rgb(${r}, ${g}, ${b})`;
  const output = document.getElementById('mathOutput');
  output.style.background = color;
  output.innerHTML = `<strong>Random Color:</strong><br>${color}<br>RGB(${r}, ${g}, ${b})`;
}

function circleArea() {
  const radius = prompt('Enter circle radius:', '5');
  if (radius) {
    const area = Math.PI * Math.pow(parseFloat(radius), 2);
    const circumference = 2 * Math.PI * parseFloat(radius);
    const output = document.getElementById('mathOutput');
    output.innerHTML = `
      <strong>Circle with radius ${radius}:</strong><br>
      Area: ${area.toFixed(2)}<br>
      Circumference: ${circumference.toFixed(2)}
    `;
  }
}

function showRounding() {
  const num = parseFloat(document.getElementById('numberInput').value);
  const output = document.getElementById('roundOutput');
  output.innerHTML = `
    <strong>Rounding ${num}:</strong><br>
    Math.round(): ${Math.round(num)}<br>
    Math.ceil(): ${Math.ceil(num)}<br>
    Math.floor(): ${Math.floor(num)}<br>
    Math.trunc(): ${Math.trunc(num)}<br>
    toFixed(2): ${num.toFixed(2)}
  `;
}

Notes

Math.random() is great for games, simulations, and random selections!