Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use JavaScript to check if a number has a decimal place or it's a whole number?
In JavaScript, determining whether a number is a whole number or has decimal places is a common requirement. This tutorial explores three effective methods to accomplish this task using both built-in JavaScript methods and custom functions.
The following methods are available to check if a number is decimal or whole:
Using the Math.floor() Method
Using the Number.isInteger() Method
Using a Custom isDecimal() Function
Using Math.floor() Method
The Math.floor() method returns the largest integer less than or equal to a given number. By comparing the original number with its floor value, we can determine if it's a whole number.
Syntax
Math.floor(value);
Example
<!DOCTYPE html>
<html>
<body>
<p>Enter a number below and click "Check Number" to determine if it's whole or decimal.</p>
<input type="number" id="input" placeholder="Enter a number">
<p id="result"></p>
<button onclick="checkWithFloor()">Check Number</button>
<script>
function checkWithFloor() {
var input = document.getElementById("input");
var result = document.getElementById("result");
var number = Number(input.value);
if (number === Math.floor(number)) {
result.innerHTML = number + " is a whole number.";
} else {
result.innerHTML = number + " is a decimal number.";
}
}
</script>
</body>
</html>
Using Number.isInteger() Method
The Number.isInteger() method is the most straightforward approach. It returns true if the value is an integer, and false otherwise.
Syntax
Number.isInteger(value);
Example
<!DOCTYPE html>
<html>
<body>
<h3>Check if a number is whole or decimal</h3>
<input type="number" id="input2" placeholder="Enter a number">
<p id="result2"></p>
<button onclick="checkWithIsInteger()">Check Number</button>
<script>
function checkWithIsInteger() {
var input = document.getElementById("input2");
var result = document.getElementById("result2");
var number = Number(input.value);
if (Number.isInteger(number)) {
result.innerHTML = "<b>The number " + number + " is a whole number.</b>";
} else {
result.innerHTML = "<b>The number " + number + " is a decimal number.</b>";
}
}
</script>
</body>
</html>
Using Custom isDecimal() Function
You can create a custom function using the modulo operator (%). When a number is divided by 1, whole numbers return a remainder of 0, while decimal numbers return a non-zero remainder.
Syntax
var remainder = number % 1;
Example
<!DOCTYPE html>
<html>
<body>
<h3>Using Custom isDecimal() Function</h3>
<input type="number" id="input3" placeholder="Enter a number">
<p id="result3"></p>
<button onclick="checkWithCustomFunction()">Check Number</button>
<script>
function isDecimal(num) {
return (num % 1 !== 0);
}
function checkWithCustomFunction() {
var input = document.getElementById("input3");
var result = document.getElementById("result3");
var number = Number(input.value);
if (isDecimal(number)) {
result.innerHTML = "<b>The number " + number + " is a decimal number.</b>";
} else {
result.innerHTML = "<b>The number " + number + " is a whole number.</b>";
}
}
</script>
</body>
</html>
Comparison
| Method | Performance | Readability | Browser Support |
|---|---|---|---|
Math.floor() |
Good | Moderate | All browsers |
Number.isInteger() |
Best | Excellent | ES6+ (modern browsers) |
Custom % 1
|
Good | Good | All browsers |
Conclusion
Number.isInteger() is the recommended approach for modern applications due to its clarity and performance. For legacy browser support, use Math.floor() comparison or the modulo operator method.
26K+ Views
