Languages
[Edit]
EN

JavaScript - Math.round() method example

8 points
Created by:
JustMike
26120

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>

 

JavaScript - Math (EN)

Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join