Tutorial: Javascript Math Object
Tags: javascript, programming, webdev, codenewbie
Published: 2022-01-20 09:47:04

---
title: Tutorial: Javascript Math Object
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["javascript", "Programming", 'webdev', 'codenewbie']
canonical_url: https://www.devwares.com/blog//javascript-math-object
---



## JavaScript Math Object

The JavaScript Math object lets you do math using numbers.

**JavaScript Code:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

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

```

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)




## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [HTML Tables, Classes and Ids](https://www.devwares.com/blog/html-table)
- [Introducing HTML](https://www.devwares.com/blog/html-tableintroduction-to-html)
- [Creating Responsive HTML web design](https://www.devwares.com/blog/html-tablehtml-responsive)
- [HTML Quotations and comments](https://www.devwares.com/blog/html-tablehtml-quotations)
- [Installation](https://www.devwares.com/docs/contrast/angular/Installation/)
- [Accordion](https://www.devwares.com/docs/contrast/angular/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/angular/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/angular/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/angular/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/angular/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/angular/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/angular/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/angular/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/angular/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/angular/components/buttons/)
- [Checkbox](https://www.devwares.com/docs/contrast/angular/components/checkbox/)
- [Card](https://www.devwares.com/docs/contrast/angular/components/card/)
- [Collapse](https://www.devwares.com/docs/contrast/angular/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/angular/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/angular/components/footer/)
- [InputGroup](https://www.devwares.com/docs/contrast/angular/components/inputgroup/)
- [Iframe](https://www.devwares.com/docs/contrast/angular/components/iframe/)
- [Modal](https://www.devwares.com/docs/contrast/angular/components/modal/)
- [Mask](https://www.devwares.com/docs/contrast/angular/components/mask/)
- [Multiselect](https://www.devwares.com/docs/contrast/angular/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/angular/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/angular/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/angular/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/angular/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/angular/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/angular/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/angular/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/angular/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/angular/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/angular/components/spinner/)
- [Switch](https://www.devwares.com/docs/contrast/angular/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/angular/components/stepper/)
- [Icon](https://www.devwares.com/docs/contrast/angular/components/icon/)
- [Input](https://www.devwares.com/docs/contrast/angular/components/input/)
- [ListGroup](https://www.devwares.com/docs/contrast/angular/components/listgroup/)
- [Forms](https://www.devwares.com/docs/contrast/angular/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/angular/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/angular/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/angular/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/angular/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/angular/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/angular/table/datatables/)
- [Editable Table](https://www.devwares.com/docs/contrast/angular/table/editabletable/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/angular/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/angular/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/angular/widgets/)