{"id":944,"date":"2023-12-13T21:00:00","date_gmt":"2023-12-13T21:00:00","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=944"},"modified":"2023-12-14T06:20:10","modified_gmt":"2023-12-14T06:20:10","slug":"round-to-two-decimal-places-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/round-to-two-decimal-places-javascript\/","title":{"rendered":"Round to 2 Decimal Places in JavaScript (with code)"},"content":{"rendered":"\n<p>Rounding decimal numbers can be useful while dealing with numbers in various problems. Be it a demand for some calculations or just for a soothing presentation of figures to someone, it can be really helpful. In JavaScript, we can use several methods to round to 2 decimal places. This article will discuss the methods including toFixed() and Math.round(). We will understand it better by writing code in JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Round A Number to 2 Decimal Places in JS?<\/strong><\/h2>\n\n\n\n<p>Rounding numbers is an operation in programming that is used to make data presentable in a more readable format so that it is better understood by us. More formally, it refers to approximating a number to a specified degree of accuracy. Let\u2019s understand it better with an example:<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><strong>Original Number:<\/strong> 6.892<br><strong>Rounding to one decimal place:<\/strong> 6.9<\/p>\n\n\n\n<p>Similarly, we can round it to any number of places we want. We will specifically explore how to round the numbers to 2 decimal places. Let\u2019s see different methods for the same.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1) toFixed() Method<\/strong><\/h3>\n\n\n\n<p><strong>The toFixed() method is a built-in JavaScript function that allows us to round numbers to a specified number of decimal places.<\/strong> It can be applied to the numbers, and it returns the rounded number in the form of a string. We can convert the string back to a numeric value according to our requirements.<\/p>\n\n\n\n<p>The toFixed() method is invoked on a number and a single parameter i.e. the number of decimal places to round to is passed in it.<\/p>\n\n\n\n<p>Following is the syntax for using the toFixed() method:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>number.toFixed(digits)<\/code><\/pre>\n\n\n\n<p>Where &#8216;number&#8217; is the number to be rounded, and &#8216;digits&#8217; are the desired number of decimal places.<\/p>\n\n\n\n<p>Let\u2019s check out an example to use it:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const number = 5.6789;\nconst rounded = number.toFixed(2);\n\nconsole.log(&quot;Result of toFixed method:&quot;, rounded);\nconsole.log(&quot;Data type of output is:&quot;, typeof rounded)\n\nconst convertedOutput = Number(rounded)\nconsole.log(&quot;Data type after conversion&quot;, typeof convertedOutput)<\/pre><\/div>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>Result of toFixed method: 5.68\nData type of output is: string\nData type after conversion number\n<\/code><\/pre>\n\n\n\n<p>In this example, we first rounded off the number using the toFixed() method. The output is of string data type, which can be checked by using the typeof keyword. We can convert string to number by using the Number() function. Finally, the data type of converted output is displayed.<\/p>\n\n\n\n<p>However, there is one issue that you might have noticed, which is that it returns the output in the form of a string, not a numeric value. This can lead to unexpected behavior, especially when performing mathematical operations or comparisons.\u00a0<\/p>\n\n\n\n<p>To fix this limitation, you should convert the output back to its numeric representation, as we did in the example. Various methods can be used like pareseFloat() and Number() to perform the conversion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2) Math.round() Function<\/strong><\/h3>\n\n\n\n<p>We can also round the numbers in JavaScript using the Math.round() function. Unlike the toFixed() method, which returns a string representation of the rounded number, Math.round() returns the nearest integer value. Let\u2019s explore its syntax.<\/p>\n\n\n\n<p>The Math.round() function takes a single parameter, the number to be rounded. It rounds the number to the nearest integer and returns the output.<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>Math.round(number)<\/code><\/pre>\n\n\n\n<p>If we want to round the number to 2 decimal places, we need to multiply the number by 100 and then pass it to the function, and finally divide the rounded value by 100.<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>Math.round(number*100)\/100<\/code><\/pre>\n\n\n\n<p>Let&#8217;s look at an example to understand how it works:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const number = 5.6789;\nconst rounded = Math.round(number * 100) \/ 100;\n\nconsole.log(&quot;Result of Math.round() method:&quot;, rounded);\nconsole.log(&quot;Data type of output is:&quot;, typeof rounded)<\/pre><\/div>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>Result of Math.round() method: 5.68\nData type of output is: number\n<\/code><\/pre>\n\n\n\n<p>In this example, we first multiplied the number by 100 to shift the decimal places two positions to the right. We then use the Math.round() function to round the resulting value to the nearest integer. Finally, we divide the rounded value by 100 to shift the decimal places back to their original position.<\/p>\n\n\n\n<p>When rounding negative numbers, we need to note that the Math.round() function rounds towards the nearest integer, with half values rounding towards positive infinity. This means that -0.5 will round to -0 rather than -1. If you need negative numbers to round towards negative infinity, you can use the Math.floor() function instead.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3) User-defined Function<\/strong><\/h3>\n\n\n\n<p>You must be thinking it\u2019s a lot of hassle to spend time deciding which one to use each time. Don\u2019t worry we got you covered. There is an easy way to just create your custom function and use it to round the numbers.\u00a0<\/p>\n\n\n\n<p>Before moving on to an example, let\u2019s create a function first:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>function roundToTwo(number) {\n  return +(Math.round(number + \"e+2\") + \"e-2\");\n}\n<\/code><\/pre>\n\n\n\n<p>In this function, we use the Math.round() function to round the number to the nearest integer.<\/p>\n\n\n\n<p>However, as we want to round to two decimal places, we first convert the number to a string using &#8220;e+2&#8221; to shift the decimal places two positions to the right. We then add &#8220;e-2&#8221; to shift the decimal places back to their original position. Finally, we use the unary plus operator + to convert the string back to a numeric value.<\/p>\n\n\n\n<p>Let\u2019s use this function to round the same number:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">function roundToTwo(number) {\n  return +(Math.round(number + &quot;e+2&quot;) + &quot;e-2&quot;);\n}\n\nconst number = 5.6789;\nconst rounded = roundToTwo(number);\n\nconsole.log(&quot;Result:&quot;, rounded);<\/pre><\/div>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background\" style=\"background-color:#fedcba\"><code>Result: 5.68<\/code><\/pre>\n\n\n\n<p>In this example, we simply used that function to round the number. We just need to call the function we created and pass the number as a parameter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Rounding numbers to two decimal places is a common task in JavaScript. In this article, we explored three different methods for achieving this: the toFixed() method, the Math.round() function, and a user-defined function. You can use the suitable method according to your needs. If you are still not sure, you can try our online <a href=\"https:\/\/favtutor.com\/javascript-assignment-help\" data-type=\"link\" data-id=\"https:\/\/favtutor.com\/javascript-assignment-help\">JavaScript assignment help<\/a> from top industry experts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to round a number to two decimal places in javascript using toFixed() and Math.round() methods, with examples.<\/p>\n","protected":false},"author":9,"featured_media":946,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11],"class_list":["post-944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=944"}],"version-history":[{"count":3,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/944\/revisions"}],"predecessor-version":[{"id":970,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/944\/revisions\/970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/946"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}