Tutorial: Javascript Math Object


By Emmanuel Chinonso

Web Developer

Contrast Bootstrap UI Kit

JavaScript Math Object

The JavaScript Math object lets you do math using numbers.

JavaScript Code:

1Math.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) is the syntax for any Math property. Math properties in JavaScript allow access to eight mathematical constants:

JavaScript Code:

1Math.E; // returns Euler's number
2Math.PI; // returns PI
3Math.SQRT2; // returns the square root of 2
4Math.SQRT1_2; // returns the square root of 1/2
5Math.LN2; // returns the natural logarithm of 2
6Math.LN10; // returns the natural logarithm of 10
7Math.LOG2E; // returns base 2 logarithm of E
8Math.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:

1Math.round(4.9); // returns 5
2Math.round(4.7); // returns 5
3Math.round(4.4); // returns 4
4Math.round(4.2); // returns 4
5Math.round(-4.2); // returns -4

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

JavaScript Code:

1Math.ceil(4.9); // returns 5
2Math.ceil(4.7); // returns 5
3Math.ceil(4.4); // returns 5
4Math.ceil(4.2); // returns 5
5Math.ceil(-4.2); // returns -4

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

JavaScript Code:

1Math.floor(4.9); // returns 4
2Math.floor(4.7); // returns 4
3Math.floor(4.4); // returns 4
4Math.floor(4.2); // returns 4
5Math.floor(-4.2); // returns -5

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

JavaScript Code:

1Math.trunc(4.9); // returns 4
2Math.trunc(4.7); // returns 4
3Math.trunc(4.4); // returns 4
4Math.trunc(4.2); // returns 4
5Math.trunc(-4.2); // returns -4

JavaScript Random


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

JavaScript Code:

1Math.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:

1Math.floor(Math.random() * 10); // returns a random integer from 0 to 9
2Math.floor(Math.random() * 11); // returns a random integer from 0 to 10
3Math.floor(Math.random() * 100); // returns a random integer from 0 to 99
4Math.floor(Math.random() * 101); // returns a random integer from 0 to 100
5Math.floor(Math.random() * 10) + 1; // returns a random integer from 1 to 10
6Math.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:

1function getRndInteger(min, max) {
2 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:

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

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro


Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts