Check if a Number is a Float or Integer in JavaScript

Introduction

If you're trying to validate user input, for example, figuring out how to determine the type of a number in JavaScript is a problem you may come across. In this Byte, we're going to explore how to check whether a number is an integer or a floating-point number.

JavaScript Number Types

You may not have known this, but in JavaScript, all numbers are treated as floating-point numbers, regardless of whether they have decimal places or not. This is because JavaScript follows the IEEE 754 standard for Binary Floating-Point Arithmetic. This might seem a bit confusing if you're coming from a language that distinguishes between integers and floating-point numbers internally, but it's one of the quirks of JavaScript that we've come to know and love.

Why Check for Integer or Float?

There are quite a few reasons we'd want to know if a number is an integer or floating point. One possibility is if we're building a feature that requires integer input. Or, a more obvious use-case, you're validating user input and need to ensure that it's a specific type of number. In these cases, being able to check the type of a number can is needed.

How to Check if a Number is an Integer in JavaScript

To check if a number is an integer in JavaScript, you can use the Number.isInteger() function. Here's how it works:

console.log(Number.isInteger(10));  // true
console.log(Number.isInteger(10.5));  // false

In this simple example, we're testing the numbers 10 and 10.5 to see if they're integers. As expected, Number.isInteger() returns true for 10 and false for 10.5.

The Number.isInteger() function only returns true if the value is a number that does not have a decimal component. It will return false for non-numeric values.

But what if we want to check if a number is an integer in a string? Well, we can parse the string to a number using parseFloat() and then check if it's an integer:

let num = "10";

console.log(Number.isInteger(parseFloat(num)));  // true

In this case, parseFloat() converts the string "10" to the number 10, and Number.isInteger() correctly identifies it as an integer.

How to Check if a Number is a Float in JavaScript

In JavaScript, there's no specific type for floats. Both integers and floats are considered as Number type. However, we can still determine if a number is a float.

Here's a clever function that checks if a number is a float:

function isFloat(n) {
    return Number(n) === n && n % 1 !== 0;
}

This function works by checking if the input is indeed a number (Number(n) === n) and that the remainder of the division of n by 1 is not 0 (n % 1 !== 0). If the remainder is not 0, it implies that n has a fractional component, hence a float.

For example:

console.log(isFloat(10.5));  // Returns: true
console.log(isFloat(10));    // Returns: false

Handling Edge Cases

While the function above works for most cases, there are some edge cases we need to consider. For example, what happens if we pass a string that can be converted to a number? Or what if we pass an array?

Let's improve our function to handle these edge cases:

function isFloat(n) {
    if (typeof n !== 'number') {
        return false;
    }
    return Number(n) === n && n % 1 !== 0;
}

Now, our function will first check if the input is a number type. If not, it immediately returns false. This way, we can prevent incorrect results from invalid inputs.

For example:

console.log(isFloat("10.5"));  // Returns: false
console.log(isFloat([10.5]));  // Returns: false

Precision and Limitations

Because of the IEEE 754 standard, JavaScript can only safely represent numbers between -(2⁵³ - 1) and 2⁵³ - 1. Any number outside of this range might lose precision.

Moreover, due to the binary floating-point representation, some decimal numbers can't be represented exactly. This can lead to unexpected results when comparing numbers or checking if a number is a float.

You may have seen this odd example floating around the web:

console.log(0.1 + 0.2 === 0.3);  // Returns: false

We get false because of this:

console.log(0.1 + 0.2); // Returns: 0.30000000000000004

Therefore, when working with floats in JavaScript, you'll always need to be aware of these limitations and handle them appropriately in your code.

Conclusion

In this Byte, we've learned how to check if a number is a float in JavaScript. We've also seen how to handle edge cases and talked about the limitations of number precision in JavaScript. While JavaScript doesn't have a specific float type, we can still determine if a number is a float by checking the remainder of its division by 1.