{"id":1049,"date":"2012-05-16T16:54:05","date_gmt":"2012-05-16T22:54:05","guid":{"rendered":"http:\/\/bateru.com\/news\/?p=1049"},"modified":"2012-05-21T16:04:56","modified_gmt":"2012-05-21T22:04:56","slug":"code-of-the-day-javascript-decimal-expansion-a-k-a-division","status":"publish","type":"post","link":"https:\/\/bateru.com\/news\/2012\/05\/code-of-the-day-javascript-decimal-expansion-a-k-a-division\/","title":{"rendered":"Code of the Day: Javascript Decimal Expansion a.k.a Division"},"content":{"rendered":"<p><a href=\"http:\/\/www.flickr.com\/photos\/gummypiglet\/5710100518\/sizes\/m\/in\/photostream\/\"><img decoding=\"async\" src=\"http:\/\/farm3.staticflickr.com\/2557\/5710100518_bed7232cf6.jpg\" title=\"GummyPiglet\"\/><\/a><br \/>\nToday&#8217;s Code of the Day is about decimal expansion, which is just division. <\/p>\n<p>So you might be asking yourself, &#8220;if decimal expansion is divsion. Then why not use a\/b?&#8221;.<br \/>\nWell the problem is that Javascript has a ton of problems when dealing with floating point operations because of the way they are stored.<\/p>\n<p><b>Examples:<\/b><br \/>\n<code><\/p>\n<pre lang='javascript'>\r\nvar a = 1\/3;\r\na.toString()     \/\/ returns  \"0.3333333333333333\"\r\na.toFixed(25);   \/\/ returns \"0.3333333333333333148296163\"\r\n0.1 + 0.2;       \/\/ returns 0.30000000000000004\r\n<\/pre>\n<p><\/code><\/p>\n<p><b>Source for decimalExpansion()<\/b><br \/>\n<code><\/p>\n<pre lang='javascript'>\r\n\/\/ borrowed from jQuery 1.7.2\r\nvar isNumeric = function(val){\r\n\treturn !isNaN(parseFloat(val)) && isFinite(val);\r\n};\r\n\/**\r\n* @author Larry Battle <http:\/\/bateru.com\/news\/contact-me>\r\n* @date May 16, 2012\r\n* @license MIT and GPLv3\r\n*\/\r\n\/\/decimalExpansion returns a string representation of a divided by b to a fixed length.\r\n\/\/ All the paramaters must be whole numbers.\r\n\/\/ Example: decimalExpansion( 1, 3, 3 ) === \"0.333\"\r\nvar decimalExpansion = function (top, bottom, decLength) {\r\n\tif (!isNumeric(top) || !isNumeric(bottom) || !isNumeric(decLength) || !bottom) {\r\n\t\treturn null;\r\n\t}\r\n\tvar sign = ((top * bottom) != Math.abs(top * bottom)) ? \"-\" : \"\";\r\n\ttop = Math.abs(top);\r\n\tbottom = Math.abs(bottom);\r\n\tdecLength = Math.abs(decLength);\r\n\t\r\n\tvar result = Math.floor(top \/ bottom),\r\n\tremainder = top % bottom,\r\n\tmaxDecimal = 100,\r\n\ti = Math.min(Math.max(0, decLength), maxDecimal) + 1;\r\n\t\r\n\tif (1 < i) {\r\n\t\tresult += \".\";\r\n\t\twhile (i--) {\r\n\t\t\ttop = remainder * 10;\r\n\t\t\tremainder = top % bottom;\r\n\t\t\tresult += \"\" + Math.floor(top \/ bottom);\r\n\t\t}\r\n\t\tresult = result.replace(\/(\\d)(\\d)$\/, function (match, a, b) {\r\n\t\t\t\treturn +b > 4 ? +a + 1 : a;\r\n\t\t\t});\r\n\t}\r\n\treturn sign + result;\r\n};\r\n<\/pre>\n<p><\/code><\/p>\n<p><b>Test cases:<\/b><br \/>\n<iframe style=\"width: 100%; height: 300px\" src=\"http:\/\/jsfiddle.net\/hbQC9\/2\/embedded\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p><b>Demo:<\/b><br \/>\n<iframe style=\"width: 100%; height: 300px\" src=\"http:\/\/jsfiddle.net\/hbQC9\/2\/embedded\/result\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>Here are excellent links over the topic.<br \/>\nWolfram MathWorld: <a href=\"http:\/\/mathworld.wolfram.com\/DecimalExpansion.html\">Decimal Expansion<\/a><br \/>\nWikipedia.org: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Fraction_(mathematics)\">Fraction (mathematics)<\/a><br \/>\nOracle: <a href=\"http:\/\/docs.oracle.com\/cd\/E19957-01\/806-3568\/ncg_goldberg.html\">What Every Computer Scientist Should Know About Floating-Point Arithmetic<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s Code of the Day is about decimal expansion, which is just division. So you might be asking yourself, &#8220;if decimal expansion is divsion. Then why not use a\/b?&#8221;. Well the problem is that Javascript has a ton of problems when dealing with floating point operations because of the way they are stored. Examples: var &hellip; <a href=\"https:\/\/bateru.com\/news\/2012\/05\/code-of-the-day-javascript-decimal-expansion-a-k-a-division\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Code of the Day: Javascript Decimal Expansion a.k.a Division<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,23],"tags":[142,164,166,16],"class_list":["post-1049","post","type-post","status-publish","format-standard","hentry","category-frontend-tech","category-math","tag-decimal-expansion","tag-javascript","tag-math","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/1049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/comments?post=1049"}],"version-history":[{"count":7,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/1049\/revisions"}],"predecessor-version":[{"id":1072,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/1049\/revisions\/1072"}],"wp:attachment":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/media?parent=1049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/categories?post=1049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/tags?post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}