JavaScript Math Object
The Math Object
Unlike some objects, the Math object doesn't need a constructor.
The Math object is static.
All the functions and attributes in Math can be employed without the need to create a Math object beforehand.
Math Properties (Constants)
The way you write any Math property in JavaScript is like this: Math.property.
JavaScript gives you access to 8 special mathematical values through the Math object properties:
Math Methods
The way you use math methods in JavaScript is like this: Math.method(number).
Number to Integer
There are 4 common methods to round a number to an integer:
|
| Math.round(x) | Returns x rounded to its nearest integer |
|
| Math.ceil(x) | Returns x rounded up to its nearest integer |
|
| Math.floor(x) | Returns x rounded down to its nearest integer |
|
| Math.trunc(x) | Returns the integer part of x (new in ES6) |
Math.round()
The Math.round(x) function gives you the closest whole number to the value of x.
Math.ceil()
The code Math.ceil(x) gives you the nearest whole number that's equal to or greater than the value of x.
Math.floor()
The Math.floor(x) function gives you the whole number that's equal to or less than the number x. The code rounds a number down to the whole number it is closest to.
Math.trunc()
The Math.trunc(x) function gives you the whole number part of the value x:
Math.sign()
The Math.sign(x) function tells you whether the number 'x' is negative, zero, or positive.
Math.pow()
The Math.pow(x, y) function calculates x raised to the power of y.
Math.sqrt()
The code snippet Math.sqrt(x) calculates the square root of the number x.
Math.abs()
The code Math.abs(x) gives you the positive value of the number x.
Math.sin()
The code Math.sin(x) calculates the sine (a number between -1 and 1) of an angle represented by x in radians.
If you prefer to work with degrees instead of radians, you'll need to convert degrees into radians.
The angle in radians equals the angle in degrees multiplied by PI divided by 180.
Math.cos()
The code Math.cos(x) gives you the cosine of an angle (measured in radians), which is a number between -1 and 1.
If you prefer to work with degrees rather than radians, you'll need to convert degrees into radians:
Angle in radians = Angle in degrees x PI / 180.
Math.min() and Math.max()
You can use Math.min() to find the smallest value in a list of numbers, and Math.max() to find the largest value.
Math.random()
The code Math.random() gives you a random number between 0 (including 0) and 1 (not including 1).
You will learn more about Math.random() in the next chapter of this tutorial.
The Math.log() Method
Math.log(x) gives you the natural logarithm of the number x.
The natural logarithm helps determine the time it takes to achieve a specific level of growth.
Math.E and Math.log() are twins.
The Math.log2() Method
The code snippet Math.log2(x) calculates the logarithm of x with a base of 2.
The Math.log10() Method
The code Math.log10(x) calculates the base 10 logarithm of the number x.
JavaScript Math Methods
| Method |
Description |
| abs(x) |
Returns the absolute value of x |
| acos(x) |
Returns the arccosine of x, in radians |
| acosh(x) |
Returns the hyperbolic arccosine of x |
| asin(x) |
Returns the arcsine of x, in radians |
| asinh(x) |
Returns the hyperbolic arcsine of x |
| atan(x) |
Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians |
| atan2(y, x) |
Returns the arctangent of the quotient of its arguments |
| atanh(x) |
Returns the hyperbolic arctangent of x |
| cbrt(x) |
Returns the cubic root of x |
| ceil(x) |
Returns x, rounded upwards to the nearest integer |
| cos(x) |
Returns the cosine of x (x is in radians) |
| cosh(x) |
Returns the hyperbolic cosine of x |
| exp(x) |
Returns the value of Ex |
| floor(x) |
Returns x, rounded downwards to the nearest integer |
| log(x) |
Returns the natural logarithm (base E) of x |
| max(x, y, z, ..., n) |
Returns the number with the highest value |
| min(x, y, z, ..., n) |
Returns the number with the lowest value |
| pow(x, y) |
Returns the value of x to the power of y |
| random() |
Returns a random number between 0 and 1 |
| round(x) |
Rounds x to the nearest integer |
| sign(x) |
Returns if x is negative, null or positive (-1, 0, 1) |
| sin(x) |
Returns the sine of x (x is in radians) |
| sinh(x) |
Returns the hyperbolic sine of x |
| sqrt(x) |
Returns the square root of x |
| tan(x) |
Returns the tangent of an angle |
| tanh(x) |
Returns the hyperbolic tangent of a number |
| trunc(x) |
Returns the integer part of a number (x) |
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.PI</h2>
<p>The value returned by Math.PI shows how many times the circumference of a circle can fit across its diameter.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math Constants</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = " <p> <b> Math.E: </b> " + Math.E + " </p>" +
" <p> <b> Math.PI: </b> " + Math.PI + " </p>" +
" <p> <b> Math.SQRT2: </b> " + Math.SQRT2 + " </p>" +
" <p> <b> Math.SQRT1_2: </b> " + Math.SQRT1_2 + " </p>" +
" <p> <b> Math.LN2: </b> " + Math.LN2 + " </p>" +
" <p> <b> Math.LN10: </b> " + Math.LN10 + " </p>" +
" <p> <b> Math.LOG2E: </b> " + Math.LOG2E + " </p>" +
" <p> <b> Math.Log10E: </b> " + Math.LOG10E + " </p>";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.round()</h2>
<p>Math.round(x) returns the value of x rounded to its nearest integer:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.round(4.6);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.ceil()</h2>
<p>Math.ceil() rounds a number <strong>up</strong> to its nearest integer: </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.ceil(4.4);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.floor()</h2>
<p>Math.floor(x) returns the value of x rounded <strong>down</strong> to its nearest integer: </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.floor(4.7);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.trunc()</h2>
<p>Math.trunc(x) returns the integer part of x:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.sign()</h2>
<p>Math.sign(x) returns if x is negative, null or positive:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.pow()</h2>
<p>Math.pow(x,y) returns the value of x to the power of y:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.pow(8, 2);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.sqrt()</h2>
<p>Math.sqrt(x) returns the square root of x:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.sqrt(64);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.abs()</h2>
<p>Math.abs(x) returns the absolute (positive) value of x:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.abs(-4.7);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.sin()</h2>
<p>Math.sin(x) returns the sin of x (given in radians):</p>
<p>Angle in radians = (angle in degrees) * PI / 180.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "The sine value of 90 degrees is " + Math.sin(90 * Math.PI / 180);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.cos()</h2>
<p>Math.cos(x) returns the cosine of x (given in radians):</p>
<p>Angle in radians = (angle in degrees) * PI / 180.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "The cosine value of 0 degrees is " + Math.cos(0 * Math.PI / 180);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.min()</h2>
<p>Math.min() returns the lowest value in a list of arguments:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.min(0, 150, 30, 20, -8, -200);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.max()</h2>
<p>Math.max() returns the highest value in a list of arguments.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max(0, 150, 30, 20, -8, -200);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 and 1:</p>
<p id="demo"></p>
<p>Tip: Click on "Run" several times.</p>
<script>
document.getElementById("demo").innerHTML = Math.random();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.log()</h2>
<p>Math.log() returns the natural logarithm of a number:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.log(1);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.log()</h2>
<p>How many times must we multiply Math.E to get 10?</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.log(10);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.log2()</h2>
<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.log10()</h2>
<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery