JavaScript에는 소수점 숫자를 다룰 때 유용하게 사용할 수 있는 두 가지 내장 함수가 있습니다. 바로 Math.round()와 Math.trunc()입니다. 이 두 함수는 비슷해 보이지만 동작 방식에 중요한 차이가 있으므로, 상황에 맞게 올바른 함수를 선택하는 것이 중요합니다.
Math.round()와 Math.trunc()의 차이점
- Math.round() — 소수점 숫자를 가장 가까운 정수로 반올림합니다. 소수 부분이 0.5 이상이면 올리고, 0.5 미만이면 버립니다.
- Math.trunc() — 소수점 이하를 단순히 제거하고 정수 부분만 남깁니다. 소수 값의 크기와 관계없이 무조건 잘라내기 때문에 '자르기(truncation)'라고 부릅니다.
예를 들어 3.9999라는 숫자가 있을 때, Math.round()는 4를 반환하지만 Math.trunc()는 3을 반환합니다. 아래 예제 코드를 통해 두 함수의 동작 차이를 직접 확인해 보겠습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 숫자 반올림 및 자르기</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>JavaScript에서 숫자 반올림 및 자르기</h1>
<div class="sample">3.9999</div>
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 숫자가 반올림되고 잘립니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = Math.round(3.9999) + "<br>";
resEle.innerHTML += Math.trunc(3.9999) + "<br>";
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 화면에 빨간색으로 표시된 숫자 3.9999와 '클릭하세요' 버튼이 나타납니다.
'클릭하세요' 버튼을 누르면 다음과 같은 결과가 표시됩니다.
- 첫 번째 줄: Math.round(3.9999)의 결과인 4 — 소수 부분이 0.5보다 크므로 가장 가까운 정수로 반올림됩니다.
- 두 번째 줄: Math.trunc(3.9999)의 결과인 3 — 소수 부분이 그대로 잘려나가고 정수 부분만 남습니다.
정리
두 함수의 핵심 차이를 요약하면 다음과 같습니다.
| 함수 | 동작 방식 | 3.9999 입력 시 결과 | -3.5 입력 시 결과 |
|---|---|---|---|
| Math.round() | 가장 가까운 정수로 반올림 | 4 | -3 |
| Math.trunc() | 소수 부분 제거(자르기) | 3 | -3 |
참고로 음수에서도 차이가 발생할 수 있습니다. Math.round(-3.5)는 -3을 반환하지만(0에 가까운 쪽으로 반올림), Math.trunc(-3.5) 역시 -3을 반환합니다. 하지만 Math.round(-3.6)은 -4를 반환하는 반면 Math.trunc(-3.6)은 -3을 반환하므로, 음수를 다룰 때는 특히 주의해서 함수를 선택해야 합니다.