JavaScript floor

The JavaScript floor function is a Math function that returns the largest integer value, which is less than or equal to the specified number or expression. It always rounds a number downwards by moving towards negative infinity.

For example, if we use the floor() function to round 10.98 (Math.floor(10.98), it returns 5 because it is the nearest integer less than or equal to 10.98.

JavaScript floor() syntax

The syntax of the Math.floor function is

Math.floor(number);

Parameters: The floor() function accepts a single parameter. It can be an integer or a floating-point number.

Return Value: The floor() function returns the largest integer value less than or equal to the given parameter (number). In short, it always moves towards negative infinity (rounds downwards).

  • This method will return the floor value if the argument is a positive or negative number.
  • If the number argument is not a number, it returns NaN.
  • And if it is Null, it will return Zero.

JavaScript floor function examples

Rounding down Positive values

When we pass a positive floating-point number, the Math.floor() function returns the largest integer value that is less than or equal to the given number. 

Here, 15 is the nearest integer less than both 15.98 and 15.01. However, when you pass an integer value, the floor() function returns the same number.

console.log(Math.floor(15.98));
console.log(Math.floor(15.01));
console.log(Math.floor(15));
15
15
15

JavaScript floor() function with negative numbers

Similar to the positive, the Math.floor() function returns the nearest integer rounded downwards. It returns the integer value towards negative infinity or away from zero.

In the following, -100 is the nearest integer to -99.78 and -99.10, which are less than the given number.

console.log(Math.floor(-99.78));
console.log(Math.floor(-99.10));
console.log(Math.floor(-99));
-100
-100
-99

JavaScript floor() function with Infinity, NaN, and null

When we pass a positive or negative infinity, the floor() function returns the same result. Similarly, it returns NaN for not-a-number values, including NaN and strings. However, if we pass a null value, empty string, the Math.floor() function returns 0 as the output.

console.log(Math.floor(Infinity));
console.log(Math.floor(-Infinity));
console.log(Math.floor(NaN));
console.log(Math.floor("Hello"));
Infinity
-Infinity
NaN
NaN

In the last statement, the floor() function was unable to convert the word to a floating-point number implicitly. So, it returns NaN (not-a-number).

Flooring zeros

When you apply the Math.floor() function on positive and negative zeros, it returns the same result.

console.log(Math.floor(0));
console.log(Math.floor(-0));
0
-0

JavaScript floor complete example

In this JS function example, we will find the floor values of different data types and display the output.

NOTE: Please refer to the Math functions article on the JavaScript page. The last line of this example uses this Math function on Null value JavaScript is returning Zero as output.

<!DOCTYPE html>
<html>
<head>
    <title> JavaScriptMathfloorFunction </title>
</head>
<body>
  <h1> JavaScriptFLOORFunction </h1>
  <p id = "Pos"></p>
  <p id = "Neg"></p>
  <p id = "Dec"></p>
  <p id = "Dec1"></p>
  <p id = "Neg_Dec"></p>
  <p id = "Neg_Dec1"></p>
  <p id = "Str"></p>
  <p id = "Exp"></p>
  <p id = "Null"></p>
  <script>
    document.getElementById("Pos").innerHTML = Math.floor(20);
    document.getElementById("Neg").innerHTML = Math.floor(-20);
    document.getElementById("Dec").innerHTML = Math.floor(10.05);
    document.getElementById("Dec1").innerHTML = Math.floor(10.95);
    document.getElementById("Neg_Dec").innerHTML = Math.floor(-6.05);
    document.getElementById("Neg_Dec1").innerHTML = Math.floor(-6.95);
    document.getElementById("Str").innerHTML = Math.floor("JavaScript");
    document.getElementById("Null").innerHTML = Math.floor(null);
  </script>
</body>
</html>
JavaScript floor function example

Using the floor() function with string (non-numeric values)

We can use the Math.floor() function on a string data type. However, the string has to be implicitly converted to a floating-point number. If it can’t be converted to a number, the floor() function returns NaN as the output.

let s = "11.98"
let a = "One"
console.log(Math.floor(s));
console.log(Math.floor(a));
11
NaN

JavaScript floor array example

In the following example, we use the Math.floor() function on an array of floating-point numbers. Here, the map() will create a new array by assigning every array item to the floor() function to round the value.

const n = [19.25, 30.58, 22.9, 50.896];

const result = n.map(Math.floor);
console.log(result);
[ 19, 30, 22, 50 ]

Rounding a number to 2 decimal places

As we all know, the floor() function returns the nearest integer. However, when performing scientific calculations, decimal precision is very important.

We use the following function to floor the given floating-point number to 2 or more decimal places.

function twoDecimals(n, precision = 0)
{
  const factor = Math.pow(10, precision);
  return n.map((i) => Math.floor(i * factor) / factor);
}

const n = [19.2532, 30.528, 22.199, 50.8296];
console.log(twoDecimals(n, 2));
[ 19.25, 30.52, 22.19, 50.82 ]

Using the floor() function on a matrix

const n = [[19.22, 30.58, 40.89], [22.199, 10.5, 50.8296]];

const result = n.map((row) => row.map(Math.floor));
console.log(result);
[ [ 19, 30, 40 ], [ 22, 10, 50 ] ]

JavaScript floor division

As we all know, floor division is nothing but dividing one operand by another and rounding the result. There is no special operator for performing a floor division.

For example, when we divide 10 by 3, the result becomes 3.5. However, when we use the floor() function to perform the floor division, the result becomes 3.

console.log(Math.floor(10/3));
3

When we use a negative value, the result moves towards negative infinity. For instance, if we divide 20 by 3, the result is -6.66, and the floor value is -7.

console.log(Math.floor(-20/3));
-7

JavaScript Math.floor() vs Math.ceil() vs Math.trunc

All three (floor, ceil, and trunc) help round floating-point numbers.

  • Math.floor: It rounds down the given number to the nearest (previous) integer (moves towards negative infinity).
  • Math.ceil: It rounds up the given number to the nearest (next) integer (moves towards positive infinity).
  • Math.trunc: It removes the decimal points (fractional points) from a number and keeps the integer value.
console.log(Math.floor(10.78));
console.log(Math.ceil(10.78));
console.log(Math.trunc(10.78));
console.log("===Negative Number===")
console.log(Math.floor(-10.78));
console.log(Math.ceil(-10.78));
console.log(Math.trunc(-10.78));
10
11
10
===Negative Number===
-11
-10
-10

Real-time examples of the JavaScript floor() function

Web applications: Pagination Example

In a web application that displays products or items on a page, each page can store 10 items. We can use the Math.floor() function to calculate the total number of pages required to store the inventory.

const items = 25;
const perPage = 10;
let totalPages = Math.floor(items / perPage);
console.log(totalPages);
2

Use floor() for array indexing

We can use the Math.floor() function for array indexing to select a random element from an array. In the following example, on each program run, the random() function will select a random array item. Here, the length method restricts the random number from exceeding the highest array index value.

const fruits = ['Apple', 'Banana', 'Grape', 'Kiwi'];

const i = Math.floor(Math.random() * fruits.length);

console.log('index =', i);
console.log('Fruit Name = ',fruits[i]);
index = 2
Fruit Name =  Grape

Booking an appointment (Time slot)

const hour = 11.45;

const slot = Math.floor(hour);
console.log(slot);
11