Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

JavaScript - Math.round() method example

0 contributions
5 points

Math round is static method that returns number which is rounded to closest integer number.

// ONLINE-RUNNER:browser;

console.log( Math.round(  5     ) ); //  5

console.log( Math.round(  2.49  ) ); //  2
console.log( Math.round(  2.50  ) ); //  3
console.log( Math.round(  2.51  ) ); //  3

console.log( Math.round( -2.49  ) ); // -2
console.log( Math.round( -2.50  ) ); // -2
console.log( Math.round( -2.51  ) ); // -3

console.log( Math.round(  0.999 ) ); //  1
console.log( Math.round(  1.001 ) ); //  1
console.log( Math.round( -1.001 ) ); // -1

1. Documentation

SyntaxMath.round(number)
Parametersnumber - integer or float number value (primitive value).
ResultRounded number value (primitive value).
Descriptionround is static method that returns number which is rounded to closest integer number.

2. Custom round method examples

2.1. Rounding with precision to n places example

This section contains custom function that shows how to round number with precision to n places.

// ONLINE-RUNNER:browser;

function roundPrecised(number, precision) {
	var power = Math.pow(10, precision);

  	return Math.round(number * power) / power;
}

// Example:

console.log( roundPrecised(     5  ,  0 ) ); // 5
console.log( roundPrecised(     5. ,  0 ) ); // 5
console.log( roundPrecised(      .5,  0 ) ); // 1

console.log( roundPrecised(  1.2345,  0 ) ); // 1
console.log( roundPrecised(  1.2345,  1 ) ); // 1.2
console.log( roundPrecised(  1.2345,  2 ) ); // 1.23
console.log( roundPrecised(  1.2345,  3 ) ); // 1.235

console.log( roundPrecised( -1.2345,  0 ) ); // -1
console.log( roundPrecised( -1.2345,  1 ) ); // -1.2
console.log( roundPrecised( -1.2345,  2 ) ); // -1.23
console.log( roundPrecised( -1.2345,  3 ) ); // -1.234

console.log( roundPrecised(   12345, -1 ) ); // 12350
console.log( roundPrecised(   12345, -2 ) ); // 12300
console.log( roundPrecised(   12345, -3 ) ); // 12000

2.2. VanillaJS round implementation example

This section contains custom round function implementation.

// ONLINE-RUNNER:browser;

function roundNumber(value) {
  	if (value < 0.0) {
      	var rest = (value % 1.0);
      
      	if(rest < -0.5) {
        	rest += 1.0;
        }
      
    	return value - rest;
    } else {
    	value += 0.5;

    	return value - (value % 1.0);
  	}
}

// Example:

console.log( roundNumber(  5     ) ); //  5

console.log( roundNumber(  2.49  ) ); //  2
console.log( roundNumber(  2.50  ) ); //  3
console.log( roundNumber(  2.51  ) ); //  3

console.log( roundNumber(  0.999 ) ); //  1
console.log( roundNumber(  1.001 ) ); //  1

console.log( roundNumber( -2.49  ) ); // -2
console.log( roundNumber( -2.50  ) ); // -2
console.log( roundNumber( -2.51  ) ); // -3

console.log( roundNumber( -1.001 ) ); // -1

3. Custom plot example

Simple plot with canvas is presented for Math.round function below.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style> #canvas { border: 1px solid black; } </style>
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>
  <script>
    
    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext('2d');

    // cosine chart range
    var x1 = -10.0;
    var x2 = +10.0;
    var y1 = -10.0;
    var y2 = +10.0;

    var dx = 0.01;

    var xRange = x2 - x1;
    var yRange = y2 - y1;

    function calculatePoint(x) {
      var y = Math.round(x);

      // chart will be reversed horizontaly because of reversed canvas pixels

      var nx = (x - x1) / xRange;       // normalized x
      var ny = 1.0 - (y - y1) / yRange; // normalized y
      
      var point = {
        x: nx * canvas.width,
        y: ny * canvas.height
      };

      return point;
    }

    console.log('x range: <' + x1 + '; ' + x2 + '>');
    console.log('y range: <' + y1 + '; ' + y2 + '>');

    var point = calculatePoint(x1);
    
    context.beginPath();
    context.moveTo(point.x, point.y);

    for (var x = x1 + dx; x < x2; x += dx) {
      point = calculatePoint(x);
      context.lineTo(point.x, point.y);
    }

    point = calculatePoint(x2);
    context.lineTo(point.x, point.y);
    context.stroke();

  </script>
</body>
</html>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more