How to convert float to integer in JavaScript

Aug 02, 2023#javascript

A float number in JavaScript is a number that can have a decimal part, such as 3.14 or -9.25. JavaScript has only one type of number, so there is no distinction between integers and floats. All numbers are stored as 64-bit floating point numbers, following the international IEEE 754 standard.

This means that numbers can be written with or without decimals, and also in scientific (exponent) notation, such as 123e5 or 123e-52. However, there are some limitations to the magnitude and precision of numbers in JavaScript. For example, integers can only be represented accurately up to 15 digits, and floating point arithmetic is not always 100% accurate.

Converting a float to an integer is a common operation that allows you to work with whole numbers instead of decimal values. You can use various methods that either round, truncate, or parse the float value.

Depending on your specific use case, you can choose the most appropriate method:

  1. Using Math.trunc(). This method returns the integer part of a number by removing any fractional digits. In other words, it truncates (cuts off) the dot and the digits to the right of it, no matter whether the argument is a positive or negative number.
console.log(Math.trunc(7.8)); // 7
console.log(Math.trunc(5.1)); // 5
console.log(Math.trunc(-3.7)); // -3

The Math.trunc() method is different from the other Math methods that round numbers, such as Math.floor(), Math.ceil() and Math.round(). The Math.trunc() method always rounds towards zero, while the other methods round up or down depending on the sign and magnitude of the fractional part.

  1. Using Math.floor(): This function rounds down to the nearest integer. When you apply it to a positive float, it will return the largest integer less than or equal to the float. If the number is negative, it will round towards negative infinity.
console.log(Math.floor(7.8)); // 7
console.log(Math.floor(5.1)); // 5
console.log(Math.floor(-3.7)); // -4
  1. Using Math.ceil(): This function rounds up to the nearest integer. When you apply it to a positive float, it will return the smallest integer greater than or equal to the float. If the number is negative, it will round towards positive infinity.
console.log(Math.ceil(7.8)); // 8
console.log(Math.ceil(5.1)); // 6
console.log(Math.ceil(-3.7)); // -3
  1. Using Math.round(): This function rounds to the nearest integer. If the decimal part of the number is less than 0.5, it will round down; if it’s 0.5 or greater, it will round up.
console.log(Math.round(7.8)); // 8
console.log(Math.round(5.1)); // 5
console.log(Math.round(-3.7)); // -4

If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of positive infinity.

console.log(Math.round(1.5)); // 2
console.log(Math.round(2.5)); // 3
console.log(Math.round(0.5)); // 1
console.log(Math.round(-0.5)); // -0
  1. Using parseInt(): This function converts a string to an integer. When you pass a float as a parameter, it will truncate the decimal part and return the integer value.

In general, it’s a bad idea to use parseInt() on non-strings, especially to use it as a substitution for Math.trunc(). It may work on small numbers:

console.log(parseInt(7.8)); // 7
console.log(parseInt(5.1)); // 5
console.log(parseInt(-3.7)); // -3

However, it only happens to work because the string representation of these numbers uses basic fractional notation (15.99, -15.1), where parseInt() stops at the decimal point. Numbers greater than or equal to 1e+21 or less than or equal to 1e-7 use exponential notation (1.5e+22, 1.51e-8) in their string representation, and parseInt() will stop at the e character or decimal point, which always comes after the first digit. This means for large and small numbers, parseInt() will return a one-digit integer:

console.log(parseInt(4.7 * 1e22, 10)); // Very large number becomes 4
console.log(parseInt(0.00000000000434, 10)); // Very small number becomes 4
  1. Using bitwise operators

Bitwise operations convert their operands to 32-bit integers, which people have historically taken advantage of to truncate float-point numbers. Common techniques include:

const original = 3.14;
const truncated1 = ~~original; // Double negation
const truncated2 = original & -1; // Bitwise AND with -1
const truncated3 = original | 0; // Bitwise OR with 0
const truncated4 = original ^ 0; // Bitwise XOR with 0
const truncated5 = original >> 0; // Bitwise shifting by 0

Only use bitwise operations when you are confident that the range of input falls within the range of 32-bit integers.

You can use the bitwise OR operator (|) with zero to get the whole number part of a float. For example, 3.14 | 0 will return 3. This works because the OR operator sets each bit to 1 if one of the bits is 1, and zero otherwise. So any bits after the decimal point will be zeroed out.

// Using bitwise OR
console.log(3.14 | 0); // 3
console.log(-3.14 | 0); // -3
console.log(123456789.123 | 0); // 123456789

You can use the double NOT operator (~) twice to get the same result as the OR operator. For example, ~~3.14 will return 3. This works because the NOT operator inverts all the bits, so applying it twice will cancel out the inversion.

// Using double NOT
console.log(~~3.14); // 3
console.log(~~-3.14); // -3
console.log(~~123456789.123); // 123456789

You can use the right shift operator (>>) with zero to get the same result as well. For example, 3.14 >> 0 will return 3. This works because the right shift operator shifts the bits to the right by a given number of positions, and fills in zeros from the left. So any bits after the decimal point will be shifted out and replaced by zeros.

// Using right shift
console.log(3.14 >> 0); // 3
console.log(-3.14 >> 0); // -3
console.log(123456789.123 >> 0); // 123456789