Tutorial: Javascript Math Object

JavaScript Math Object

The JavaScript Math object lets you do math using numbers.

JavaScript Code:

Math.PI; // returns 3.141592653589793

The Math Object

The Math object, unlike other objects, does not have a constructor. The Math object is a one-dimensional object. Without first constructing a Math object, all methods and properties are available.

Math Properties (Constants)

Math.property is the syntax for any Math property. Math properties in JavaScript allow access to eight mathematical constants:

JavaScript Code:

Math.E; // returns Euler's number
Math.PI; // returns PI
Math.SQRT2; // returns the square root of 2
Math.SQRT1_2; // returns the square root of 1/2
Math.LN2; // returns the natural logarithm of 2
Math.LN10; // returns the natural logarithm of 10
Math.LOG2E; // returns base 2 logarithm of E
Math.LOG10E; // returns base 10 logarithm of E

Math Methods

The syntax for all Math methods is as follows: Math.method.(number) Integer to Number To round a number to an integer, there are four popular methods: Math.round(x) Returns the value of x rounded to the closest integer. Math.ceil(x) Returns the value of x, rounded to the closest integer. Math.floor(x) The value of x is rounded down to the nearest integer. Math.trunc(x) The integer component of x is returned (new in ES6) Math.round() Math.round(x) produces the integer closest to the given value

JavaScript Code:

Math.round(4.9); // returns 5
Math.round(4.7); // returns 5
Math.round(4.4); // returns 4
Math.round(4.2); // returns 4
Math.round(-4.2); // returns -4
Math.ceil();

The value of x rounded up to the nearest integer is returned by Math.ceil(x):

JavaScript Code:

Math.ceil(4.9); // returns 5
Math.ceil(4.7); // returns 5
Math.ceil(4.4); // returns 5
Math.ceil(4.2); // returns 5
Math.ceil(-4.2); // returns -4
Math.floor();

The value of x reduced down to the closest integer is returned by Math.floor(x):

JavaScript Code:

Math.floor(4.9); // returns 4
Math.floor(4.7); // returns 4
Math.floor(4.4); // returns 4
Math.floor(4.2); // returns 4
Math.floor(-4.2); // returns -5
Math.trunc();

Math.trunc(x) returns the integer part of x:

JavaScript Code:

Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4

JavaScript Random

Math.random()

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

JavaScript Code:

Math.random(); // returns a random number

Math.random() always produces a value that is less than 1.

JavaScript Random Integers

Random integers can be returned using Math.random() and Math.floor().

JavaScript Code:

Math.floor(Math.random() * 10); // returns a random integer from 0 to 9
Math.floor(Math.random() * 11); // returns a random integer from 0 to 10
Math.floor(Math.random() * 100); // returns a random integer from 0 to 99
Math.floor(Math.random() * 101); // returns a random integer from 0 to 100
Math.floor(Math.random() * 10) + 1; // returns a random integer from 1 to 10
Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100.

A Proper Random Function

As you can see from the examples above, creating a suitable random function to utilize for all random integer uses could be a smart idea. This JavaScript function always returns a number between min (included) and max (excluded) that is between min (included) and max (excluded):

JavaScript Code:

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

This JavaScript function always produces a number between min and max (both included) that is random:

JavaScript Code:

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Resources

You may find the following resources useful:

• Get Contrast PRO
• HTML Tables, Classes and Ids
• Introducing HTML
• Creating Responsive HTML web design
• HTML Quotations and comments
• Installation
• Accordion
• Alert
• Animation
• Autocomplete
• Badges
• Box
• Breadcrumb
• ButtonGroup
• ButtonToolbar
• Button
• Checkbox
• Card
• Collapse
• DropDown
• Footer
• InputGroup
• Iframe
• Modal
• Mask
• Multiselect
• Notification
• Pane
• Panel
• Progress
• Radio
• Rating
• Select
• Select 2
• Slider
• Spinner
• Switch
• Stepper
• Icon
• Input
• ListGroup
• Forms
• Navbar
• Pagination
• Tab
• Sidebar
• Time Picker
• Data Table
• Editable Table
• Fixed Data Table
• Table
• Widgets