[Javascript] 정수 올림, 반올림, 내림하기

자바스크립트는 Math.ceil(), Math.round(), Math.floor() 라는 함수를 제공해서 올림, 반올림, 내림을 가능하게 해준다. 그러나 이것은 소숫점 둘째자리까지의 계산이라서 정수 단위의 올림은 불가능하다. 즉, 5.42를 5로 만들 순 있지만 55을 50 또는 60으로 만들 수는 없다.

 

정수를 올림, 반올림, 내림하려면 아래처럼 추가 작업을 해야 한다.

 

 

HTML

<ul>
  <li data-value="52">
    철수 : <span></span>점
  </li>
  <li data-value="84">
    영희 : <span></span>점
  </li>
  <li data-value="100">
    민수 : <span></span>점
  </li>
</ul>
평균점수: <span class="avg"></span>점<br>
평균점수 반올림: <span class="result"></span>점<br>

 

Javascript

var score = document.querySelectorAll('ul li');
var scorePrint = document.querySelectorAll('ul li span');
var sum = 0;

for(let i=0; i<score.length; i++){
  var num = score[i].dataset.value;
  scorePrint[i].innerHTML = score[i].dataset.value; // 점수 출력
  num = Number(num); //숫자형으로 변환
  sum += num;
}

var _avg = sum/score.length; // 78.66666666666667
var avg = Math.round(sum/score.length); // 79
var result = Math.round(avg/10)*10; // 80

document.querySelector('.avg').innerHTML = avg;
document.querySelector('.result').innerHTML = result;

 

78.6666666 으로 나온 점수를 79로 반올림한 후 다시 80으로 반올림 해준다.

 

 

| 결과화면

 

• 철수 : 52점
• 영희 : 84점
• 민수 : 100점

평균점수: 79점
평균점수 반올림: 80점

 

 

| 주의할 점

num = Number(num); //숫자형으로 변환

이 소스에서는 HTML에 입력된 data-value를 가져왔는데 이것은 문자형(string)이기 때문에 + 연산을 하면 덧셈이 되는게 아니라 숫자끼리 붙는다. 10+10이 20이 아니라 1010이 되어버린다. 따라서 반드시 숫자형으로 변환을 해줘야 한다.

 

 

| 정리

var result = Math.round(avg/10)*10;

10으로 나누어 소숫점을 만들어준 다음 반올림을 하고 여기에 다시 10을 곱해주어서 정수 반올림을 한다. 같은 방법으로 올림은 Math.ceil, 내림은 Math.floor을 하면 된다.