#decimal arithmetic

Checking for decimals is useful for displaying formatted numbers and other checks. Although doing so is not obvious in JS. The key is the % operator:

const hasDecimals = function(number) { return number % 1 !== 0; } console.log(hasDecimals(5.22)); // true console.log(hasDecimals(41.00001)); // true console.log(hasDecimals(0)); // false console.log(hasDecimals(42)); // false

The % returns the remainder of Euclidean division (although there is a slight difference in JS). Basically, the first operand is continually subtracted by the second as long as the number keeps the same negative/positive value. If there is anything left, that is the remainder

For example, 5 % 2 = 1, since 5 - 2 = 3, then 3 - 2 = 1. So 5.22 % 2 = 1.22 = 5.22 - 2 = 3.22 - 2 = 1.22. Finally, by using 1 as the second operator instead, it means that only integers will have 0 left after subtractions.

By including an isNaN check, the above can be used to filter out other types (Something that a string conversion decimal check could not easily do):

const hasDecimals2 = function(number) { const result = number % 1; return !isNaN(result) && result !== 0; } console.log(hasDecimals2(null)); // false console.log(hasDecimals2(undefined)); // false console.log(hasDecimals2({})); // false console.log(hasDecimals2('test')); // false console.log(hasDecimals2(2.22)); // true console.log(hasDecimals2(new Number(2.22))); // true

Note that typeof is not used since it gives 'object' when new Number() is used.

If you have ever done mathematical operations with decimal numbers in JavaScript you may have noticed some weird behaviour:

var increment = function(base, increment) { return base + increment; }; console.log('1.0 + 2.0 =', increment(1.0, 2.0));// 3 console.log('0.1 + 0.2 =', increment(0.1, 0.2));// 0.30000000000000004 console.log('0.01 + 0.06 =', increment(0.01, 0.06));// 0.06999999999999999 console.log('0.001 + 0.006 =', increment(0.001, 0.006));// 0.007 console.log('0.0001 + 0.0006 =', increment(0.0001, 0.0005));// 0.0006000000000000001

This looks like there is a bug in JavaScript's arithmetic engine, but it actaully is not. Computing is based on a base 2 number system (Technically a binary floating point system), but our number system is a base 10 system. This means that computers cannot accurately represent certian decimal numbers without help. Which means languages like JavaScript that do not focus on numerical computations can sometimes produce incorrect results when doing operations on decimal numbers like above.

There are many tactics to dealing with this, but the simplist is to just avoid working with decimal numbers altogether. Specifically, convert the decimal numbers into integers by multiplying by a high enough 10 multiple, do the calculation and then convert the result to a decimal again:

var add = function(x, y) { var APPROX = 10000; return ((x * APPROX) + (y * APPROX))/APPROX; }; console.log('1.0 + 2.0 =', add(1.0, 2.0));// 3 console.log('0.1 + 0.2 =', add(0.1, 0.2));// 0.03 console.log('0.01 + 0.06 =', add(0.01, 0.06));// 0.07 console.log('0.001 + 0.006 =', add(0.001, 0.006));// 0.007 console.log('0.0001 + 0.0006 =', add(0.0001, 0.0005));// 0.0006

Here up to 4 digits could be used, so any numbers that are sent in are multiplied by 10000 to get rid of any decimal points. One thing to note though; JavaScript is not intended for complex mathematical operations, so when you are faced with decimal operations it should cause you to question whether you are using the right tool for the job. For example, instead of computing floating points in client side code it may be better to get the server to return already computed values.