Best Practice: Watchout Wacky Decimals in JavaScript

Make your Calculations Consistent

JS uses binary floating point to handle decimal based operations.

JavaScript calculations with floating point causes the Nonsense cases especially during the result comparisons & displaying.

Here are few points how to start doing better:

• round your values before displaying;
• always use radix, to ensure that result is in the number system you expect;
• test for number presence before doing math operations;
• remember isNaN() is looking strictly for NaN;
• parse your string numerical data before calculations.

---- ## Numbers with Floating point JS uses binary floating point to handle decimal based operations. It causes the Nonsense cases especially during comparisons & displaying. Take a look on the following line: (0.1 + 0.2) == 0.3 What is the result? ... Are you sure? Check it out: (0.1 + 0.2) == 0.3 //false Here is why: 0.1 + 0.2 //0.30000000000000004 Here is how to achieve consistent results regardless the internal operations: * `toFixed()` - round to the last indicated decimal position. var num = 0.1 + 0.2; num.toFixed(1); //"0.3" **Watchout:** it returns a String! So, it's handy in cases where it's needed to display the result value e.g. percentage displaying: 95.56789.toFixed(2); //"95.57" * `parseFloat()` - converts a strings with decimals into numbers; var num = 0.1 + 0.2; parseFloat(num.toFixed(1)); //0.3 **Watchout:** it's looking for the First occurence in the front of the String! parseInt(" 20.5 meters overs the sea"); //20.5 * `parseInt()` - converts a numeric strings into integer numbers; parseInt("0.7") //0 **Watchout:** it's looking for the First integer in the front of the String! parseInt(" 77 racoons have escaped from zoo"); //77 parseInt("there were 100 racoons in zoo"); //NaN **Watchout:** it applies octal, hexadecimal & decimal values. So, use Radix value to ensure correct parsing. parseInt("011"); //11 parseInt("011", 8); //9 parseInt("011", 10); //11 parseInt("011", 16); //17 ---- ## NaN Validation It's good to ensure that you are working with the numbers before calculations to achieve expected result. But, here is another trap: typeof NaN; //number ^_^ And another: (NaN === NaN); //false 0_0 And again: isNaN("27"); //false 0_o > 0_o. I thought that String is not a Number... Hm. probably not today:). The way to check whether it's a damn number or not: function isItDamnNumber(data) { return typeof data === "number" && !isNaN(data); } isItDamnNumber(27); //true isItDamnNumber("27"); //false isItDamnNumber(NaN); //false If you need to display your numeric data, parse it and then validate. ---- ## see Also * [Best Practice: Comparisons in JavaScript](http://bloomlab.blogspot.com.ee/2015/11/best-practice-comparisons-in-javascript.html); * [Best Practice: Executions & Memory Control in JavaScript](http://bloomlab.blogspot.com.ee/2015/11/best-practice-executions-memory-control.html) * [Best Practice: Loops Optimization](http://bloomlab.blogspot.com.ee/2015/11/best-practice-loops-optimization-in.html) * [Fun with an Algorithm complexity](http://bloomlab.blogspot.com.ee/2014/07/fun-with-algorithm-complexity.html) * [JS - The Right Way](http://jstherightway.org/) * [Tutorials Point - Best Practices](http://www.tutorialspoint.com/developers_best_practices/) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)