JavaScript Math.round() 메서드 완벽 가이드 – 반올림 원리부터 실전 예제까지

이 글에서는 JavaScript의 Math 객체를 활용해 부동소수점 숫자를 가장 가까운 정수로 반올림하는 방법을 단계별로 살펴봅니다.

반올림의 기본 규칙

먼저 복습 차원에서 반올림의 원리를 짚어보겠습니다. 숫자를 반올림할 때는 소수점 아래 첫째 자리 값을 기준으로 올림할지 내림할지를 결정합니다.

양수의 경우: 소수점 이하가 0.5 이상이면 올리고, 0.5 미만이면 내립니다. 예를 들어 4.6은 5가 되고, 4.4는 4가 됩니다.
음수의 경우: 소수점 이하가 0.5 이상이면 절댓값이 작아지는 방향으로 처리됩니다. 참고로 JavaScript의 Math.round()는 소수점이 정확히 0.5일 때 양의 무한대(+∞) 방향으로 반올림하므로, Math.round(-2.5)는 -3이 아니라 -2를 반환한다는 점에 유의하세요.

Math.round() 문법

Math.round(inputVal);

Math 객체를 사용하기 때문에 항상 Math로 시작합니다. 그다음 round 메서드가 오고, 괄호 안에 전달된 입력값에 메서드를 적용한 뒤 반올림된 결과값을 반환합니다.

실전 예제 코드

아래는 사용자가 입력한 숫자를 받아 Math.round()로 반올림한 결과를 화면에 출력하는 간단한 웹 페이지 예제입니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="round">Enter a number:</label>
     <input id="round" onchange=handleChange(event) type="text" name="round" value=""/>
     <input type="submit" value="Submit" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = ""
 
     const handleChange = e =&gt; {
 
       inputVal = e.target.value;
       console.log(inputVal)
     }
     const handleSubmit = e =&gt; {
       e.preventDefault();
       const root = document.querySelector("#root");
       root.innerHTML = Math.round(inputVal);
 
     }
     const inputValue = document.getElementById("round").value
   </script>
 </body>
</html>

위 코드에서 입력란에 문자열이나 null 같은 유효하지 않은 값을 넣으면 NaN(Not a Number)이 반환됩니다. 직접 코드 에디터에 다양한 부동소수점 숫자를 입력해 보면서 Math.round() 메서드가 어떻게 동작하는지 감을 잡아 보세요.

마무리

지금까지 Math 객체의 round() 메서드를 사용해 숫자를 반올림하는 방법을 알아보았습니다. 학습을 이어가고 싶다면 아래 관련 글들도 함께 확인해 보세요.

JavaScript 난수 생성(Math.random) 완벽 가이드
JavaScript parseInt() 메서드 단계별 사용법
JavaScript 카운트다운 타이머 만들기 튜토리얼
JavaScript toString() 메서드 이해하기
JavaScript toUpperCase()와 toLowerCase() 활용법