JavaScript Numbers & Math

Beginner ~12 min read

JavaScript Numbers

JavaScript has only one type of number. Numbers can be written with or without decimals.

HTML

CSS

<h2>Number Demo</h2>
<p id='demo'></p>

Floating Point Precision: Floating point arithmetic is not always 100% accurate.
0.1 + 0.2 === 0.30000000000000004

Number Methods

Useful methods for working with numbers:

HTML

CSS

<h2>Number Methods Demo</h2>
<p id='methods'></p>

The Math Object

The JavaScript Math object allows you to perform mathematical tasks on numbers.

HTML

CSS

<h2>Math Object Demo</h2>
<p id='math'></p>

/* CSS */

let output = '';

output += `Math.PI: ${Math.PI}<br>`;
output += `Math.round(4.7): ${Math.round(4.7)}<br>`;
output += `Math.ceil(4.4): ${Math.ceil(4.4)} (Round up)<br>`;
output += `Math.floor(4.7): ${Math.floor(4.7)} (Round down)<br>`;
output += `Math.sqrt(64): ${Math.sqrt(64)}<br>`;
output += `Math.abs(-4.7): ${Math.abs(-4.7)}<br>`;
output += `Math.min(0, 150, 30, 20, -8): ${Math.min(0, 150, 30, 20, -8)}<br>`;
output += `Math.max(0, 150, 30, 20, -8): ${Math.max(0, 150, 30, 20, -8)}<br>`;

document.getElementById('math').innerHTML = output;

Random Numbers

Math.random() returns a random number between 0 (inclusive) and 1 (exclusive).

HTML

CSS

<h2>Random Demo</h2>
<button id='btn'>Generate Random Number</button>
<p id='random'></p>

Summary

JavaScript numbers are always 64-bit floating point.
Integers are accurate up to 15 digits.
Use Math.round(), Math.ceil(), and Math.floor() to round numbers.
Math.random() generates random numbers.

Quick Quiz

Which method rounds a number DOWN to the nearest integer?

Math.round()

Math.ceil()

Math.floor()

Math.down()

Previous Strings

Next Home