DEV Community

Samantha Ming
Samantha Ming

Posted on

Number Truncation in JavaScript

Code Tidbit by SamanthaMing.com

Use Math.trunc() to truncate a floating point number and return its integer part. This function doesn't do any rounding, it simply removes all the digits following the decimal. Now you have a whole number, yay ๐ŸŽŠ

const number = 80.6

// Old Way
number < 0 ? Math.ceil(number) : Math.floor(number);
// 80

// โœ…ES6 Way
const es6 = Math.trunc(number);
// 80
Enter fullscreen mode Exit fullscreen mode

Example

Math.trunc() simply truncates (cuts off) the dots and the digits to the right of it. No matter whether the argument is a positive or negative number.

Math.trunc(80.9); // 80
Math.trunc(80.8); // 80
Math.trunc(80.8); // 80
Math.trunc(80.6); // 80
Math.trunc(80.5); // 80
Math.trunc(80.4); // 80
Math.trunc(80.3); // 80
Math.trunc(80.2); // 80
Math.trunc(80.1); // 80

Math.trunc(-80.1); // -80
Enter fullscreen mode Exit fullscreen mode

Now let's see some examples with non-number arguments:

Math.trunc('80.1'); // 80
Math.trunc('hello'); // NaN
Math.trunc(NaN); // NaN
Math.trunc(undefined); // NaN
Math.trunc(); // NaN
Enter fullscreen mode Exit fullscreen mode

Number truncation using parseInt

You can get a similar result using parseInt

parseInt(80.1); // 80
parseInt(-80.1); // -80

parseInt('80.1'); // 80
parseInt('hello'); // NaN
parseInt(undefined); // NaN
parseInt(); // NaN
Enter fullscreen mode Exit fullscreen mode

Math.trunc() vs parseInt()

parseInt is mainly used for a string argument. So if you're dealing with numbers, it's way better to use Math.trunc().

If you're curious, I wrote up a performance test comparing these two functions.

jsPerf: Math.trunc vs parseInt

The gotcha with parseInt

There's a potential issue when using parseInt. When you pass in an argument that's not a string, in our case a number, it will first convert the value to a string using the toString() abstract operation. Most of the time, parseInt is fine. But let's look at an example where it might not be.

const number = 1000000000000000000000.5;

const result = parseInt(number);

console.log(result); // 1 <-- ๐Ÿ˜ฑ
Enter fullscreen mode Exit fullscreen mode

โ˜๏ธSo why did this happen?? That's because our argument is not a string, so the first thing parseInt does is it will convert the argument into a string.

const number = 1000000000000000000000.5;

const result = number.toString(); 

console.log(result); // "1e+21"
Enter fullscreen mode Exit fullscreen mode

So when it tried to grab the integer from 1e+21, it just knows to grab the 1 value. So, using parseInt definitely has its gotcha. Because of this edge case, you might want to consider using the Math functions ๐Ÿ‘

Browser Support

Most modern browsers support Math.trunc(). EXCEPT, Internet Explorer. I know ๐Ÿ˜ž So if you need support for older browsers, use the old way ๐Ÿ˜•

Browser Support: Math.trunc

Community Input

Bitwise Operator Solutions

Double Bitwise NOT ~~

console.log(~~80.6); // 80
Enter fullscreen mode Exit fullscreen mode

Thanks: @Jorgert120

Bitwise OR |

console.log(80.6 | 0); // 80
Enter fullscreen mode Exit fullscreen mode

Thanks: @mac_experts

Resources

MDN Web Docs: Math.trunc
MDN Web Docs: parseInt
MDN Web Docs: Bitwise operators
JS Tip: Use parseInt for strings, NOT for numbers
2ality: parseInt doesnโ€™t always correctly convert to integer


Thanks for reading โค
Say Hello! Instagram | Twitter | Facebook | Medium | Blog

Top comments (6)

Collapse
 
moopet profile image
Ben Sinclair

I didn't know about trunc and I would have just used parseInt without giving it a thought, but that gotcha you explain is a good point.

Unless I was mimimising/golfing or there's a tiny performance benefit and you're performing the operation a gazillion times per second, I'd stay clear of the bitwise tricks. They're curiosities but they make the code difficult to read.

Collapse
 
samanthaming profile image
Samantha Ming

I guess bitwise operators are not as popular, so if you use it in your code itโ€™s probably going to make a few people spin their heads as to whatโ€™s going on ๐Ÿ˜ต... honestly, I have never used bitwise operator in my code before ๐Ÿ˜ฅ do you know if there are any other gotcha with using bitwise operators?

Collapse
 
moopet profile image
Ben Sinclair

I don't think so, but I like to write code as if the person maintaining it isn't familiar with all these little tricks!

Thread Thread
 
samanthaming profile image
Samantha Ming

Totally! Writing code is like communication, sure you can use all the fancy lingo. But if no one understands you, are you actually communicating. Good call! ๐Ÿ‘

Collapse
 
uddeshjain profile image
Uddesh

Great explanation. I haven't heard about Math.trunc previously. Thanks for sharing.

Collapse
 
samanthaming profile image
Samantha Ming

Glad you found it helpful! Thanks for reading it ๐Ÿ˜„