Distinguishing Integers and Floating-Point Numbers in JavaScript

Understanding Number Types in JavaScript

JavaScript is a dynamically-typed language, meaning you don’t explicitly declare the type of a variable. Numbers in JavaScript are represented as a single number type, but they can represent both integers (whole numbers) and floating-point numbers (numbers with decimal points). Often, you’ll need to determine whether a given number is an integer or a float to perform specific operations or validations. This tutorial explores several ways to differentiate between these two number types in JavaScript.

The Core Concepts

• Integers: Whole numbers without a fractional component (e.g., -3, 0, 5, 100).
• Floating-Point Numbers: Numbers that have a fractional component (e.g., -1.25, 0.0, 3.14, 100.5).

Methods for Differentiation

Here are several approaches to determine if a number is an integer or a float in JavaScript, ranging from simple techniques to more robust solutions.

1. Using the Modulo Operator (%)

The modulo operator returns the remainder of a division. If a number divided by 1 has a remainder of 0, it’s an integer.

function isInteger(n) {
  return n % 1 === 0;
}

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

console.log(isInteger(5));   // true
console.log(isFloat(3.14)); // true
console.log(isInteger(0));   // true
console.log(isFloat(0.5));  // true

This method is concise and easy to understand. However, it can be unreliable if the number is the result of floating-point arithmetic, where rounding errors can occur.

2. Utilizing Number.isInteger() (ECMAScript 2015 and later)

ECMAScript 2015 (ES6) introduced the Number.isInteger() method, providing a standardized and reliable way to check for integers.

Number.isInteger(5);   // true
Number.isInteger(5.0); // true
Number.isInteger(5.1); // false
Number.isInteger("5"); // false (string, not a number)

This method is generally the preferred approach, as it’s specifically designed for this purpose. However, older browsers may not support it natively. In such cases, you can use a polyfill (a piece of code that provides functionality on older browsers that don’t have it natively). A simple polyfill is:

if (!Number.isInteger) {
  Number.isInteger = function(value) {
    return typeof value === 'number' && 
           isFinite(value) && 
           Math.floor(value) === value;
  };
}

3. Checking with Math.floor()

Another approach is to compare the number to its floor value. The Math.floor() function rounds a number down to the nearest integer. If the number is equal to its floor, it’s an integer.

function isInteger(n) {
  return Math.floor(n) === n;
}

console.log(isInteger(5));    // true
console.log(isInteger(5.9));  // false
console.log(isInteger(-3));   // true

4. Utilizing Bitwise Operators (Less Common)

Bitwise operators can also be used, though this approach is less readable and less common. The bitwise OR operator (|) will truncate the decimal part of a number.

function isInteger(n) {
  return n === (n | 0);
}

console.log(isInteger(5));     // true
console.log(isInteger(5.5));   // false

5. Considering Number.isSafeInteger()

For very large numbers, it’s important to consider the limitations of JavaScript’s number representation. Number.isSafeInteger() checks if a number is both an integer and within the safe integer range (–2⁵³ + 1 to 2⁵³ – 1). This prevents potential precision issues. It builds on Number.isInteger().

Number.isSafeInteger(1000000000000000000); // false (too large)
Number.isSafeInteger(100000000000000);     // true

Choosing the Right Method

• For most common use cases, Number.isInteger() is the most reliable and readable solution.
• If you need to support older browsers, use a polyfill for Number.isInteger().
• For very large numbers, consider using Number.isSafeInteger() to prevent potential precision problems.
• The modulo operator (%) is a simple alternative but can be less reliable due to potential floating-point errors.