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
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
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
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
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 <-- 😱
☝️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"
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 😕
Community Input
Bitwise Operator Solutions
Double Bitwise NOT ~~
console.log(~~80.6); // 80
Thanks: @Jorgert120
Bitwise OR |
console.log(80.6 | 0); // 80
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)
I didn't know about
truncand I would have just usedparseIntwithout 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.
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?
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!
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! 👍
Great explanation. I haven't heard about Math.trunc previously. Thanks for sharing.
Glad you found it helpful! Thanks for reading it 😄